showing and hiding an element

[rohitchawla]

i am trying to show and hide a div when onmouseover and onmouseover another div element.
i am setting a setTimeout duration on onmouseout to delay the hiding of div for around two second
The problem is that when i mouseover an element and then onmouseout it and then back again mouseovers that element before the timeout, the element still gets hidden
so i put a flag=1 when i mouseover the element and flag=0 at mouseout and checked the value of the flag when calling the hiding function

still there was a problem
if i repeated mouseover and mouseout the element, at the time when the hiding function is called, if value of flag was 0, it hides the element before the timeout of last onmouseout even called
dont know if i made it any clear

here is my code
[HTML]<div id="checking" style="width:80px; height:20px; background-color:#666666; color:#FFFF00">hover here</div>[/HTML]
[HTML]<div id="mydiv" style="position:absolute; top:40px; left:300px; width:500px; height:400px; background-color:#33CCFF; z-index:1000; display:none " ></div>[/HTML]

var flag=0;
var d=document.getElementById('mydiv');
var s=document.getElementById('checking');
function hiding()
{
    if(flag!=0)
    return
    d.style.display='none';    
}
s.onmouseover=function(){
    d.style.display='';
    flag=1;
}
s.onmouseout=function(){
    flag=0;
    setTimeout('hiding()',2000);
}
 

[rohitchawla]

i think i got it working but not too sure
I dont know if it can be achieved by any other way as well

i changed my code to include a timestamp in flag
and checked for the difference in current time and timestamp

var flag=(new Date()).getTime();
var d=document.getElementById('mydiv');
var s=document.getElementById('checking');
function hiding()
{
    if((new Date()).getTime()-flag<1999)
    return
    d.style.display='none';
}
s.onmouseover=function(){
 
    d.style.display='';
 
    flag=(new Date()).getTime();
}
s.onmouseout=function(){
    flag=(new Date()).getTime();
    setTimeout('hiding()',2000);
}
 

[acoder]

i think i got it working but not too sure
I dont know if it can be achieved by any other way as well

i changed my code to include a timestamp in flag
and checked for the difference in current time and timestamp

I think that should work. More robust than a simple flag.

[rohitchawla]

yes i want to wait for a few seconds before hiding the div element if user has moved his mouse away from the hover element kinda putting a delayed hide but if the user gets back on the hover element before timeout of hiding of div, the div should not get hidden and a new timeout be set when the user hovers out of the hover element again

[rohitchawla]

hehe where did your last post go

[acoder]

hehe where did your last post go

Since you posted before I posted, it answered my question, so I deleted it. Didn't think you'd notice :p Still, it's good to confirm.

[rohitchawla]

yea my last post was reply to your question and after posting i saw ur post not there :P

[rohitchawla]

there is a little problem as well
when i put

if((new Date()).getTime()-flag<2000)

insted of

if((new Date()).getTime()-flag<1999)

the div sometimes stays there even when at timeout, not a big problem but just a difference of a millisecond removes it
but since i am checking for value less than 2000 ms, it should work every time as i am calling setTimeout function after 2000 ms

[acoder]

there is a little problem as well
when i put

if((new Date()).getTime()-flag<2000)

insted of

if((new Date()).getTime()-flag<1999)

the div sometimes stays there even when at timeout, not a big problem but just a difference of a millisecond removes it
but since i am checking for value less than 2000 ms, it should work every time as i am calling setTimeout function after 2000 ms

I'm not sure of the timing issues. You should also test on a slower machine and see if that affects anything.

[rohitchawla]

there is another problem now

i have put the functions i called at onmouseover and onmouseout on both the div elements now
and when i hover on 1st div, it opens the 2nd div
now if i put my 2nd div somewhat above the 1st div and take my mouse from 1st div to 2nd div without getting out from 1st div, the onmouseover event of 2nd div gets fired, and when i continue moving the mouse inside 2nd div and get out of 1st div, the onmouseout event of 1st div gets fired and that hides my 2nd div after 2 seconds even when i am hovering my mouse on 2nd div

here is my code
[HTML]<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div id="checking" style="width:80px; height:20px; background-color:#666666; color:#FFFF00" onmouseover="show()" onmouseout="delayhide()">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 " onmouseover="show()" onmouseout="delayhide()" ></div>
<script type="text/javascript">
var flag=(new Date()).getTime();
var d=document.getElementById('mydiv');
function hiding()
{
if((new Date()).getTime()-flag<1998)
return
d.style.display='none';
}
function show(){
d.style.display='';
flag=(new Date()).getTime();
}
function delayhide(){
flag=(new Date()).getTime();
setTimeout('hiding()',2000);
}
</script>
</body>
</html>[/HTML]

[acoder]

there is another problem now

