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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.