hide div on 'timeout'?

[AaronCampbell]

Ok, I have made a popup date chooser, but I'm running into a problem. Right now, the calendar pops up fine, and you can choose a date, and when you do it closes. That's perfect. The problem is, if you DON'T choose a date, it never goes away. How can I make it go away in 5 seconds if you don't move your mouse over it, or in 5 seconds after you move your mouse off of it, but NOT go away if the mouse is over it?

I'll attach the .js file in case it helps.

[agent002]

I had no chance to test my modification as you didn't include the HTML in the zip, but if it doesn't work, just tell me about it and attach the HTML too. :)

[AaronCampbell]

Well, almost...it still didn't time out if the user never moved their mouse over it. I made a few changes. I added a timeout to check the mouse status in the show calendar function. That way it didn't wait until they moused over it. Also, I made the mouse status start as false, and got rid of the null test in the if statement inside the function.

It worked, but not perfectly. It was still a but quirky. For example, if you clicked the icon and show_calendar() ran, it started the 5 second timer. Then, if you waited 2 seconds, and clicked it again, it started another 5 second timer. Then when the calendar disappeared (due to the first timer), you could click the icon again to re-display it, but it would go away after a second or 2 (due to the second timer, and you would still have a rogue 5 second timer counting down, even though the calendar was already gone.

So I put the 5 second timer that does NOT require a mouseover (the one that's just in show_calendar) into an if statement, which only runs the timer if the div is currently hidden. I put the entire statement just above the line that makes it visible. That way, if the calendar is already visible, it does NOT run the timer. Now it works like a charm. thanks!

I'll attach the code again.

[agent002]

It would help if you attached the HTML too, that way I could actually test my code :)

[AaronCampbell]

I didn't have any html...I use it in conjunction with php that builds a page based on a database. I made a mock html page that should show how it's being used. here's everything

[agent002]

Ok, good. I'm glad you made it from the poor help I gave you :)

[AaronCampbell]

ok, I found a better way, so I thought I'd share. I found out that you can use setTimeout like this:
var timeout_ip;
timeout_id = setTimeout('hide_calendar()',5000);

then you can do this:
if(timeout_id){clearTimeout(timeout_id);}

and it'll stop the timeout.

I'll attach the new .js file. You can use it with the html in the other attachment.