SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    I have the following jQuery 1.2.6 code:

    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:

    Code:
    /* 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. #2
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    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. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  4. #4
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •