By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,024 Members | 2,027 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,024 IT Pros & Developers. It's quick & easy.

Delay and condition on expanding drop-down menu

P: n/a
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.
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
"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

Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.