How can I load div content from external file, but also use a case statement in the process? Might there be something with my Jquery code? Actually.. I'm confused??
JQuery Code:
$('.click-test').click(function() {
switch (this.id) {
case "test":
$('#test').load('external-file.html #test');
break;
case "test2":
etc..
});
html page:
<div class="click-test" id="test">click test</div>
<div id="test">place words from external file here</div>
external file .html
<div id="test">some words</div>
The jquery code is basically correct. The "this" does refer to the HTML element as you suspected and is set. So, your switch is working.
<div class="click-test" id="test">click test</div>
However, you've got 2 div's in your base HTML page that both have the ID of "test". Every ID should be unique on an HTML page (including the content you're loading). So, you'll need to do a bit of refactoring.
You could for example change the HTML to:
<div class="click-test" data-loadid="test">click test</div>
And the JavaScript to:
$('.click-test').click(function() {
switch($(this).attr("data-loadid")) {
This would read from an attribute named 'data-loadid' using the jQuery attribute function. Then you can proceed to load the external div content using load as you had done. (Although, you may want to remove the bookmark as it's unnecessary?)
The this.id referes to nothing, since the this object is the .click-test div which has no ID attribute. Everything else looks fine, except I don't know if there should be a space bar after your .html #test
Related
I am not even sure if what I am trying to do is possible. I want to present the "floating" DOM element created when dragging a row as something more than just text. Seems like when I try to use html code as the returned value it is rendered as text rather than html:
rowDragText: function(params) {
return `<div [innerHTML]=${params.rowNode.data.RULE_NAME}></div>`;
}
This is what happens:
There is public static GHOST_TEMPLATE defined in dragAndDropService.ts.
You can try modifiying that template and perhaps also inspect the createGhost function nearby.
rowDragText probably not used with this method...
I want to implement AngularJS's ng-include statement into my website to reduce code redundancy, but having trouble getting it to fully work. Currently, my index.html page is calling pageLayout.html My index.html is calling pageLayout.html successfully, but when adding a <h1> tag in index.html I cant put it on top of the pageLayout.html content that I call. Does anyone have any ideas?
Here is the link: http://plnkr.co/edit/uarelZgzmITJXg2pYXfg?p=preview
I have also tried using a directive like the following: http://plnkr.co/edit/VmAO47l7RMXTGYYFFgLB?p=preview but still having issues.
Thanks!
The transclusion strategy is set to element not to true so you can not insert extra content.
Moreover the content is wiped everytime the template value changes
And using transclusion with ngInclude does not make sense
I would rather use a directive with transclusion (or bind the title) if you want to avoid code duplication, something like
directive('pageContainer',function(){
return {
template:'<div class="divSize" ><h1>{{title}}</h1><div ng-transclude></div></div>',
scope:{
title:"#"
}
}
})
I am really new to HTML and am stuck conceptualising some code as follows.
My question is - which part of the code is actually doing the displaying of 'showHello'.
<html>
<head>
<script>
function displayCD()
{
document.getElementById("showHello").innerHTML="hello";
}
</script>
</head>
<body onload="displayCD()">
<div id='showHello'></div>
</body>
</html>
Doesn't document.getElementById("showHello").innerHTML="hello";
just set id showHello to the value hello and
<div id='showHello'></div> just create the id showHello?
If <div id...> actually displays the value of showHello, how does it, if displayCD() is called before it or is the whole document deciphered before anything is actually displayed ?
Does that make sense as a question?!!!!
Doesn't document.getElementById("showHello").innerHTML="hello"; just set id showHello to the value hello
It searches the DOM for the element with that id, and changes the HTML inside it to hello.
and just create the id showHello?
It creates an element with that id
how does it, if displayCD() is called before it or is the whole document deciphered before anything is actually displayed ?
See this:
<body onload="displayCD()">
The function is called in response to the load event firing. That won't happen until the entire document, including any dependent resources (such as images) has loaded.
The line who is in charge for displaying the "hello" is this one
function displayCD()
{
document.getElementById("showHello").innerHTML="hello"; // THIS one
}
And the displayCD() function is loaded with HTML here
<body onload="displayCD()">
PS : If you're new with HTML, you probably new with Javascript. Maybe you should look after jQuery. Here is how we doing the same thing with jQuery.
$(document).ready(function() {
$("#showHello").html("hello");
});
Preview : http://codepen.io/anon/pen/ypBvf
A simplified version of what a browser would do is like this:
create the document object
add the head element and interpret the script. This will make him remember that there exists a function called displayCD.
add the body element.
add the div HTMLElement to it and set the id property to showHello
Note: the div is declared here in Hypertext markup language <div id='showHello'></div>
when the document has done loading all the elements into it, the function you set on onLoad is called. In your case, onload="displayCD()" is the part that does that and the function called is displayCD.
displayCD will get the HTMLElement that has the id == showHello and set its innerHTML property to the hello string. Since this is called when the document has fully loaded, it means that the div with id == showHello already exists, so it will add the text hello into it.
In my page I have a hidden <div>, such as the following:
<div id="myid" style="display:none;">
...
</div>
When the user clicks a button, I have a javascript code that calls $('#myid').show("slow");, thus displaying this <div>.
My question is when does the code inside the <div> gets called: when the page first loads or only when it's shown?
My concern is that inside this <div> I'd like to place a page counter (with an <iframe>), which should only be called when the <div> is shown. The alternative would be to put the code inside the javascript, but I'd rather keep it in the page.
The code inside the div get called as you load the page.
So the counter will get called everytime the page is loaded even if the div stays hidden.
So you have to use javascript somehow like this:
<div id="myid" style="display:none;">
...
</div>
<script>
function showCounter() {
document.getElementById("myid").innerHTML = '<script>counter-code</script>';
document.getElementById("myid").show('slow');
}
</script>
and add the function showCounter to your button.
It will be run when the page loads, display:none only affects visibility and has nothing to do with code operation layer (in fact, some browsers ignore CSS entirely and may show it anyway).
If you want a piece of code to only run when clicking a JavaScript button, you should attach that code to the Javascript function. Make an empty div on your page and then use the function to put code inside it:
<div id="jsDiv"></div>
<script>
function jsCode() {
document.getElementById('jsDiv').innerHTML = 'Whatever you want';
}
</script>
Then attach the jsCode() function to your button, and the HTML will only be rendered when the function is called. If you're using server-side scripting (PHP, Rails etc.) or something more complex, look into jQuery and AJAX functions.
Try like this:
$(document).ready( function() {
$('#myid').show("slow")
}
I'm writing an application, a reporter with heirarchy of folders and files, in the lower heirarchy level there are 2 types of reports: the simple one is a flat (non link) report that being presented as a single simple line.
the second type is a link with a general description in the header and if you press the link you get a full report.
example: if I run a telnet command, I will see the command in the header and if I want to see the entire session with the device I will press the link and it will be presented.
My problem is that most of this lined-files are small but the OS reserve a minimum space for every file so I loss alot of disk space for nothing.
The solution I want to implement is a "dummy" links, which will be presented and will behave like a regular links but actually will be stored in the same file like their "parent" (probably with alot of other links like them).
The solutions I saw so far are only for "jumping" inside a page but this is not what I'm looking for, I want it to be presented like a seperated file and I dont want the "parent" file to present this information at all (the only way to see it will be by pressing the link and even then it will present only this information and not the other file content).
any idea guys?
To link to a specific part in a web page, place an anchor link where you want the user to go to when they click a link with:
<a name="anchor"></a>
and link to it with:
Click here
You can replace "anchor" with a more descriptive name if needed.
To hide/show a div (the following code is untested, but should work)
JQuery solution (If you're using JQuery):
function toggle(divname) {
$(divname).toggle();
}
The corresponding HTML:
<div id="content">some content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>
Non-JQuery Solution:
function toggle(divname) {
var adiv = document.getElementById(divname);
if (adiv.style.display === 'block' || adiv.style.display === '') {
adiv.style.display = 'none';
} else {
adiv.style.display = 'block'
}
}
The HTML:
<div style="display:hidden" id="content">Content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>