jquery pause/timeout

chronister · June 8, 2009

Hello,

I am trying to learn to use jQuery. I am really digging it so far.

I am attemting to "mimic" the tabbed hover box from http://www.addtoany.com/

I have the box, and can hover over a link and then hover into the box and select the tabs. When I mouseout of the box or the link it then disappears. So far so good.

Now I am trying to do a simple pause before disappearing so that if a user accidentally moves out of it, the box does not disappear.

I have tried hoverIntent.js and tried using setTimeout(), but I am not having any luck with it.

Here is the code I have for what I am doing. I am sure that there is a cleaner way/ better way of doing it but this is what I have and it works (except for the pause).

Does anyone know of a pause/idle/timeout jquery addition that I can use to add a pause that can be used like so...

$(this).timeOut(2000).hide().removeClass('showIt');// get current element, pause for 2 seconds and then call hide and removeClass methods

toolTip.html/php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="/css/tabTooltip.css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
         
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        
<script type="text/javascript">

	$(document).ready(function(){
		function showIt(){
			$('#toolTipContainer').show().addClass('showIt'); // show the div and add a class to it for positioning
		}

		function hideIt(){
			$('#toolTipContainer').hover(showIt, // if user hovers over the div container, show it
					 function(){
						 $(this).hide().removeClass('showIt'); // when mouse out of the div container hide it
					}
			)
			$('#toolTipContainer').hide().removeClass('showIt') // user did not hover over the div, so just hide it.
		}
		$('#tabs div').hide(); // Hide all divs
		$('#tabs div:first').show(); // Show the first div
		$('#tabs ul li:first').addClass('active'); // Set the class of the first link to active

		$('#tabs ul li a').click(function(){ //When any link is clicked
			$('#tabs ul li').removeClass('active'); // Remove active class from all links
			$(this).parent().addClass('active'); //Set clicked link class to active
			var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
			$('#tabs div').hide(); // Hide all divs
			$(currentTab).show(); // Show div with id equal to variable currentTab
			return false;
		});

		$('#trigger').hover(showIt, hideIt, 1500); // get trigger id and when user hovers over it... show or hide it
	});
    </script>
    </head>
    <body>
    	<div id="container">
        <a href="javascript:" id="trigger" style="padding:5px;">Hover Over Me</a>
        	<div id="toolTipContainer">
            	<div id="toolTipBg"></div>
    <div id="toolTipContent">
        <div id="tabs">
            <ul>
                <li><a href="#tab-1">Tab One</a></li>
                <li><a href="#tab-2">Tab Two</a></li>
                <li><a href="#tab-3">Tab Three</a></li>
            </ul>
            
            <div id="tab-1">
                <h3>Tab 1</h3>
                <p>Content for Tab 1</p>
            </div>
            <div id="tab-2">
                <h3>Tab 2</h3>
                <p>Content for Tab 2</p>
            </div>
            <div id="tab-3">
                <h3>Tab 3</h3>
                <p>Content for Tab 3</p>
            </div>
        </div>
    </div>
</div>
    	</div>
</body>
</html>

tabToolTip.css

@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
background-color: #E6E6E6;
}
#container {
margin: auto;
height: 400px;
width: 80%;
padding-top:30px;
}
#container #toolTipContainer {
width:400px;
height:300px;
margin:auto;
padding:10px;
-moz-border-radius:13px;	
position:relative;
display:none;
}
#container #toolTipContainer.showIt{
position:absolute;
top:49px;
left:45px;
}
#container #toolTipContainer #toolTipBg{
height:320px;
width:420px;
background:#555;
opacity:.7;
position:absolute;
z-index:100;
margin:-10px 0 0 -10px;
-moz-border-radius:13px;
}
#container #toolTipContent{
background:#fff;
height:100%;
-moz-border-radius:13px;
z-index:101;
position:relative;
}
a:active, a:focus {
outline: 0
}

/* TABS */

#tabs {
font-size: 90%;

}
#tabs ul {
float: right;
width: 100%;
padding-top: 4px;
background:url(/images/tabs/tabsBg.gif) repeat-x;
-moz-border-radius:6px 6px 0 0;
}
#tabs li {
margin-left: 8px;
list-style: none;
}
* html #tabs li {
display: inline; /* ie6 double float margin bug */
}
#tabs li,
#tabs li a {
float: left;
}
#tabs ul li a {
text-decoration: none;
padding: 8px;
color: #0073BF;
font-weight: bold;
}
#tabs ul li.active {
/*background: #CEE1EF url(/images/tabs/nav-right.gif) no-repeat right top; */
border-bottom:none;
}
#tabs ul li.active a {
/*	background: url(/images/tabs/nav-left.gif) no-repeat left top;*/
background:white;
border:1px solid #616060;
border-bottom:none;
-moz-border-radius:5px 5px 0 0;
color: #333333;
}
#tabs div {
clear: both;
padding: 20px;
min-height: 50px;
}
#tabs div h3 {
text-transform: uppercase;
letter-spacing: 1px;
}
#tabs div p {
line-height: 150%;
}

Sign In

jquery pause/timeout

Recommended Posts

chronister

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information