Forum Moderators: open
I got this script that displays a iframe when clicking on the show hide text..
only the script starts with show.. and whatever i do, i can't get it to start with hide..
So when i go to my .html file it shows the iframe.. but I would like to start with hidding iframe..
Could somewhone help me?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div>
<script type="text/javascript" language="JavaScript"><!--
function DoViewIFRAME(tid1,tid2,tid3) {
document.getElementById(tid1).style.display = "none";
document.getElementById(tid2).style.display = "";
document.getElementById(tid3).style.display = "";
}
function DoHideIFRAME(tid1,tid2,tid3) {
document.getElementById(tid1).style.display = "none";
document.getElementById(tid2).style.display = "none";
document.getElementById(tid3).style.display = "";
}
//--></script>
<a
id="hideiframe"
onclick="DoHideIFRAME('hideiframe','iframe','viewiframe');"
style="line-height: 16px
line-height: 16px;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
color: brown;">
Click to hide
</a>
<a
id="viewiframe"
onclick="DoViewIFRAME('viewiframe','hideiframe','iframe');"
style="display: none;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
color: brown;">
Click to show
</a>
<br/><br/>
<div id="iframe">
<iframe frameborder="1" height="200" name="frame1" scrolling="yes" src="http://www.example.com" width="550"></iframe>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#iframe { display:none; }
#hideiframe { line-height:16px; font-size:14px; font-weight:bold; font-family:sans-serif; color:brown; text-decoration:none; }
</style>
<script type="text/javascript" language="JavaScript">
//send first parameter as the link object itself - use ( this ) in function call, second parameter as the id of the element you wish to show/hide
function DoViewIFRAME(linkElem,elemId2) {
//toggle the link elements innerHTML
linkElem.innerHTML = linkElem.innerHTML === "Click to hide" ? "Click to show" : "Click to hide";
//get the current display property of the element to toggle
var isitshown = document.getElementById(elemId2).style.display;
//toggle the display property of the element
// note the style tag giving the elemtent a display property initially
document.getElementById(elemId2).style.display = isitshown === "block" ? "none" : "block";
}
</script>
</head>
<body>
<div>
<a href="#" id="hideiframe" onclick="DoViewIFRAME(this,'iframe'); return false;"> Click to Show </a>
<br/><br/>
<div id="iframe">
<iframe frameborder="1" height="200" name="frame1" scrolling="yes" src="http://www.example.com" width="550"></iframe>
</div>
</div>
</body>
</html>
well it works perfect.. great thanks for the info between te lines, so i understand wat it meens!
I was wondering the script would be perfect if it could hide or show after about 10 seconds? So first you don't see (hide) and then 10 seconds later it shows.. or turned around.. first you see and then after 10 seconds it's hide.
Again thx for the first script i got to learn the javacodes better so i don't have to ask on and on and on..
<script type="text/javascript" language="JavaScript">
var t=setTimeout("DoViewIFRAME(this,'iframe'); return false;",10000);
</script>
<script type="text/javascript" language="JavaScript">
var t=setTimeout("DoViewIFRAME(this,'iframe'); return false;",10000);
</script>
It might work that way in Internet Explorer, but not in Firefox or others perhaps. You are talking about delaying it when the page first opens (not when the user clicks the link), correct? Also that will not change the links text, as in that context ( this ) does not point to the link. Remember that the way the function is, the link is normally sent as an object (although it would be easy for you to convert it to sending it as an id like we do with the iframe div - I just felt that using (this) was easiest at the time, as the text you will want to change will almost always be in the link or element you are clicking on), so to pass the link as an object - use document.getElementById('hideiframe').
And to make it work in other browsers you will need to tell the browser to actually execute that timeout. A couple ways you can go about it (I changed from just 't' to a longer name -less chance of polluting the global namespace):
You could do this:
<script type="text/javascript" language="JavaScript">
var gonnaShowIt = function () { setTimeout("DoViewIFRAME(document.getElementById('hideiframe'),'iframe');",10000); };
gonnaShowIt(); /***<--- this will tell the browser to execute the function with the setTimeout in it. Do not just do: gonnaShowIt = setTimeout( blah blah blah -as other browsers will not execute that, as they will not see gonnaShowIt as a function that way ***/
</script>
or like this:
<script type="text/javascript" language="JavaScript">
function gonnaShowIt() { setTimeout("DoViewIFRAME(document.getElementById('hideiframe'),'iframe');",10000); };
gonnaShowIt();
</script>
or like this (preferred):
<script type="text/javascript" language="JavaScript">
window.onload = function () { setTimeout("DoViewIFRAME(document.getElementById('hideiframe'),'iframe');",10000);};
</script>
Note that those commands (whichever ONE you choose) can actually be in the same set of script tags as the DoViewIFRAME() function is in, no problem.
<script type="text/javascript" language="JavaScript">
setTimeout("DoViewIFRAME(document.getElementById('hideiframe'),'iframe');",10000);
</script>
Do not just do: gonnaShowIt = setTimeout( blah blah blah -as other browsers will not execute that, as they will not see gonnaShowIt as a function that way
[retraction]I take that back, as I'm an idiot. Sorry. I am still learning things too, and even though I thought it would work the way you were doing it too ( var something = setTimeout( blah blah blah), the first time or two it did not work in FF - so that was why I said the above. But it does work now if I do that, I must have screwed up. So ignore everything except for what I said pertaining to the link and ( this )[/retraction]
Does exactly what i want!
I am a total novice with javascript and the way I learn is to watch what you guys do and then try it out myself. So please advise, can I put several show/hides with different content on the same page and link to a box and to a downloadable invitation.
Regards
KerryK
I want to put several show/hides on one page. Can I do this?
Yes, absolutely. If you are referring to the code that I posted in the second post in this thread, it is re-usable. Merely need to send a different id as the second argument in the function call from the link or elemtent you are clicking on. You can call it multiple times from different elements to show/hide totally different elements.
and then try it out myself.
Excellent, that is how you will really learn. So please do so, and if you need specific advise about maybe modifying it (if necessary) to your needs, just ask (with some code perhaps).
