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]

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