homepage Welcome to WebmasterWorld Guest from 54.161.192.61
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Show Hide Div. can't make it to work :S
janton

5+ Year Member



 
Msg#: 3794982 posted 11:16 pm on Nov 26, 2008 (gmt 0)

Hello Webmasters,

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>

 

astupidname

5+ Year Member



 
Msg#: 3794982 posted 12:38 am on Nov 27, 2008 (gmt 0)

I made a number of changes to clean things up a bit, hope you don't mind! It will work best to have the display property set initially in the css like below. Try this out:

<!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>

janton

5+ Year Member



 
Msg#: 3794982 posted 1:45 pm on Nov 27, 2008 (gmt 0)

astupidname thx, nice name ;)

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..

janton

5+ Year Member



 
Msg#: 3794982 posted 2:04 pm on Nov 27, 2008 (gmt 0)

wooo i found out myself:

<script type="text/javascript" language="JavaScript">
var t=setTimeout("DoViewIFRAME(this,'iframe'); return false;",10000);
</script>

astupidname

5+ Year Member



 
Msg#: 3794982 posted 7:30 pm on Nov 27, 2008 (gmt 0)

<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.

astupidname

5+ Year Member



 
Msg#: 3794982 posted 7:34 pm on Nov 27, 2008 (gmt 0)

Oh yeah, I am also forgetting that you could just do this instead:

<script type="text/javascript" language="JavaScript">
setTimeout("DoViewIFRAME(document.getElementById('hideiframe'),'iframe');",10000);
</script>

astupidname

5+ Year Member



 
Msg#: 3794982 posted 7:58 pm on Nov 27, 2008 (gmt 0)

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]

janton

5+ Year Member



 
Msg#: 3794982 posted 10:33 pm on Nov 27, 2008 (gmt 0)

astupidname no you were right..
I tryed it in Firefox.. and nothing happend :(
So.. tryed to refresh a couple of time's mmh nothing..
My solution only works in explorer!
I will try yours now.. hope that it works better :)

janton

5+ Year Member



 
Msg#: 3794982 posted 10:45 pm on Nov 27, 2008 (gmt 0)

I like the last one..
setTimeout("DoViewIFRAME(document.getElementById('hideiframe'),'iframe');",10000);

Does exactly what i want!

astupidname

5+ Year Member



 
Msg#: 3794982 posted 5:47 am on Nov 28, 2008 (gmt 0)

whewhh, glad It really wasn't just me! That's the thing about javascript, it is geared to be able to be used on somewhat of a "whatever works" basis. So even schlepps like us can get it at least somewhat right!
Glad it's working out for you and good luck!

KerryK

5+ Year Member



 
Msg#: 3794982 posted 10:45 pm on Dec 4, 2008 (gmt 0)

I have been reading this with interest. This is almost exactly what I want to do, but I want to put several show/hides on one page. Can I do this?

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

astupidname

5+ Year Member



 
Msg#: 3794982 posted 11:24 pm on Dec 4, 2008 (gmt 0)

Hi KerryK and welcome to webmasterworld!

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).

iced

5+ Year Member



 
Msg#: 3794982 posted 10:28 am on Dec 5, 2008 (gmt 0)

2nd thread I have seen and already I am learning a lot. This is a very useful forum indeed! Cheers!

KerryK

5+ Year Member



 
Msg#: 3794982 posted 2:32 am on Dec 9, 2008 (gmt 0)

Thank you very much. I'll try it out and come back for help if it is not working. I agree with iced - this is a very useful forum.
Cheers
KerryK

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved