5

First off I apologize... I have posted this question before, but I did a bad job of explaining it. I'm having trouble plugging hoverIntent into the following JavaScript... I need it to replace the mouseenter and mouseleave functions below. Just to be clear, I'm asking for help because I'm not very good with JavaScript syntax. The second code snippet below seems like it should work, but it does nothing and seems completely dead in Internet Explorer.

if (jQuery.browser.msie === true) {
  jQuery('#top_mailing')
    .bind("mouseenter",function(){
      $("#top_mailing_hidden").stop().slideDown('slow');
    })
    .bind("mouseleave",function(){
      $("#top_mailing_hidden").stop().slideUp('slow');
    });
}

I'm using the following for other browsers, but it's not functioning in Internet Explorer.

$('#top_mailing').hoverIntent(
  function () {
    $("#top_mailing_hidden").stop().slideDown('slow');
  }, 
  function () {
    $("#top_mailing_hidden").stop().slideUp('slow');
  }
);
Levi Lindsey
  • 1,049
  • 1
  • 10
  • 17
Brian
  • 3,920
  • 12
  • 55
  • 100
  • 2
    Are you getting any JS errors in IE? – Mike Crittenden Feb 10 '10 at 20:57
  • 1
    Just tested hoverIntent & jQuery 1.4.1 with IE. Works fine. Does it animate at all for you? Is it working in other browsers? – user113716 Feb 10 '10 at 22:08
  • Did you test this code: $('#top_mailing').hoverIntent( function () { $("#top_mailing_hidden").stop().slideDown('slow'); }, function () { $("#top_mailing_hidden").stop().slideUp('slow'); } ); – Brian Feb 10 '10 at 22:17
  • Copied and pasted. Works fine. Does it animate at all for you? Is it working in other browsers? Have you tried it with hover()? Could you please include the CSS for top_mailing and top_mailing_hidden? – user113716 Feb 10 '10 at 22:25
  • Works fine in all other browsers. It's just dead when I strip out the conditional animation for IE and leave just the above code. No animation at all. – Brian Feb 10 '10 at 22:36
  • Which version(s) of IE? Is this site online? You've got your doctype set? Wanna share some CSS for those IDs? – user113716 Feb 10 '10 at 23:12
  • Patrick, you've totally gone crazy trying to help me. Is there a way to private message me here on Stackoverflow? If so give me an AIM, gTalk, or Skype handle and it might be much quicker than all this back and forth. – Brian Feb 11 '10 at 01:29
  • Not a problem, Brian. I don't have any accounts. If you just post more code, I'm sure we can figure it out. Throw some CSS and HTML my way. Or if you have some way of putting your site online, that would work too. – user113716 Feb 11 '10 at 02:48
  • Sure thing. Let's just do this: http://ranya.net/wp/ login with ranya / sslPabe938v .... just seeing it should be alot easier than posting. IE7 is where it's not working. Then if you figure it out you can post an answer here and I shall accept :) – Brian Feb 11 '10 at 04:07

1 Answers1

3

I think I found the problem.

You're calling $('#top_mailing').hoverIntent(... twice. Once at the bottom of the hoverintent_r5.js file, and once in your custom.js file. Apparently IE doesn't like that. Get rid of one or the other, and it should be fine.

Probably better to keep all your code in your own js file. Otherwise it's easy to forget about.

EDIT: Avoiding the stop() issue.

I prefer animate:

$('#top_mailing').hoverIntent(
  function () {
    $("#top_mailing_hidden").stop().animate({height:150},'slow');
  }, 
  function () {
    $("#top_mailing_hidden").stop().animate({height:0},'slow');
  }
);

This way, when you need to stop and change directions, it will always know where to go. (0 and 150 in the example above.)

Please note that this would require top_mailing_hidden to have clip:auto; overflow:hidden set.

Since you're using hoverIntent, there may be no need for the calls to stop(), since hoverIntent is meant to avoid those unintended mouseover events.

Slightly off topic:

Keep one thing in mind with your implementation. Since this is a form to fill out, users will likely (without even thinking) move their mouse out of the way when they start typing. That will cause the form to disappear.

With that in mind, you may want to reconsider doing a mouseout event. You could always make it slide back up when the user submits the form, with an optional 'Cancel' or 'Close' button.

user113716
  • 318,772
  • 63
  • 451
  • 440
  • Awesome! Since you're looking at the actual site... Try this - If you hover over the dropdown and then mouseout. Now quickly mouse in and out while the slideUp animation is completing. You should see it abort where it gets caught mid-animation and then going to hover over it again it won't drop down or only drops down part way. That's what I was trying to fix with the .stop() and .dequeue() commands but it's still a problem. Any thoughts? – Brian Feb 11 '10 at 15:25
  • Glad it's working. Regarding the new issue, I have noticed that when using slideup/slidedown, or other functions like that, it can lose track of its proper destination if you are calling stop(). I personally wouldn't use those. Instead I would use jQuery's animate() method. That way you are hard-coding the destination. I'll edit my answer to show you what I mean. – user113716 Feb 11 '10 at 15:45
  • LOL! The .animate function is even more glitchy than slideDown was. You can see it on the site. – Brian Feb 11 '10 at 16:02
  • Strange. Animate should work. Probably partly because you don't have `clip:auto; overflow:hidden` set on your `#top_mailing_hidden` element. Either way, I would ditch the 'mouseout' event, and get rid of stop() if you're going to use 'hoverIntent'. – user113716 Feb 11 '10 at 16:11
  • PERFECT! Yes, stop() isn't necessary with hoverIntent.js! Thank SOOO MUCH! – Brian Feb 11 '10 at 16:19
  • you could edit your response quick because I mistakenly "unvoted" this answer, and it DEFINITELY deserves a vote! – Brian Feb 11 '10 at 16:22
  • I think you can still up-vote it. I'll give it an edit anyway. Thanks for the vote. :o) – user113716 Feb 11 '10 at 17:23