5

I've seen quite a few threads here talking about flickering in Firefox, but none that quite describe the problem I'm having.

I've got a horizontal scrolling website, fixed position menus, and the jquery plugin .scrollTo handling next and previous buttons. This works great in Chrome and Safari (don't know about IE), but in Firefox there is a flicker every time you scroll right of left with the arrows in the upper right and corner.

See An Example Here

I've tried setting all the elements that have a fixed position to overflow:auto but that did nothing. I'm not super familiar with with JS or Jquery but I know enough to change things. Any help would be greatly appreciated!

2 Answers2

11

The problem is that you are not cancelling the default browser action in your click function. Change your code to this, and the flicker will go away:

$(function(){
    $(".next").click(function(e) {
        $.scrollTo( '+=1000px', 600 );
        e.preventDefault();
    });
    $(".prev").click(function(e) {
        $.scrollTo( '-=1000px', 600 );
        e.preventDefault();
    });
});

Firefox is trying to "scroll to the #" and animate at the same time.

Doug Neiner
  • 65,509
  • 13
  • 109
  • 118
  • 1
    Thank you! That did it. I really should have just asked instead of trolling the interwebs for ten hours this week. ;). –  Dec 14 '09 at 23:33
  • Happy to help! Be sure check the green check mark next to this answer so it is marked "solved". And welcome to StackOverflow! Hope to see you around more! – Doug Neiner Dec 14 '09 at 23:48
  • +1 you'd think this flicker would have been addressed by now.. it hasn't :( – cp3 Feb 25 '11 at 04:40
  • This is a good solution but I miss the possibility of bookmarking pages... :-( – Ivan Mar 21 '13 at 14:59
  • Great fix! Note to others using this. I didnt immediately notice that it is `.click(function(e)` not just `.click(function()`. Need to get jquery event into the function – The Thirsty Ape May 08 '13 at 18:18
1

Right after my comment on page bookmarkability on Doug's post, the light in my head turned on! Hope you can adapt to your script, if you need bookmarkability

<a href="#gohere" class="mylink">Click</a>
...

$('.mylink').click(function(e) {
    e.preventDefault();
    var anchor = $(this).attr('href');
    $.scrollTo(anchor, 1000, {
        onAfter: function(){
          location.hash = anchor;
        }
    });   
});
Ivan
  • 2,463
  • 6
  • 39
  • 51