Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Delaying my popup

    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; filterrogidXImageTransform.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>

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    onmouseover="setTimeout('fnShowDefinitionsInPopup()',500);"
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    tried it, doesn't work. Should of mentioned this......

  • #4
    New Coder
    Join Date
    Jul 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    length of timeout

    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.
    Last edited by sparks80; 07-12-2005 at 10:29 PM.

  • #5
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    oPopup.show(50, 25 , realWidth, realHeight, event.srcElement);
    to:
    Code:
    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):
    Code:
    var popObj=event.srcElement
    setTimeout("oPopup.show(50, 25 , realWidth, realHeight, popObj)",500);

  • #6
    New Coder
    Join Date
    Jul 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by mrmatt2532; 07-13-2005 at 08:58 PM.

  • #7
    New Coder
    Join Date
    Jul 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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?

  • #9
    New Coder
    Join Date
    Jul 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

    Code:
    <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>
    Last edited by mrmatt2532; 07-14-2005 at 12:55 AM.

  • #10
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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>

  • #11
    New Coder
    Join Date
    Jul 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by mrmatt2532; 07-14-2005 at 07:42 PM.

  • #12
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Seems like it to me. Oh, and you are welcome!

  • #13
    New Coder
    Join Date
    Jul 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    One more problem...

    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.
    Last edited by mrmatt2532; 07-19-2005 at 05:57 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •