show/hide iframe

@ofirJul 27.2005

hi,
i have an IFRAME i want to show/hide on some HREF mouseover.
here is the problem:

–

when mouseover on the HREF the iframe will ~~[U]~~show[/U] (dispaly=””)..

–

when mouseout of the HREF the iframe will ~~[U]~~hide[/U] (dispaly=”none”), ~~[B]~~BUT…[/B] only if the mouse is not on the iframe.

–

the IFRAME will stay shown as long as the is over it

–

when mouseout of the IFRAME the iframe will hide

to post a comment

JavaScript

13 Comments(s) _↴

@KorJul 27.2005 — #
when mouseout of the HREF the iframe will hide (dispaly="none"), BUT... only if the mouse is not on the iframe.
[/quote]
That is impossible. The mouse can not be the same time on a href and on the iframe... But, there might be a solution, using a setTimeout() to delay the hide. If after the delay the mouse is focusing the iframe, the hide function is not triggered.

@ofirauthorJul 27.2005 — #ok.. how do i do this ??

(assuming i have no knowledge in JS)

@KorJul 27.2005 — #

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <script type="text/javascript">
 var stat;
 var delay=2000;//delay in milliseconds
 function show(){
 var oIfr = document.getElementById('ifr');
 oIfr.style.display=(oIfr.style.display=='block')?'none':'block';
 }
 function hide(){
 stat = setTimeout('show()',delay)
 }
 onload=function(){
 var dIfr = document.getElementById('ifr').contentWindow.document.documentElement;
 dIfr.onmouseover = function(){parent.clearTimeout(parent.stat)}
 dIfr.onmouseout = function(){parent.hide()}
 }
 </script> 
 </head>
 <body>
 <span onmouseover="show()" onmouseout="hide()">showhide</span>
 <br>
 <br>
 <iframe src="iframe.html" id="ifr" style="display:none"></iframe>
 </body>
 </html>
 [/code]

@ofirauthorJul 27.2005 — #W_O_W !!

this is perfect !! thank u !!

what if i got more then one iframe+href ?

@KorJul 27.2005 — #ok, it is a litte bit more intricate, but here's your code:

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <script type="text/javascript">
 var stat;
 var delay=2000; //delay in milliseconds
 function show(id){
 var oIfr = document.getElementById(id);
 oIfr.style.display=(oIfr.style.display=='block')?'none':'block';
 }
 function hide(id){
 stat = setTimeout('show("'+id+'")',delay)
 }
 function getId(obj){
 var allIfr = document.getElementsByTagName('iframe');
 for(var i=0;i<allIfr.length;i++){
 var dIfr = allIfr[i].contentWindow.document.documentElement;
 if(obj==dIfr){hide(allIfr[i].id);break}
 }
 }
 onload=function(){
 var allIfr = document.getElementsByTagName('iframe');
 for(var i=0;i<allIfr.length;i++){
 var dIfr = allIfr[i].contentWindow.document.documentElement;
 dIfr.onmouseover = function(){parent.clearTimeout(parent.stat)}
 dIfr.onmouseout = function(){parent.getId(this)}
 }
 }
 </script> 
 </head>
 <body>
 <span onmouseover="show('ifr0')" onmouseout="hide('ifr0')">showhide iframe0</span>
 <br>
 <br>
 <iframe src="iframe.html" id="ifr0" style="display:none"></iframe>
 <span onmouseover="show('ifr1')" onmouseout="hide('ifr1')">showhide iframe1</span>
 <br>
 <br>
 <iframe src="iframe1.html" id="ifr1" style="display:none"></iframe>
 </body>
 </html>
 [/code]

@angeljsJan 23.2008 — #Hi, sorry to dredge up an old post, but I've been searching for something like this for days!

Can I have the iframes open and close with clickable links instead, and can I have the collapsed by default?

@KorJan 23.2008 — #There are some sites which have their own javascript code which prevent them to be opened in an iframe/frame from a page which belongs to different domain. There is not much to do about this...

@angeljsJan 23.2008 — #Gosh...that was a fast response! I'd edited the above post before I realised you had replied. :rolleyes:

What I want to ask (now I'm repeating myself!) is:

Can I have the iframes open and close with clickable links instead, and can I have them collapsed by default?

The first problem seems to have corrected itself.?

@KorJan 23.2008 — #you may use [B]onclick[/B] instead of [B]onmouseover[/B]

@angeljsJan 23.2008 — #Yes, that works, thank you. ? However, when I open the page, the iframe is already open. Is there a way to keep it closed until the link is clicked?

@KorJan 23.2008 — #should be "closed", as long as you give it the CSS [I]display:none[/I] (locally or embedded/external)

@angeljsJan 23.2008 — #Yes, I'd deleted that, for some strange reason. :o

Sorry for being a numpty, and thank you for your help...you're an ANGEL!!

@KorJan 23.2008 — #You're welcome, no problem... ?

Also in #JavaScript _↴

can you help make this code work Error: return statement, HELP!Moving Image

Success!

Help @ofir spread the word by sharing this article on Twitter...

Tweet This

show/hide iframe

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

show/hide iframe

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