Timing events [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : Timing events

Webskater

05-29-2003, 05:34 AM

Can anyone tell me how to time an event. I want something to happen but only 0.5 seconds after a mouseover event occurs. So, if someone casually moves their mouse over an item that calls a function when the onmouseover event occurs, I don't want the function to be executed (or called) unless the mouse is still over the item after half a second. Hope this is clear. It sounds confusing. Thanks for any help.

Gollum

05-29-2003, 05:36 AM

use setTimeout and clearTimeout...

<img src="thing.gif" onmouseover="this.ctxt = window.setTimeout('myFunction();',500);" onmouseout="window.clearTimeout(this.ctxt);">

Webskater

05-29-2003, 05:42 AM

Thanks for your answer. I am obviously being a bit thick here but could you explain the significance of 'this.ctxt' in your code please. Thanks.

onmouseover="this.ctxt = window.setTimeout('myFunction();',500);"

Charles

05-29-2003, 05:48 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<img src="http://www.bettiepage.com/images/photos/whip/whip7_a.jpg" alt="[Bettie with a Whip" onmouseover="self.int = setTimeout('alert (\\'I submit!\\')', 500)" onmouseout="clearTimeout(self.int)">

Gollum

05-29-2003, 05:49 AM

well, you have to store the timeout id somewhere. You can either store it in some variable, but I prefer to store it with the img object that generates the event. You can add properties to most javascript objects like this.

whithin the onmouseover and onmouseout event handlers, the 'this' refers to the Image object

Webskater

05-29-2003, 05:54 AM

Thank you both for your answers.

Webskater

05-29-2003, 06:17 AM

One last thing.
I need to pass a string to the function I am calling but the number of inverted commas seems to prevent this.



Is there something I can do to get over this? Thanks again.

Gollum

05-29-2003, 06:28 AM

need to escape the inner-most quotes...

 ...

Charles

05-29-2003, 06:32 AM

Gollum's method is problematic. The backslash escape is a JavaScript thing and not an HTML thing. If you are using double quotes on the outside then do not use them inside. You may confuse some browsers.

Gollum

05-29-2003, 06:42 AM

Yes, I just realised that.. :(
an alternative is to use function literals...



though this does place limits on browser compatability

lastly, you could use a global string constant...
var myStringHere = "My string here";
...

Webskater

05-29-2003, 07:03 AM

I am now writing this to the page:

This call added by Agent on behalf of ...

but it does not work. Any further ideas. Error message is 'object required'.

Webskater

05-29-2003, 07:06 AM

Sorry, had not read Gollum's last post before my last post. Will give that a try. I don't think a global variable will work. I am looping through a recordset and the string is passed into the function as I go through.

Charles

05-29-2003, 07:09 AM

The following works just fine for me. I expect that your error is in your function.

<script type="text/javascript">

</script>
This call added by Agent on behalf of ...

Webskater

05-29-2003, 08:32 AM

Charles - you were right the error is in my function - although it wasn't before.

Here is what I have now (Its an ASP page so for the sake of completeness(?) I have pasted all the code:

 38 THEN Response.Write "style=""cursor:hand;"" onmouseover=""self.int=window.setTimeout(function hdlr() {richToolTip('" & MessageText & "');}, 500)"" onmouseout=""clearTimeout(self.int)"""%>><%=CropDesc(HelpRS("UserDescription"),38)%>

This works in that it passes the string to the function called richToolTip.

Here is what I used to have.

 38 THEN Response.Write "style=""cursor:hand;"" onmouseover=""oPopup.hide();"" onclick=""richToolTip('" & MessageText & "')""" ELSE Response.Write "onmouseover=""oPopup.hide();""" END IF%>><%=CropDesc(HelpRS("UserDescription"),38)%>

This also works in that it passes the string to the function.

Here is the function.
function richToolTip(Message)
{
var knocker = event.srcElement;
var top = knocker.offsetTop+15;
var left = knocker.offsetLeft+60;
MessageSpan.innerText = Message
oPopup.document.body.innerHTML = oContextHTML.innerHTML;
oPopup.show(left, top, 300, 100, knocker);
}

The thing that is wrong now is that the line:
var knocker = event.srcElement
falls over - 'object expected'
It appears that because the function is wrapped in window.setTimeout it no longer knows what element called it - which I need because I am making a pop-up window appear next to the element that was clicked on.

Gollum

05-29-2003, 09:35 AM

Yes, that would be right. Your function is being called within a timeout event, the onmouseover event is long past (500ms ago)

What you could do is have a function to kick off your tool tips...

var rttSrc;
var rttMsg;
var rttInt;
function KickOffToolTip(oSrc, msg)
{
rttSrc = oSrc;
rttMsg = msg;
rttInt = window.setTimeout('richToolTip();', 500);
}
function ClearToolTip()
{
window.clearTimeout(rttInt);
}

then



You can live with the globals here as the user can only be looking at one tool tip at any time.

Webskater

05-29-2003, 11:18 AM

Thanks again - it is now working.