Page 1 of 1

JQuery / IE/ CSS bug. HELP!

Posted: Sat Sep 18, 2010 3:58 pm
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.

Re: JQuery / IE/ CSS bug. HELP!

Posted: Sat Sep 18, 2010 4:28 pm
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

Re: JQuery / IE/ CSS bug. HELP!

Posted: Sat Sep 18, 2010 5:18 pm
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.

Re: JQuery / IE/ CSS bug. HELP!

Posted: Sat Sep 18, 2010 6:48 pm
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.

Re: JQuery / IE/ CSS bug. HELP!

Posted: Sat Sep 18, 2010 6:51 pm
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