3

Why can't it hold the position where the user left off? Is this normal for Masonry? When the user clicks back, the browser goes to where the user left off, but weirdly, Masonry makes it SHOOT back up to the top!

By the way, refresh works fine. It moves the scroll to where the user left off. But back doesn't work.

Edit: when I click "back", it's up at the top. But then I scroll down just a tiny bit (2 pixels). And then the browser will jump back to the position of the left off place.

ures.

Edit: If I disable this line, it will work:

$('#grid').masonry({ columnWidth:250, itemSelector:".awallpost", animate:false, resizeable:false });
TIMEX
  • 259,804
  • 351
  • 777
  • 1,080
  • Is there a working example we can visit? – Brad Christie Dec 13 '10 at 23:25
  • `:8000` doesn't work, but the site does exhibit the problem - I presume you meant just http://geodit.com? – Chris Morgan Dec 13 '10 at 23:46
  • I see different behaviours. I can reproduce exactly this problem on Chrome 8.0.552.215. Firefox 3.6.12 simply goes back to top and doesn't jump to previous selection when you scroll a bit. IE 8.0.7600.16385 works as expected (apart from layout issues). – BalusC Dec 14 '10 at 01:38
  • @TIMEX: Could you temporarily host the page with the non-minified version of the masonry plugin? – user113716 Dec 14 '10 at 23:33
  • Yes, I hosted it without the minified version. – TIMEX Dec 15 '10 at 00:49
  • 1
    @TIMEX: Thanks. I think I see the cause, and have a potential fix. [See my answer.](http://stackoverflow.com/questions/4415651/how-come-with-jquery-masonry-when-i-click-back-on-the-browser-it-shoots-the-u/4446253#4446253) – user113716 Dec 15 '10 at 02:42

3 Answers3

8

I think I have a workaround for you, but you'll need to give it a try to be sure. It works when I step through the code and do it manually, and I think it'll work. I'll explain at the bottom.

Before the line of code where you call the masonry() plugin...

$('#grid').masonry({ columnWidth:250, itemSelector:".awallpost", animate:false, resizeable:false });

...set the height of the grid to its current height.

var $grid = $('#grid');
$grid.height( $grid.height() ); // fix the height at its current height

$('#grid').masonry({ columnWidth:250, itemSelector:".awallpost", animate:false, resizeable:false });

If that gives you problem when you initially load, or in some browsers, then try setting the .height() only if it is greater than some amount. Try 0 or some small number like 250.

var $grid = $('#grid');
var height = $grid.height();

if( height > 0 ) { // or some other number
    $grid.height( height );
}

$('#grid').masonry({ columnWidth:250, itemSelector:".awallpost", animate:false, resizeable:false });

The cause of the issue seems to be because masonry sets the positioning of each item to absolute, then it walks through them and sets its top and left positions manually to whatever they were before they received absolute positioning.

The trouble is that until masonry has a chance to set the positions, the #grid becomes collapsed down to 0 height since the items inside no longer affect its height.

It appears as though in some browsers, when the height of the #grid (and therefore the rest of the document) is collapsed, it forgets its scroll position. That's why we fix its height to a set amount before calling masonry(), so that it doesn't collapse when its content gets absolute positioning.

user113716
  • 318,772
  • 63
  • 451
  • 440
1

This will help you,

I found one post having the same senario, and testing its working

Hi, The website is http://www.charlotte.com/mld/charlotte/

I just checked and yes, the site is sending cache-control: no-store in the header.

I also read through the bug link you posted. Man, this thing has been documented for years. The particular link you posted appears to be still unresolved, and it's primary, not a dupe.

Would it help matters if I added my experience to the bug report, or should I just grin and bear it?

Sean Patrick Floyd
  • 292,901
  • 67
  • 465
  • 588
Vicky
  • 9,515
  • 16
  • 71
  • 88
  • I am certain it is the Masonry plugin. If I disable it, everything works, regardless of cache-control. – TIMEX Dec 14 '10 at 21:39
1

Are you sure this is an issue caused by Masonry? Has the site worked with back button previously? As per BalusC's comment, the issue seems to vary from browser to browser and as confirmed by mr. Chavan, the site sends Cache-Control: no-store so I'm leaning towards server software or configuration causing it rather than Masonry.

It is a documented behaviour for various browsers to go to top of page on back when the HTTP response has certain Cache-Control: headers. (In short: FF goes to top on no-store - or no-cache if using HTTPS, IE doesn't honour Cache-Control on back.)

You can set cache headers either in HTTP server (Apache, lighttpd, etc.) or in code. Every web-targeted language have their metheds of setting HTTP headers, the correct solution to fix the problem depends on the environment you have.

This SO post offers some solutions, including some esoteric methods to store the page scroll position with JS and cookies.

Community
  • 1
  • 1
Jawa
  • 2,336
  • 6
  • 34
  • 39
  • I am certain it is the Masonry plugin. If I disable it, everything works, regardless of cache-control. – TIMEX Dec 14 '10 at 21:37