...

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



sethwb
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/

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


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

sethwb
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

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

itsallkizza
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">
<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum