Comments on: JQuery Flicker in Firefox

By: Michael

Michael — Tue, 06 Jul 2010 17:55:16 +0000

YOU ARE THE MAN!!!!! Ive been going bazonkers over this forever.

By: Pradeep Gaur

Pradeep Gaur — Tue, 11 May 2010 05:36:08 +0000

hey
That’s great solution. i wasted my more then 3 hours to solve that problem i used event.preventDefault() but that’s not work but your solution is magic and working great.
Keep it up this kind of programing
thankx a lot.

By: Will

Will — Tue, 06 Apr 2010 23:04:56 +0000

Thank you so much! I would have never figured that out without your help, the day is saved!!!

By: Pete

Pete — Tue, 19 Jan 2010 16:28:43 +0000

You know, I figured they might run at the same time which defeats the purpose -- I forgot one important caveat -- we want to run the collapse function AFTER the scroll function has completed:

jQuery('a#slick-slidetoggle').click(function() {
	// Only scroll up if we’re closing the DIV 
	if (jQuery('#main').height() != 0) {
		
		jQuery.scrollTo( jQuery('#header-wrap'), {duration: 800, axis:"y", onAfter:function(){
			jQuery('#main').slideToggle(800);
		 });

	} else {

		jQuery('#main').slideToggle(800);

	} 

	return false;

});

By: Darryl

Darryl — Tue, 19 Jan 2010 10:30:48 +0000

(meant to say above that I think part of my problem with the scrollTo snippet was the if statement… but too much of a beginner to know how to set it right. thanks)

By: Darryl

Darryl — Tue, 19 Jan 2010 09:43:26 +0000

Hi Pete,

Thanks so much for your efforts! I wasnt able to get the JQuery snippet you suggested to work Im afraid but subsequently found a very similar workaround that has the same effect I think:

jQuery(‘html’).scrollTop(0);

Obviously with speed ‘0′ the page jumps up to the top and if I slow down the speed of the scrollTop to say 800 (as your example would) then I get the same sort of flickering as both the collapse and scrollTop events happen at the same time and sort of fight each other I guess.

So I think I am left deciding whether it is more acceptable to skip up to the top of the page sharpish or flicker my way back up. (Neither hardly ideal for the user – ho hum).

Again thanks for your direction. )

By: Pete

Pete — Tue, 19 Jan 2010 03:31:38 +0000

Hi Darryl,

Sorry for your frustration. Actually, the reason your getting your flicker is different from the problem illustrated here.

Your expand/collapse is actually increasing the entire height of your site (which you obviously already know) increasing the vertical scroll bar. When its collapsed, the entire height of the site decreases back. The flicker comes from the browser being pushed back up.

There is no known work around for this issue.

HOWEVER! hehe. What I would do is actually scroll the window back up to the top BEFORE you collapse the DIV. This way, the browser window will be at the top whilst the viewing area gets smaller, and then you shouldn’t have any flicker.

And lucky for you, there’s already a jQuery add on for this very thing. Its called jQuery.ScrollTo and it can be found here:

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

So, what you’ll have to do is modify your on click like this:

jQuery(‘a#slick-slidetoggle’).click(function() {

// Only scroll up if we’re closing the DIV
if (jQuery(‘#main’).height() != 0) {
jQuery.scrollTo( jQuery(‘#header-wrap’), 800 );
}
jQuery(‘#main’).slideToggle(800);

return false;

});

This should scroll the window up to the top before it collapses your DIV — This should stop the flicker (hopefully) Let me know how it goes

*Note — i’m making it go to the div with ID header-wrap since its at the top of your page.

By: Darryl

Darryl — Tue, 19 Jan 2010 02:21:31 +0000

Hi Pete, Im sure my heartrate shot up to an excitable and optimistic 160bpm+ when I started reading that just adding the -x or -y would finally fix this beast for me, which I guess only exagerated the utter despondency when it didnt seem to work.

Maybe a similar issue to Uzair above but I have coded the overflow-y styling into my ‘#main’ div (and can see it in Firebug) but the bugger is still flickering its way back up the screen when I collapse.

http://www.thebeverley.com

Am I missing something perhaps or is this not quite the messiah I was looking for? Many thanks.

By: Uzair Khan

Uzair Khan — Fri, 01 Jan 2010 21:19:55 +0000

thanks for taking out the time Pete, but i was referring to the portfolio page which can be accessed at: http://www.uzairs.com/portfolio.php. You would see two headings, works and photography, if you expand both and then toggle the photography block, the page flickers on firefox. I tried applying overflow-y:hidden to both the content block within which the two blocks exist and the photography block but it didnt help. NOTE: I only tested it out through firebug. Thanks.

By: Pete

Pete — Thu, 31 Dec 2009 16:04:14 +0000

Thanks for the compliment Uzair.

As for your site, are you referring to the DIV with the id designbox on the site linked from your name? If so, I’m not seeing the plane of overflow applied. Since your scroller is moving horizontally, you’d want to apply it across the X access:

div id=”designbox” style=”overflow-x: hidden; width: 390px; height: 284px;”

Hope that helps!