View Full Version : How do I write the following function...

05-07-2009, 03:09 PM
How do I write a script (preferably in jQuery) that says...

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/

05-07-2009, 09:46 PM
This is assuming you are using a .css file.

<script type="text/javascript">


$("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();




05-07-2009, 10:21 PM
... 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

05-08-2009, 06:02 PM
Can anybody please help? I can't seem to get this working using the jQuery explanations & examples...

05-08-2009, 10:42 PM
Here ya go:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
display: none;
position: absolute;
left: 100px;
top: 100px;
background-color: #ff0000;
border: 1px solid #000000;
padding: 80px 120px;
<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()
if ($("#popup")[0].timer) clearTimeout($("#popup")[0].timer);
return false;

function showPopUp()
if ($("#popup")[0].timer) clearTimeout($("#popup")[0].timer);
$("#popup")[0].timer = setTimeout("hidePopUp()",3000);
return false;

// ]]>

<a href="#" onclick="return showPopUp()">show popup</a><br /><br />

<div id="popup">heeey</div>