showing and hiding an element

**rohitchawla** · Feb 22 '08, 10:27 AM

i tried using stopPropagation in mozilla
but it is not working properly

can u check my code and test page
[CODE=javascript]

var elems=document. getElementsByTa gName("div");
var d=document.getE lementById("myd iv");
var flag=(new Date()).getTime ();
function show(val)
{
flag=(new Date()).getTime ();
if(d.style.disp lay!='')
{
d.style.display ='';
}
for(var i=0;i<elems.len gth;i++)
{
if(elems[i].id!=val)
{
elems[i].addEventListen er("mouseout",s topev,false);
}
else
{
elems[i].addEventListen er("mouseout",h ide,false);
}
}
}
function hide()
{
flag=(new Date()).getTime ();
setTimeout('hid ing()',2000);
}
function stopev(evt)
{
evt.stopPropaga tion();
}
function hiding()
{
if((new Date()).getTime ()-flag<1998)
return
d.style.display ='none';
}
[/CODE]

here is the test page
[HTML]
<html>

<body>
<div id="checking" style="width:80 px; height:20px; background-color:#666666; color:#FFFF00" onmouseover="sh ow('checking')" onmouseout="hid e()">hover here</div>
<div id="mydiv" style="position :absolute; top:20px; left:60px; width:500px; height:400px; background-color:#33CCFF; z-index:1000; display:none; text-align:center; vertical-align:middle " onmouseover="sh ow('mydiv')" onmouseout="hid e()" >sdfsdf</div>
<script type="text/javascript">

var elems=document. getElementsByTa gName("div");
var d=document.getE lementById("myd iv");
var flag=(new Date()).getTime ();
function show(val)
{
flag=(new Date()).getTime ();
if(d.style.disp lay!='')
{
d.style.display ='';
}
for(var i=0;i<elems.len gth;i++)
{
if(elems[i].id!=val)
{
alert(elems[i].id+"\'s mouseout disabled");
elems[i].addEventListen er("mouseout",s topev,false);
}
else
{
elems[i].addEventListen er("mouseout",h ide,false);
}
}
}
function hide()
{
flag=(new Date()).getTime ();
setTimeout('hid ing()',2000);
}
function stopev(evt)
{
evt.stopPropaga tion();
}
function hiding()
{
if((new Date()).getTime ()-flag<1998)
return
d.style.display ='none';
}
</script>
</body>
</html>
[/HTML]

**rnd me** · Feb 22 '08, 11:45 AM

i don't know how this ever got so complicated!

i could not follow.
i added two clearTimeouts to the code from the first post, and everything seems to be working for me in ie7 now.

Code:

<html>

<div id="checking" style="width:80px; height:20px; background-color:#666666; color:#FFFF00">hover here</div>


<div id="mydiv" style="position:absolute; top:40px; left:300px; width:500px; height:400px; background-color:#33CCFF; z-index:1000; display:none " ></div> 

<script type='text/javascript'>
	
	

var flag=0;
var d=document.getElementById('mydiv');
var s=document.getElementById('checking');
function hiding()
{   [B]  clearTimeout(d.to);[/B]
	if(flag!=0)
	return
	d.style.display='none';	
}
s.onmouseover=function(){
	d.style.display='';
	flag=1;
}
s.onmouseout=function(){
    [B]clearTimeout(d.to);[/B]
	flag=0;
	[B]d.to=setTimeout(hiding,2000);[/B]
}
</script>	


</html>

am i missing something, or does this work?
it wont vanish until 2 secs after the last mouseout.

**acoder** · Feb 22 '08, 12:24 PM

Originally posted by rnd me

i added two clearTimeouts to the code from the first post, and everything seems to be working for me in ie7 now.

Good point about the clearTimeout, but the second div now overlaps - see post #14.

showing and hiding an element

Comment

Comment

Comment