...

View Full Version : Delaying my popup



mrmatt2532
07-11-2005, 10:38 PM
ok i'm trying to call a popup using onmouseover in html. This is working, but i would like to add a delay of half a second or so but everything i have tried isn't really working. Please help, here is where i'm calling it in the html:

<a href="#" ID="SLACurrent" class="MetricsLink" OnMouseOver="fnShowDefinitionsInPopup();" OnMouseOut="HidePopup();">Current</a>

and here is my script:

<SCRIPT>
var oPopup = window.createPopup();
function fnShowDefinitionsInPopup()
{
try
{
var strId = event.srcElement.id;
var objdiv = eval("o" + strId);

oPopup.document.body.innerHTML = objdiv.innerHTML;
// This popup is temporary and is used only to detect what height
// the popup should be displayed. This is important because the
// popup size will vary between definition text lengths.

//set the style of the popup
oPopup.document.body.all(0).style.cssText = "background:#ffffcc; border:1px solid black; padding:4px; width:220px; font-family:verdana; font-size:70%; COLOR:#000066; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#CEDFF6', EndColorStr='#FFFFFF')"

//get popup dimensiions
var popupBody = oPopup.document.body;
//this popup is shown to get the dimesnions.
oPopup.show(0, 0, 170, 100);
var realHeight = popupBody.scrollHeight;
var realWidth = popupBody.scrollWidth;

//hide the dimension detector popup.
oPopup.hide();

//Show the actual popup with correct width and height.
oPopup.show(50, 25 , realWidth, realHeight, event.srcElement);
}
catch(exception){}
}

function HidePopup()
{
oPopup.hide();
}

</SCRIPT>

A1ien51
07-12-2005, 04:36 AM
onmouseover="setTimeout('fnShowDefinitionsInPopup()',500);"

mrmatt2532
07-12-2005, 07:24 PM
tried it, doesn't work. Should of mentioned this......

sparks80
07-12-2005, 09:24 PM
setTimeout is definitely the right function to be using, make sure that you have used the right case (it needs to be exact), and ensure that the delay is set properly to half a second (a value of 500).

setTimeout("nameoffunction()",500);

This is the correct syntax for delaying the start of a given function.

jscheuer1
07-13-2005, 12:05 PM
Well the problem likely is this script's use of 'try'. I think the setTimeout used in the mouseover event disassociates the function from its code. I'd give this a shot, changing:

oPopup.show(50, 25 , realWidth, realHeight, event.srcElement);to:

setTimeout("oPopup.show(50, 25 , realWidth, realHeight, event.srcElement)",500);Even that might not get it because there is an event involved that may not be in force when the timeout executes, so to be safe (hopefully):

var popObj=event.srcElement
setTimeout("oPopup.show(50, 25 , realWidth, realHeight, popObj)",500);

mrmatt2532
07-13-2005, 05:49 PM
Thanks for all of your help. But it's still not fixed yet. I figured out why the function is failing when i have it timeout for 500 ms. The function breaks when it calls event.srcElement.id, or just event.srcElement. What can i do, i need the popup to show up in specific areas.....any help? Thanks.

EDIT: jscheuer1, i'm not sure why your method doesn't work, i get an error after 500ms even though it's in a try. Any help, seems like it's close. But i don't think it's what i'm looking for because i don't want the funcion to run unless its been a mouseover for 500ms, not just 500ms after going over it.

Also i found something interesting, if i right-click the mouseover function, it works after 500ms like i want. I read somewhere that when right-clicking it maintains the event.srcElement or something like that. Seemed to work, now i just need the event.srcElement to be maintained through a normal click. Or maybe there's a normal way to call it?

mrmatt2532
07-13-2005, 10:46 PM
Sorry, i didn't want to doublepost, but basically i believe the root of my problem is that event.srcElement no longer works when putting my popup function in the timeout function. Can anybody help with this, thanks.

jscheuer1
07-13-2005, 11:09 PM
I was worried about that, pity I don't have enough of your code to do tests here. I was thinking that perhaps this, or something like it might be needed:

var popObj=event.srcElement.toString()
setTimeout("oPopup.show(50, 25 , realWidth, realHeight, 'popObj')",500);The red single quotes may or may not be needed. Even if this works, it doesn't seem to satisfy your condition of requiring the mouse to linger over the trigger for 500ms before showing the pop up. That would require retesting of event.srcElement after 500ms and if it is equal to the initial event.srcElement, proceed. This should have the advantage of event.srcElement being current, if and when used. More on this later, how about enough of the code to make it work without the timeout?

mrmatt2532
07-13-2005, 11:39 PM
Feel free to play around with this. It's a complete working htm file i put together so you won't get distracted with the rest of my page. It's got a popup without delay that is working and one with delay that is not working. Thanks!


