Firefox 3.6 and slideToggle() making image disappear...?

JavaScript
1

I have the following jQuery 1.2.6 code:

    //
    //Header Toggle (toggle masthead and provide a mouseover / mouseout aesthetic for each toggle show/hide phase).
    //
    $('body').find('div#header').hide().end().find('a.toggle').click(function() {
        $('body').find('div#header').slideToggle();
        if($(this).hasClass('open')){
            $(this).removeClass('open');
            $(this).addClass('closed');
            $(this).css('backgroundImage','url(header_toggle_hover_close_55px_28px.gif)');
            $(this).hover(
               function() {
                  $(this).css('backgroundImage','url(header_toggle_hover_55px_28px.gif)');
               },
               function() {
                  $(this).css('backgroundImage','url(header_toggle_hover_close_55px_28px.gif)');
               }
            );
        }else{
            $(this).removeClass('closed');
            $(this).addClass('open');
            console.log($(this));
            $(this).css('backgroundImage','url(header_toggle_hover_55px_28px.gif)');
            $(this).hover(
               function() {
                  $(this).css('backgroundImage','url(header_toggle_hover_close_55px_28px.gif)');
               },
               function() {
                  $(this).css('backgroundImage','url(header_toggle_hover_55px_28px.gif)');
               }
            );
        }
    });

Basically, the above looks for #header and when a.toggle is clicked, the header slides down. While down (or “open”), the subsequent image I have in it executes an animated gif background on mouseover, and on mouseout, shows a different animated gif–rinse and repeat for the “closed” phase of the toggle. Pretty simple for the most part…

The problem is that it’s breaking in Firefox 3.6 (it simply disappears whenever the header toggled–or whenever the a.toggle link is clicked). Now, I know most people are probably moving on for the more modern versions, but there’s still a considerable amount of ppl using 3.6 and if there’s anything I can do to fix this for that browser, I’d love to. The only issue is that Firefox isn’t showing anything–no warnings, errors; nothing. I’d add some alerts or whatever but I’m not sure where to start really because everything seems to be functioning well. I do have some CSS, though–maybe that’s causing this? Here it is:

/* Primary Links */
#primary_links{border-top:1px solid #009;position:relative;clear:both;font-weight:bold;font-size:80%}
#primary_links ul{margin-top:0;padding-top:.5em;font-size:150%;text-align:center;list-style:none}
#primary_links ul li{position:relative;margin:0;margin-bottom:1px;margin-left:1px;padding:0;display:inline;white-space:nowrap;background:none;list-style:none}
#primary_links ul li a{margin:0;padding:.2em .5em .2em;width:100%;height:100%;text-align:center;color:#000}
#primary_links ul li a:hover{text-decoration:none;color:#00f}
#primary_links ul li a:focus{border-bottom:2px solid #f00;color:#f00}
#primary_links ul li a:active{border-bottom:2px solid #00f;color:#00f}
* html #primary_links ul li a{display:inline-block}
#primary_links a.toggle{position:absolute;right:5%;top:-1px;width:55px;height:28px;z-index:1;cursor:pointer;text-decoration:none;background:url(header_toggle_55px_28px.gif) no-repeat center top}
#primary_links a.toggle.open{background-image:url(header_toggle_hover_55px_28px.gif)}
/*#primary_links a.toggle.open:hover{background-image:url(header_toggle_hover_close_55px_28px.gif)}*/
#primary_links a.toggle:hover{background-image:url(header_toggle_hover_55px_28px.gif)}

Any feedback on this is really appreciated. I feel pretty lost with this one…

2

Sorry for the quick reply here, but I thought I would mention that adding “console.log($(this));” somehow (for the likes of which I can’t even come close to understanding) makes 3.6 show the image! lol

Here’s my revised code:


        //
    //Header Toggle (Show / Hide Masthead).
    //
    $('body').find('div#header').hide().end().find('a.toggle').click(function() {
        $('body').find('div#header').slideToggle();
        if($(this).hasClass('open')){
            $(this).removeClass('open');
            $(this).addClass('closed');
            console.log($(this));
            $(this).css('backgroundImage','url(header_toggle_hover_close_55px_28px.gif)');
            $(this).hover(
               function() {
                  $(this).css('backgroundImage','url(header_toggle_hover_55px_28px.gif)');
               },
               function() {
                  $(this).css('backgroundImage','url(header_toggle_hover_close_55px_28px.gif)');
               }
            );
        }else{
            $(this).removeClass('closed');
            $(this).addClass('open');
            console.log($(this));
            $(this).css('backgroundImage','url(header_toggle_hover_55px_28px.gif)');
            $(this).hover(
               function() {
                  $(this).css('backgroundImage','url(header_toggle_hover_close_55px_28px.gif)');
               },
               function() {
                  $(this).css('backgroundImage','url(header_toggle_hover_55px_28px.gif)');
               }
            );
        }
    });

I have no idea what I’ve done to make 3.6 show the image now… I can’t imagine that those console.log attempts fixed anything… Am I missing something here?

3
Off Topic:

I know this is off topic, but Firefox 3 only has a user base of about 2.9% now. I’m not sure I’d worry about it. :slight_smile:

4
Off Topic:

Ralph, truth be told I was actually leaning in that direction. I was gonna sleep on it tonight and see what mood I’m in tomorrow. Ha.

5

Update on this: Thought I would mention that I was able to sidestep this entirely by making the jQuery I was using create classes only (versus how I was having it assign background images directly with its *.css() calls). Works like a charm now in FF 3.6…