Delay and condition on expanding drop-down menu

[M.L.]

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.

 

[Grant Wagner]

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>