<html>
<head>
<title>popup test page</title>
<SCRIPT LANGUAGE="JScript">
var oPopup = window.createPopup();
function fnShowDefinitionsInPopup()
{
try
{
var popObj = event.srcElement;
var strId = popObj.id;
var objdiv = eval("o" + strId);

oPopup.document.body.innerHTML = objdiv.innerHTML;
// This popup is temporary and is used only to detect what height
// the popup should be displayed. This is important because the
// popup size will vary between definition text lengths.

//set the style of the popup
oPopup.document.body.all(0).style.cssText = "background:#ffffcc; border:1px solid black; padding:4px; width:220px; font-family:verdana; font-size:70%; COLOR:#000066; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#CEDFF6', EndColorStr='#FFFFFF')"

//get popup dimensiions
var popupBody = oPopup.document.body;
//this popup is shown to get the dimensions.
oPopup.show(0, 0, 170, 100);
var realHeight = popupBody.scrollHeight;
var realWidth = popupBody.scrollWidth;

//hide the dimension detector popup.
oPopup.hide();

//Show the actual popup with correct width and height.
oPopup.show(50, 25 , realWidth, realHeight, popObj);
}
catch(exception){}
}

function HidePopup()
{
oPopup.hide();
}
</SCRIPT>
</head>
<body>
<a href="http://www.google.com" ID="sampletext" OnMouseOver="fnShowDefinitionsInPopup();" OnMouseOut="HidePopup();" >popup without delay</a>
<br>
<a href="http://www.google.com" ID="sampletext" OnMouseOver="setTimeout('fnShowDefinitionsInPopup()',500);" OnMouseOut="HidePopup();" >popup with delay</a>

<!--Definitions of terms to be displayed in the popup-->
<DIV STYLE="display:none;">
<DIV ID="osampletext">
<DIV>
<B>Testing...</B>
<BR />
It Worked!
</DIV>
</DIV>
</DIV>
</body>
</html>

jscheuer1
07-14-2005, 04:45 PM
I'd never heard of this exact thing before, turns out it is a MS proprietary feature but, a very powerful one that I think I'd like to see implemented in all browsers. Anyways, here is some code that should do exactly what you are talking about:


<html>
<head>
<title>popup test page</title>
<SCRIPT LANGUAGE="JScript">
// variables made global to allow setTimeout to access them
var realHeight, realWidth, popObj, popDelay, oPopup = window.createPopup();
function fnShowDefinitionsInPopup()
{
try
{
popObj = event.srcElement;
var strId = popObj.id;
var objdiv = eval("o" + strId);

oPopup.document.body.innerHTML = objdiv.innerHTML;
// This popup is temporary and is used only to detect what height
// the popup should be displayed. This is important because the
// popup size will vary between definition text lengths.

//set the style of the popup
oPopup.document.body.all(0).style.cssText = "background:#ffffcc; border:1px solid black; padding:4px; width:220px; font-family:verdana; font-size:70%; COLOR:#000066; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#CEDFF6', EndColorStr='#FFFFFF')"

//get popup dimensions
var popupBody = oPopup.document.body;
//this popup is shown to get the dimensions.
oPopup.show(0, 0, 170, 100);
realHeight = popupBody.scrollHeight;
realWidth = popupBody.scrollWidth;

//hide the dimension detector popup.
oPopup.hide();

//Show the actual popup with correct width and height.
popDelay = setTimeout("oPopup.show(50, 25 , realWidth, realHeight, popObj)",500);
}
catch(exception){}
}

function HidePopup()
{
clearTimeout(popDelay)// added to prevent pop up if mouse leaves target too soon
oPopup.hide();
}
</SCRIPT>
</head>
<body>
<a href="http://www.google.com" ID="sampletext" OnMouseOver="fnShowDefinitionsInPopup();" OnMouseOut="HidePopup();" >popup without delay</a>
<br>&nbsp;<br>
<a href="http://www.google.com" ID="sampletext" OnMouseOver="fnShowDefinitionsInPopup();" OnMouseOut="HidePopup();" >popup with delay</a>

<!--Definitions of terms to be displayed in the popup-->
<DIV STYLE="display:none;">
<DIV ID="osampletext">
<DIV>
<B>Testing...</B>
<BR />
It Worked!
</DIV>
</DIV>
</DIV>
</body>
</html>

mrmatt2532
07-14-2005, 06:38 PM
Wow, thank you very much!

Oh, and one more question: i want the delay on this to be the same as the alt text on images, i'm guessing this is around 500ms, is this correct?

jscheuer1
07-14-2005, 07:28 PM
Seems like it to me. Oh, and you are welcome!

mrmatt2532
07-19-2005, 04:42 PM
Sometimes depending on where the popup is on the page the popup will show up right under the cursor, when this happens the popup blinks on and off, is there any way to stop this. i.e. onmouseout is activated because its not over the popup link anymore, its over the popup.

I was thinking maybe getting rid of the onmouseout in the anchor and adding some kind of code in the function which recognizes a mouse out of either the anchor text or the popup text. I need help with this though.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum