HTML hide and show - when does the code run? - html

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")
}

Related

How Can I Change The Background Of My Site When A Key Is Pressed?

I'm Making A Game In Html, And I Need To Link To Another Page When A Key Is Pressed.
I've Tried href And Some Other Things.
My Code Is:
<element onkeypress="Gamestart()">
<script>
function Gamestart() {
Play
}
</script>
Html Never Really Gives People Error Messages, So I Have No Error Messages, But My Code Does Not Work.
You have HTML inside your Javascript function which makes no sense. You would be better using the anchor tag <a> with an onclick attribute to trigger a JavaScript function.
You can use the JavaScript window.open() to open a new page.
Click here
<script>
function myFunction {
window.open("https://your-url-here.com/page");
}
</script>
You can do whatever you want in this function, including changing an image like you mention in the title.

innerHTML doesn't add HTML elements permanently

I'm trying to understand the behavior of innerHTML in the code below. I want to permanently add a new div block every time I hit the button, but it seems that the new block only pops up for a split second then disappears.
Does anyone know why this is the case, and how to fix it?
Also, when I change the code to use appendChild instead of innerHTML, I get an error saying Argument 1 of Node.appendChild is not an object.. I'm not sure what this means.
Any help is much appreciated!
Below is the code:
<DOCTYPE html>
<html>
<body>
<form onSubmit="loadData()">
<input type="submit" id="button">
</form>
<div id="block">List of items:</div>
<script>
function loadData(){
document.getElementById("block").innerHTML += "<div>item</div>";
// document.getElementById("block").appendChild("<div>item</div>");
};
</script>
</body>
</html>
Because you are submitting then the page reloads and your HTML is obliterated.
If you need items to persist then you will need to use cookies, localStorage or a server-side solution.
function addItem()
{
document.getElementById("block").innerHTML += "<div>item</div>";
}
<DOCTYPE html>
<html>
<body>
<form>
<input type="button" id="button" onclick="addItem()" />
</form>
<div id="block">List of items:</div>
</body>
</html>
you are submitting the page. appendChild or innerHtml happen directly after submit, before the new page is loaded. once the new page is loaded, the current page (with the applied modifications) is dismissed and replaced with the new page.
if you wanted something to happen on the new page, you would need to execute the code on that page. (or don't use a form submit, but rather some ajax for sending the form).
The reason why appendChild is not working for you, is that appendChild expects a dom node as parameter, not a string. it would be like document.getElementById("foo).appendChild(document.createElement("div")). (the tricky part is that with createElement you get an empty element, you would also need to put the content you want into it.
Your first question is already answered by #lee.
Your problem with your second answer is, that you can not use appendChild like you did. If u want to use append child, according to the mozilla developer docs you will have to to something like this:
var mydiv = document.createElement("div");
mydiv.appendChild(document.createTextNode("item"));
document.getElementById("block").appendChild(mydiv);
to get the result you asked for.

How do I make an iframe disapear after it got clicked once?

As the title says,I haven't realy started creating the code because I need a little help in here.Im not good at javascript or jquery scripting,I just started learning about html so I only know the basics.Now,getting back on topic.
I want an iframe disapear as soon as it's clicked but as I said I just started scripting.Anyone has any idea ?
Here's how you can do this with plain old JavaScript. Note that clicking the page loaded inside the iframe may not call you event handler which is why I've added a border to this example (clicking the border will execute the event handler). You may need to overlay the iframe with another element and capture the click event on the overlaid element.
<iframe src="http://someurl" onclick="this.style.display = 'none'" style='border: solid 10px red'></iframe>
you can use CSS to do this, give your iframe an id for example call it "iframe_id" like this:- #iframe_id.click{ display:none;}
Edit: as per your comment.
To include jQuery, put the following in your HTML <head></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Then use this w3schools article to learn how to attach javascript to HTML.
In your Javascript, you can use jQuery like this:
// Run all of the following code when our document is loaded
$( document ).ready(function() {
// Setup an event handler. Says, when we click on an iframe, run this function
$("iframe").on("click",function(){
$(this).remove();//jQuery function to completely remove from DOM
/* OR */
$(this).css("display","none"); //jQuery function that completely hides in CSS
};
});
Since you said you're new to programming HTML, you will want to read and practice JS. Here's an introduction to JS and jQuery.

How to correctly call jQuery function that uses HTML elements?

I'm new to the use of jQuery so the problem I'm facing should be fairly straight forward. Basically what I'm trying to accomplish is load a variety of simple text-only pages within DIV elements of my site, and with a navigation bar hide/unhide these individual DIVs.
DIVs are correctly loaded the requested pages using an script block. However, what is not working correctly is toggling the visibility of these DIV blocks. I've narrowed it down to a jQuery function I've created which blocks the entire script call whenever I refer to any of the DIV blocks. Let me explain better with a code snippet.
This is is some very simple code that, on the click of a menu link, runs a hide function then shows the corresponding DIV element.
$( document ).ready(function()
{
console.log("document ready."); <-- does NOT get called with hideDivs()
$('#button1').click(function(){
hideDivs();
$("#page1").show();
});
$('#button2').click(function(){
hideDivs();
$("#page2").show();
});
});
This is the hideDivs() function, JUST above the ready function:
function hideDivs()
{
$("#page1").hide(); <-- These lines cause the entire
$("#page2").hide(); <-- <script> block to note get called.
}
Finally, page1 and page2 are created with a script block halfway inside the page:
<div id="page1"></div>
<div id="page2"></div>
<script>
$("#page1").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page1.php">').show();
$("#page2").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page2.php">').hide();
</script>
Why then is it that the top SCRIPT block fails with the hideDivs() function? I've tried placing it inside the $( document ).ready function with no change. Again, if the function is blank, or contains something simple like 'console.log' it works, but when referring to DIV tags it breaks.
Even stranger, the code that makes the function FAIL, WORKS if I simply rewrite the code as such:
$('#button1').click(function(){
$("#page1").hide(); <-- This works fine
$("#page2").hide(); <-- (page1 repeated to match function code)
$("#page1").show();
});
I have quite a few pages so I would much rather be able to use a function as not to have lots of repetitive code.
I have no errors displayed in my javascript console. I've looked closely at functions calls with StackOverflow and Google searches but couldn't spot a solution. I'm sure I've made a really silly mistake I'm overlooking, so any help would be much appreciated.
So instead of the whole function to hide your divs, you can simply put a class on each one and hide them by selecting that class. For example, each page Div give a class="clickablePages", and then do:
$(".clickablePages").hide();
that will simply hide all the divs that you have added the class to.
As for repeating all the button clicks for each button, you can simply do it in one function based on the id of the button. You can again put a class on all of the buttons as well, trigger the function by selecting the class and then grab the id you need within that function. something like this:
$('.buttonclick').click(function(){
var pageID = $(this).attr('id');
$("#page" + pageID).show();
});
In this case, if your buttons just had an id of '1' or '2' that matched the page number, it would only show the div for that page number. Hope that makes sense.

html element whose text can be dynamically changed also an onclick action to point to a function NOT button

currently I am using a button whose 'value' i am able to change so that text written over button changes but I see that text is centered inside button & not big enough . Can I get something like +,- we see in windows explorer which enables to fold & expand folder in tree view.
i do not want to use any external file (img etc.) as I am creating a single self-sufficient webpage.
Please suggest.
you can use this code for displaying + sign
----Firstly put this code in the head of your html.
<script type="text/javascript">
function function_Name()
{
alert('hi');
}
</script>
Then call the above function from this link here below, onclick event here call the above declared function:
+