SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anyone understand why jQuery does this? Flicker only in Firefox...

    Here is a link to my problem page. The problem is right at the bottom, where there is a link which says 'More Site Links'. This link uses jQuery .toggle to show and hide some extra UL LI links.

    In Firefox 3.6 (PC only - works fine on the Mac) if you expand the links and then click 'Less Site Links' and immediately move your mouse away, the screen sort of flashes and reloads. It works fine on every other browser except this - anyone know why?

    The jQuery for the toggle is here (please note, I'm a beginner with jQuery so I'm sure there are better ways to write most of what I have in there!).

    There's quite a bit of other jQuery on the page as you can see from the source but this is the bit handling that particular bit...

    Code JavaScript:
    $(document).ready(function(){
            $(".linksTrigger").click(function(){
    	$(this).toggleClass("switch");
    	$(".extraLink").toggle("slow");
    	$(this).text($(this).text() == 'More Site Links' ? 'Less Site Links' : 'More Site Links'); 			return false; //Prevent the browser jump to the link anchor
    	});
    });

    So... Any jQuery black=belts know what's causing it?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I think rather than being a specific JavaScript or jQuery issue, this might be a problem with the browser itself.

    What happens is that when you're collapsing the extra links, the height of the document changes, and it looks like this is causing Firefox to repaint the screen (several times in quick succession, appearing as a flicker).

    To test this, head in to Firebug and hide/remove all content until you effectively only have your "siteLinksWrapper group" div on the page, if you hit the more/less link without a scrollbar present, the page will not flicker.

    I did just give this a quick try with the jQuery UI Slide Effect and the flickering is a lot less noticeable. (It's also a bit less noticeable when you change the speed of the effect to, say 100ms).

    There are of course other drawbacks to using the jQuery UI effect, least of which is loading a whole extra library just for 1 effect.

    Note that if you use toggle without a duration there would only be 1 repaint of the page.

    Has anyone else come across this problem? More importantly, know any other solutions to this?
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It's a bug with the Firefox web browser as a whole, relating to when the vertical size of the window changes and the scroll position is near the bottom of the page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •