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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts

    How do I write the following function...

    How do I write a script (preferably in jQuery) that says...

    Code:
    When the mouse leaves one of the pop up divs...
    fadeOut this div...
    unless the mouse re enters the div, then cancel the timer/fadeout
    ???





    The sample I am working with is here: http://versatilestile.com/microsite/
    Last edited by sethwb; 05-08-2009 at 06:04 PM.

  • #2
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This is assuming you are using a .css file.

    Code:
    <script type="text/javascript"> 
    
    $(document).ready(function(){  
        
               $("a#[NAME OF LINK ID").click(function(event){          
               $("div#[NAME OF DIV ID]").fadeIn("slow"); 
         
    });  
          
               $("div#[NAME OF DIV ID]").click(function(event){ 
               
               $("div#[NAME OF DIV ID]").hide(); 
           
    }); 
      
    }); 
    
    </script>
    Last edited by /-\ncl`/; 05-07-2009 at 09:47 PM. Reason: Forgot to incase code in [CODE].

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    ... I appreciate the effort mr. A (can I call you that?)

    However, if you look at the code I provided I already have that. This is not what I need.

    What I need is a function for the popup div that automatically hides on mouseout if no mouseover is detected after 3 seconds

  • #4
    Regular Coder
    Join Date
    Aug 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Can anybody please help? I can't seem to get this working using the jQuery explanations & examples...

  • #5
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Here ya go:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <style type="text/css">
    #popup
    {
    display: none;
    position: absolute;
    left: 100px;
    top: 100px;
    background-color: #ff0000;
    border: 1px solid #000000;
    padding: 80px 120px;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    // <![CDATA[
    
    function hidePopUp()
    	{
    	$("#popup").hide();
    	if ($("#popup")[0].timer) clearTimeout($("#popup")[0].timer);
    	return false;
    	}
    
    function showPopUp()
    	{
    	$("#popup").show();
    	$("#popup").mouseout(hidePopUp);
    	if ($("#popup")[0].timer) clearTimeout($("#popup")[0].timer);
    	$("#popup")[0].timer = setTimeout("hidePopUp()",3000);
    	return false;
    	}
    
    // ]]>
    </script>
    </head>
    <body>
    
    <a href="#" onclick="return showPopUp()">show popup</a><br /><br />
    
    <div id="popup">heeey</div>
    
    </body>
    </html>
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

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