JQuery / IE/ CSS bug. HELP!

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
SimpleManWeb
Forum Commoner
Posts: 57
Joined: Wed Dec 30, 2009 4:15 pm
Location: New Hampshire, USA

JQuery / IE/ CSS bug. HELP!

Post by SimpleManWeb »

Hello All,
I've officially wasted WAY too much time on this bug and I am officially out of idea. I am trying to build a jquery powered custom menu for a customer and it works perfectly in FF and Chrome, but it has a very noticeable bug in IE7. I don't have IE8 installed on this computer, so I'm not sure how it acts in that.

Here's the link:
http://www.nhhealthykids.com/New/

In IE, hover over any of the second or third level links and you will see that the menu momentarily disappears and then reappears, giving it a horrible flashing effect.

Here's a snippet of the HTML code:
[text]
<ul id="nav">
<li style="padding: 0px 8px 0px 8px;">
<a href="http://www.nhhealthykids.com/New/about-us-who.we.are">
<div class="MenuDiv">
About Us
</div>
</a>
<ul class='SecondLevel'>
<li class="SecondLevelLI">
<a class="" href="http://www.nhhealthykids.com/New/about-us-who.we.are">
Who We Are
</a>
</li>
<li class="SecondLevelLI">
<a class="" href="http://www.nhhealthykids.com/New/about- ... on.history">
Mission / History
</a>
</li>
<li class="SecondLevelLI">
<a class="" href="http://www.nhhealthykids.com/New/about-us-employment">
Employment
</a>
</li>
</ul>
</li>
</ul>
[/text]

And here is the suspect JQuery code
[text]
if ($(this).parent('ul').hasClass('SecondLevel')) {
$(this).hover(function(){
$(this).toggleClass('SecondLevelHover');
});
}
[/text]

By adding/removing that "SecondLevelHover" class, I am simply changing the background image. Nothing else.

I've done a ton of testing and I have narrowed the issue down to the following, whenever I use javascript (Either JQuery or old fashioned code) to change ANYTHING visual about the second level li that is being hovered over, it gives this bug.

So, some examples of things I have tried:

This one causes the same bug
[text]
$(this).bind('mouseout',function() {
$(this).toggleClass('SecondLevelHover');
}
[/text]

This one also causes the bug:
[text]
$(this).bind('mouseout',function() {
$(this).removeClass('SecondLevelHover');
}
[/text]

This one also causes the bug:
[text]
$(this).bind('mouseout',function() {
$(this).css({'background':'Images/Background.jpg'});
}
[/text]

This one also causes the bug:
[text]
$(this).bind('mouseout',function() {
$(this).css({'background':'blue'});
}
[/text]

And here is the crazy one, this also causes the bug:
[text]
<li class="SecondLevelLI" onmouseover="this.className='SecondLevelHover';" onmouseout="this.className='SecondLevelLI';">
[/text]

One interesting test though is that this bit of code did NOT cause the bug:
[text]
$(this).hover(function(){
$(this).attr('rel','Test');
});
[/text]
which leads me to believe that any change I make that doesn't change visual properties of the LI will not cause a issue.

I've tried several other things like having a different function for each half of the hover function, splitting it up into "mouseover/mouseout" functions, using addClass/removeClass instead of toggleClass etc... and nothing helps.

Anyone have any ideas?

Any and all help is appreciated.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: JQuery / IE/ CSS bug. HELP!

Post by Eran »

A couple of pointers -
1. Convert javascript hover events on links to CSS using the :hover pseudo-attribute
2. Convert all the remaining hover events to use .hover() instead of .mouseover() and .mouseout(). The hover() method using .mouseenter() and mouseleave() which fire only once (as their name indicates), while mouseover() fires multiple times, causing the blinking effect you see. http://api.jquery.com/hover/
3. Use proper CSS selectors to avoid needless DOM traversal - the following logic can be replaced with a selector

Code: Select all

$('#nav li').each(function() {
    var Parent = $(this).parent();
   if (Parent.attr('id') == 'nav') { //This means that it's a top level li 
instead -

Code: Select all

$('#nav > li').each(function() { //Traverses li that are direct children of #nav
User avatar
SimpleManWeb
Forum Commoner
Posts: 57
Joined: Wed Dec 30, 2009 4:15 pm
Location: New Hampshire, USA

Re: JQuery / IE/ CSS bug. HELP!

Post by SimpleManWeb »

Thanks Pytrin,
I'm self taught on JQuery and still learning a lot. I'll give those things a try and see how it goes.

Thanks again.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: JQuery / IE/ CSS bug. HELP!

Post by Weirdan »

4. make sure the image is cacheable (it should be served with Expires header).
5. To avoid the initial flicker (when the image is displayed for the first time) preload it. Google image preload.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: JQuery / IE/ CSS bug. HELP!

Post by Eran »

In addition to what weirdan said - you can also preload it by adding the background image from the start, and just move the background position
Post Reply