jquery question: doTimeout

I have the following code:


I would like to know why I can't get doTimeout to delay the response of jquery's hide().  I'm using http://benalman.com/code/projects/jquery-dotimeout/examples/hoverintent/
<script src="jquery-1.4.2.min.js"></script>
<script src="jquery.ba-dotimeout.min.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 
 $('li.menu').hover(
 
function (){ 
 $('ul', this).show(250);
 },
function(){
 $('ul', this).doTimeout(1000, hide(250));
 
 });
 });
</script>

Open in new window

markerlineAsked:
Who is Participating?
 
hieloCommented:

IF all you want to do is the hide, then this works fine for me:
<script src="jquery-1.4.2.min.js"></script>
<script src="jquery.ba-dotimeout.min.js"></script>
<!-- you are not using the following. Get rid of it -->
<!-- <script type="text/javascript"></script> -->

<script type="text/javascript">
$(document).ready(function(){
 
 $('li.menu').hover(
 
function (){ 
 $('ul', this).show(250);
 },
function(){
 $('ul', this).doTimeout(1000, 'hide',250);
 
 });
 });
</script>


On another note, I tested what I gave you earlier and it works fine for me. On the following example, I am also changed the background color and I also increased the delayed times so you can actually see that the effects are getting executed as expected.  If it still doesn't work for you, then it's probably a cross platform incompatibility. I am using FF 3.6.3 and IE6 on XP and it works fine:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Hielo</title>
<style type="text/css">
.menu ul{display:none;}
</style>
<script src="jquery-1.4.2.min.js"></script>
<script src="jquery.ba-dotimeout.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
	$('li.menu').hover(
 		function (){ 
			$('ul', this).css("background-color","khaki").show(250);
		},
		function(){
			var self=this;
			$('ul', this).doTimeout(3000, function(){$('ul',self).css("background-color","white").hide(250)});

			//this works too - or at least it does for me
			//$('ul', this).doTimeout(1000, 'hide',250);
		}
	);
});
</script>


</head>
<body>
<ul>
	<li class='menu'>lower<ul><li>a</li><li>b</li><li>c</li></ul></li>
	<li class='menu'>numbers<ul><li>1</li><li>2</li><li>3</li></ul></li>
	<li class='menu'>upper<ul><li>A</li><li>B</li><li>C</li></ul></li>
</ul>
</body>
</html>

Open in new window

0
 
markerlineAuthor Commented:
Wow!  This is 500 points!  I didn't even realize I had assigned that much.
0
 
HyperBPPCommented:
Try

 $('ul', this).doTimeout(1000, function(){hide(250);});

Open in new window

0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
hieloCommented:
>>Wow!  This is 500 points!  I didn't even realize I had assigned that much.
As a  Premium Service Member you have unlimited points to give. It will not cost you a penny more nor a penny less from what you have already paid!  As a matter of fact, assigning maximum points to your question will simply attract more people to your questions. Why wouldn't you want that?!!!

As for your problem at hand, try:
<script type="text/javascript">
$(document).ready(function(){
 
	$('li.menu').hover(
		function (){ 
			$('ul', this).show(250);
 		},
		function(){
			var self=this;
			$('ul', this).doTimeout(1000, function(){$('ul',self).hide(250)} );
 
		}
	);
});
</script>

Open in new window

0
 
markerlineAuthor Commented:
neither of those solutions seem to work.  the hide(250) is supposed to apply animation at 250ms while doTimeout is supposed to prevent hide from happening until 1000ms after the user has left the hover state.
0
 
hieloCommented:
on my last post, try changing:
$('ul', this).doTimeout(...)

to:
$(this).doTimeout(...)
0
 
markerlineAuthor Commented:
In Firefox it ignores the animation and in IE 8 it animates to show() but stays frozen and doesn't hide().
0
 
markerlineAuthor Commented:
Something is wrong..  I used a virtual machine to test on IE6 in Windows XP and Firefox (3.6) and I'm still not sure why it doesn't work.  The show feature is fine.  But hide doesn't work properly.  It's frozen in the show state, even if I change the number of milliseconds that doTimeout is supposed to last.
0
 
hieloCommented:
>> I used a virtual machine to test
I don't use that so I don't know if that makes a difference. All I can tell you is the example I posted worked for me in IE and FF!
0
 
hieloCommented:
On another note, when you said:
"...But hide doesn't work properly."

are you referring to my posted example or your actual page? Does my example exhibit the same behaviour?
0
 
markerlineAuthor Commented:
I'm referring to your posted example.  It doesn't work.  The show comes up animated and then freezes in place no matter which browser I choose.
0
 
markerlineAuthor Commented:
I also tested in IE8 and Firefox on Windows Vista
0
 
hieloCommented:
Well, I don't have those systems available for testing. My suggestion to you is request that this question be deleted with points refunded to you and repost your question (so it appears at the top of the list) BUT be sure to explicitly mention that it is:
WORKING on XP FF 3.6.3 and IE7

BUT not on Vista on either browser.  Hopefully someone with the same working environment as you will be able to pinpoint the problem.

Regards,
Hielo
0
 
markerlineAuthor Commented:
Well, if I do that then I will also have to make sure it is not running properly on XP Firefox 3.6.3 and IE in a virtual machine.  A virtual machine works just like the real operating system.  I'm using VMWare Workstation on the PC.
0
 
markerlineAuthor Commented:
Helio, I got it to work on Firefox 3.6.3 and Safari on my MacBook Pro.  Instead of copy/pasting the syntax I retyped it and I think in retyping it I fixed some errors that were in the syntax.  I have yet to troubleshoot again on Windows but I think it will work this time.  Thank you.  Once I get it resolved on Windows I will accept your solution and award points.

-markerline
0
 
markerlineAuthor Commented:
I have to look at my file and award points.  I failed to do so at the time of my last post because I got tied up with projects.  I will troubleshoot on Windows and respond within 48 hours.  Thank you.
0
 
markerlineAuthor Commented:
My comment below about copying and pasting the content from this browser into my html file was the culprit reason why the code wasn't working.  Perhaps Windows was adding invisible line breaks that was causing an error in the processing of the html and/or javascript.  Once I retyped everything it seemed to work fine.  I apologize that it took me this long to completely respond to this question.  I was notified by the moderator . . . . Hielo you were a great help and I learned something new, perhaps more than just one thing new in this lesson.
0
 
markerlineAuthor Commented:
The comment "below" is actually above the Administrative Comment.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.