i have put the functions i called at onmouseover and onmouseout on both the div elements now
and when i hover on 1st div, it opens the 2nd div
now if i put my 2nd div somewhat above the 1st div and take my mouse from 1st div to 2nd div without getting out from 1st div, the onmouseover event of 2nd div gets fired, and when i continue moving the mouse inside 2nd div and get out of 1st div, the onmouseout event of 1st div gets fired and that hides my 2nd div after 2 seconds even when i am hovering my mouse on 2nd div

So what do you want it to do instead?

[rohitchawla]

i want that when my mouse is over any of my divs with show and hide functions, the div should not hide
but what happens is that if i mouseover a div which shows the 2nd div, and if the 2nd div overlaps the 1st div from any sides and i move my mouse to the 2nd div without going out of 1st div, it fires the onmouseover event of 2nd div and while still moving inside the 2nd div, if the boundaries of 1st div are crossed, the mouseout event from 1st div gets fired and my 2nd div gets hidden even when i am hovering over it
The html code i gave in my last post is a working demo
u can try it out and see the problem

[acoder]

This link has a lot of useful information on event orders, bubbling and capturing. You need to stop the propagation of events with stopPropagation() or setting cancelBubble to false (the last one for IE).

[rohitchawla]

i tried to rework the code today and i think the problem is solved
i will also look into stopPropogation and cancelBubble as well after this

this is the code i am using

var flaga=new Array();
var flagb=new Array();
var d=document.getElementById('mydiv');
function hiding()
{
    for(var i=0;i<flaga.length;i++)
    {
        if((new Date()).getTime()-flaga[i]<1998)
            return
        else if(flagb[i]==1)
            return
    }
    d.style.display='none';
}
function show(val){
    flaga[val]=(new Date()).getTime();
    flagb[val]=1;
    d.style.display='';
}
function delayhide(val){
    flaga[val]=(new Date()).getTime();
    flagb[val]=0;
    setTimeout('hiding()',2000);
}

[HTML]<div id="checking" style="width:80px; height:20px; background-color:#666666; color:#FFFF00" onmouseover="show(0)" onmouseout="delayhide(0)">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="show(1)" onmouseout="delayhide(1)" ></div>
[/HTML]

[acoder]

i tried to rework the code today and i think the problem is solved
i will also look into stopPropogation and cancelBubble as well after this

It might work, but it looks very hack-ish. You'll find cancelling the event propagation is cleaner.

[rohitchawla]

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

can u check my code and test page

 
var elems=document.getElementsByTagName("div");
var d=document.getElementById("mydiv");
var flag=(new Date()).getTime();
function show(val)
{
    flag=(new Date()).getTime();
    if(d.style.display!='')
    {
        d.style.display='';
    }
    for(var i=0;i<elems.length;i++)
    {
        if(elems[i].id!=val)
        {
            elems[i].addEventListener("mouseout",stopev,false);
        }
        else
        {
            elems[i].addEventListener("mouseout",hide,false);
        }
    }
}
function hide()
{
    flag=(new Date()).getTime();
    setTimeout('hiding()',2000);
}
function stopev(evt)
{
    evt.stopPropagation();
}
function hiding()
{
    if((new Date()).getTime()-flag<1998)
    return
    d.style.display='none';
}
 

here is the test page
[HTML]
<html>

<body>
<div id="checking" style="width:80px; height:20px; background-color:#666666; color:#FFFF00" onmouseover="show('checking')" onmouseout="hide()">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="show('mydiv')" onmouseout="hide()" >sdfsdf</div>
<script type="text/javascript">

var elems=document.getElementsByTagName("div");
var d=document.getElementById("mydiv");
var flag=(new Date()).getTime();
function show(val)
{
flag=(new Date()).getTime();
if(d.style.display!='')
{
d.style.display='';
}
for(var i=0;i<elems.length;i++)
{
if(elems[i].id!=val)
{
alert(elems[i].id+"\'s mouseout disabled");
elems[i].addEventListener("mouseout",stopev,false);
}
else
{
elems[i].addEventListener("mouseout",hide,false);
}
}
}
function hide()
{
flag=(new Date()).getTime();
setTimeout('hiding()',2000);
}
function stopev(evt)
{
evt.stopPropagation();
}
function hiding()
{
if((new Date()).getTime()-flag<1998)
return
d.style.display='none';
}
</script>
</body>
</html>
[/HTML]

[rnd me]

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.

<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()
{     clearTimeout(d.to);
    if(flag!=0)
    return
    d.style.display='none';    
}
s.onmouseover=function(){
    d.style.display='';
    flag=1;
}
s.onmouseout=function(){
    clearTimeout(d.to);
    flag=0;
    d.to=setTimeout(hiding,2000);
}
</script>    
 
 
</html>

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

[acoder]

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.