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:80 px; 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]
[CODE=javascript]
var flag=0;
var d=document.getE lementById('myd iv');
var s=document.getE lementById('che cking');
function hiding()
{
if(flag!=0)
return
d.style.display ='none';
}
s.onmouseover=f unction(){
d.style.display ='';
flag=1;
}
s.onmouseout=fu nction(){
flag=0;
setTimeout('hid ing()',2000);
}
[/CODE]

[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

[CODE=javascript]
var flag=(new Date()).getTime ();
var d=document.getE lementById('myd iv');
var s=document.getE lementById('che cking');
function hiding()
{
if((new Date()).getTime ()-flag<1999)
return
d.style.display ='none';
}
s.onmouseover=f unction(){

d.style.display ='';

flag=(new Date()).getTime ();
}
s.onmouseout=fu nction(){
flag=(new Date()).getTime ();
setTimeout('hid ing()',2000);
}
[/CODE]

[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
[CODE=javascript]if((new Date()).getTime ()-flag<2000)[/CODE]
insted of
[CODE=javascript]if((new Date()).getTime ()-flag<1999)[/CODE]
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
[CODE=javascript]if((new Date()).getTime ()-flag<2000)[/CODE]
insted of
[CODE=javascript]if((new Date()).getTime ()-flag<1999)[/CODE]
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>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div id="checking" style="width:80 px; height:20px; background-color:#666666; color:#FFFF00" onmouseover="sh ow()" onmouseout="del ayhide()">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="sh ow()" onmouseout="del ayhide()" ></div>
<script type="text/javascript">
var flag=(new Date()).getTime ();
var d=document.getE lementById('myd iv');
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('hid ing()',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

[CODE=javascript]var flaga=new Array();
var flagb=new Array();
var d=document.getE lementById('myd iv');
function hiding()
{
for(var i=0;i<flaga.len gth;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('hid ing()',2000);
}[/CODE]

[HTML]<div id="checking" style="width:80 px; height:20px; background-color:#666666; color:#FFFF00" onmouseover="sh ow(0)" onmouseout="del ayhide(0)">hove r 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(1)" onmouseout="del ayhide(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.