"M.L." wrote:
Hi NG,
I hope someone in here is able to help me in this matter. The problem:
I have created a Javascript drop-down menu which expands when moving the
mouse into a tablecell (calls my Expand() function at onMouseover on the
<td>-element).
My question is now this: How do I delay the expansion of the
menu for e.g. 500 ms in order to keep it from happening "by accident". A
simple delay is no good, since the mouse may be gone when the time has
elapsed (i.e. passed by "by accident").
I need a way of checking whether the mouse is still on the tablecell after
an amount of time has gone by (the script should wait for a while, then
check, and if yes, then expand).
How do I do this when all I have to go by is a mouseOver event?
Thanks!
regards,
M.L.
In the onmouseover event, you use setTimeout() to trigger a function that
actually does the popup. In onmouseout, you check to see if the timer is still
active, if it is, you cancel the timer:
<a href="#"
onmouseover="delayAction();return true;"
onmouseout="clearAction();return true;">Test</a>
<script type="text/javascript">
function delayAction(e) {
// this function retrieves any information
// you need about the event, sets those values
// to global variables and sets up the actual
// action to happen in a specified period of time
// remember the event that triggered this
// function in case you need it later
e = e || event;
if (e) {
// retrieve any information you need about
// the event and set that information to
// global variables
window.ActionX = (e.pageX ? e.pageX : e.clientX);
window.ActionY = (e.pageY ? e.pageY : e.clientY);
// set the actual action to happen in ~500ms
window.ActionTimer = setTimeout(doAction, 500);
}
}
function clearAction() {
// this function clears the action if
// it hasn't actually happened yet
if (window.ActionTimer) {
// if they moused out and there is
// a running timer, clear it
clearTimeout(window.ActionTimer);
window.ActionTimer = null;
}
}
function doAction() {
// this function does the actual work
// it picks up any information from the
// global variables set in 'delayAction'
alert('Mouse at: ' + window.ActionX + ',' + window.ActionY);
// this guarantees you can call setTimeout
// with a reference to 'doAction', rather
doAction.toString = function() {
return 'doAction();';
}
}
</script>
--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ -
http://jibbering.com/faq 
