Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Prevent isotope re-loading on back button

Hi,

I have a product list, linking to a detail page.

The product list uses ISOTOPE.

When a visitor clicks on a product they are take through to the detail page.

When they click on the BROWSER BACK BUTTON, they are taken back to the products list. The problem is that when they click on the back button the products isotope list refreshes. It is almost like the products list is not cached.

Is there any way to prevent this reloading of isotope?

sample at http://www.fli.co/category.asp

User Gravatar

conhan

Posted Oct 14 2013 3:39 UTC

$50


  • Assigned To guyisra
  • Solved
  • isotope
  • 2459 Views

20 Replies


This occurs, I believe, since when clicking back the browser runs the scripts that relevant to that page, since the browser saves the DOM, and not the DOM modifications done by JS after the DOM is loaded

To remedy this, you could use isotope's callbacks feature (which you already use) to make the container appear once isotope is done. So the items will appear only once they were isotoped, and not before, so the user don't see the jumps or animations done by isotope

so you can just use the .loading class that you use and add to it visibility:hidden; (or something else that has the same effect, like a loading icon) since you already remove that class when isotope is done.

User Gravatar

guyisra

Posted Oct 14 2013 3:58 UTC

Solution

This didn't solve your task? Get your own custom solution.

Also, note that the situation you describe does not happen in firefox which is caused by (and perhaps the answer to your problem) firefox's bfcache (back-forward-cache).

basically, the bfcache is exactly the cache you were hoping to use to save the DOM modifications done by isotope. However this bfcache only exists in firefox (and prehaps opera as well) so using it (its already being used in FF) only works for some browsers.

you can read about it more here https://developer.mozilla.org/en-US/docs/Working_with_BFCache

User Gravatar

guyisra

Posted Oct 14 2013 4:42 UTC

guyisra, thanks for that.

You probably have the right answer - but I wouldn't know where to start to implement it.

Have you any ideas?

User Gravatar

conhan

Posted Oct 14 2013 6:41 UTC

The problem is that this varies based on the user's browser.

On firefox you don't need to do anything (bfcache is on by default), as long as you don't have onunload event in the page. when you have onunload event in the page that will disable the bfcache.

you can see http://www.twmagic.com/misc/cache-nocache.html which simulates the problem on firefox all is well, on chrome its not.

further inverstigation proves that the culprit is chrome and ie, while ff, opera and safari save dom modification in the bfcache or 'fast history navigation' as you can see, an issue about this in open in the chromium project for the last few years with the reasoning for not doing it "chrome loads pages fast enough" https://code.google.com/p/chromium/issues/detail?id=22291

In conclusion, the problem you present exists in chrome and ie, while in others it works. Solving this in chrome requires saving the page in cache, which the chromium team doesn't think its worth doing.

I think this probably isn't worth handling to the extent of solving this, and I think simple css/js could hide this problem since its more of a browser quirk than a code quirk.

But, since you insist

you could use html5 local storage to save the page's state and to load it back once the browser is "backed"

essentially it is something like this

function saveNLoadIsotope(){
    // test for localStorage support
    if(('localStorage' in window) && window['localStorage'] !== null){
    var isotoped= document.body; 
    // get the body, similarly you can get just the isotoped container
    localStorage.setItem('isotoped',isotoped.innerHTML);

    // check if a state property exists and write back the HTML cache
     if('isotoped' in localStorage){ 
    isotoped.innerHTML = localStorage.getItem('isotoped'); 
    }

    }
}

the trick here is to add event listener to popstate (which fire when the user clicks back or forward in the browser)

    window.addEventListener("popstate", function(e) {
     saveNLoadIsotope()
    });

so essentially having this code in the page, will allow the .isotope to remain the same

You should decide if you want to implement this kind of a solution, since it may affect other parts of the page or html node (unless you cache the isotope container specifically)

on performance terms, on mobile devices it might be slower user experience and it might not work in browser that don't support html5, localstorage and the html5 history api

so I still suggest to use a css/simple js way than complex html5 stuff since it still might not work for all users

hopes that helps :)

User Gravatar

guyisra

Posted Oct 14 2013 7:36 UTC

By the way, another solution to this, which I use in my webpages is to place all the items in a temporary container and once the images are loaded and add each item to the final container seperatly

something like this

  var $items=$("#container_pre").find('.item');
    var i=-1;
    var delayed=setInterval(function() {
            if (++i<$items.length) $('#container').isotope( 'insert', $items.eq(i));
            else clearInterval(delayed); 
             },40); //40 is the delay between each .item

while #container_pre is invisible

User Gravatar

guyisra

Posted Oct 14 2013 9:27 UTC

Thanks Guyisra - a good amount of options.

Its seems whatever way we look at it - the solution is complicated by Chrome and IE.

Essentially I don't mind that the isotope is reloaded whenever the user clicks back. The crucial problem is that when the isotope is reloaded, the isotope images are not in the same place as before. This means that once the user clicks through to the product detail page and then goes back to look at more products, the isotope is reloaded but products appear in different places.

Let me know if you've spent enough time on this and I'll forward the pledged money.

User Gravatar

conhan

Posted Oct 14 2013 10:00 UTC

Hmm, why are they not ordered the same? I don't see any difference in the order

technically, the data is the same (since its the same exact DOM, unless you pull the items from somewhere) and isotope should work the same way and provide the same results

can you give me an example of an item that doesn't stay in place?

User Gravatar

guyisra

Posted Oct 14 2013 10:04 UTC

Ok.

Go to this product page

http://www.fli.co/category.asp

and scroll down towards the bottom.

You'll find a blue Howard style sofa.

If you click on this to go through to the detail page. Then go back.

You'll see that the browser is not positioned at the blue sofa.

(Using Chrome by the way)

User Gravatar

conhan

Posted Oct 14 2013 10:09 UTC

I can't seem to reproduce it

What I could reproduce is that when clicking back, the window is not scrolled to the same location, which might confuse users

what you could do is to have an #id for each item and when clicking back to scroll to that item

this also involved the html5 history api to alter the 'back' address to that with the item anchor

User Gravatar

guyisra

Posted Oct 14 2013 10:38 UTC

also, you can use isotope to sort the items, this way it will always be the same order

add to each item a data-number attribute

initialize isotope with

$product_list.isotope({
                itemSelector: 'li',
 getSortData : {
      number : function( $elem ) {
        return parseInt($elem.data('number'));
      },
            }, function($items) {
                this.removeClass('loading');
            });

and then call isotope with

.isotope({ 
      sortBy : 'number'
    });

that will make sure that the items are always in the same order

User Gravatar

guyisra

Posted Oct 14 2013 11:47 UTC

Hi, Yes you have the problem exactly. Its the 'not scrolled to the correct place' after clicking the back button that is going to be confusing.

This is what I am trying to fix.

I'll try your data number suggestion.

Do you mind if I keep this solution open to see if this fixes the issue?

User Gravatar

conhan

Posted Oct 14 2013 12:48 UTC

no problem, let me know if you need more assistance

User Gravatar

guyisra

Posted Oct 14 2013 12:49 UTC

by the way, this could also be a chrome issue according to this https://code.google.com/p/chromium/issues/detail?id=254198

in firefox this doesn't seem to occur

User Gravatar

guyisra

Posted Oct 14 2013 12:53 UTC

Its very interesting you should mention that.

Clicking towards top of page: On my product page - clicking on an item towards top of product list, going to detail page, then returning to product list works fine.

Clicking towards bottom of page: On my product page - clicking on an item towards bottom of product list, going to detail page, then returning to product list does not scroll to correct point - this is the confusing bit.

I'm wondering if maybe I should be using a lightbox type solution - so visitors clicking on the product are not taken to a new page but rather a pop up window appears.

This could be a workaround.

User Gravatar

conhan

Posted Oct 14 2013 13:07 UTC

I've also just checked it in IE and it is behaving with the same problems as in Chrome.

User Gravatar

conhan

Posted Oct 14 2013 13:26 UTC

I"ve just noticed something interesting....

Note the left hand div that shows list of catgories etc....

The 'back' problem occurs when the scroll bar moves down the page so that the left hand category div can no longer be seen.

Once the scroll bar moves this far...and an item is clicked on...returning to the results causes the page to not scroll to correct position....

now that has got to give us food for thought!

User Gravatar

conhan

Posted Oct 14 2013 13:30 UTC

I have this issue as well when a page has isotope using chrome This could be a chrome bug, since on FF it works fine. At the moment chrome has a lot of upgrades which causes stuff to break. Chrome team notoriously skip usability bugs

User Gravatar

guyisra

Posted Oct 14 2013 22:44 UTC

Hi Guyisra,

I seem to have made some progress....

If you go to the category page, scroll to bottom of page, then go back...the listings are at the same place.

I have added

$('.product-list.isotope').isotope({ onLayout: function( $elems, instance ) { // this refers to jQuery object of the container element

} });

to the bottom of the script.

This seems to have fixed the 'go back' issue.

However, it does tend to 'clump' the photos together when loading.

The trouble is, I'm not sure why adding that peice of jquery has fixed the problem. I think it must recreate the DOM again once everything has loaded.

User Gravatar

conhan

Posted Oct 15 2013 10:26 UTC

That code is basically a callback everytime that isotope does its item arranging. I think this might fix some isotope & chrome mixed bug which gets fixed if isotope isn't the last thing that is run on the page

You can check this to see if you put any other javascript code instead, since basically this code does nothing, but it runs everytime isotope finished rearranging

User Gravatar

guyisra

Posted Oct 15 2013 10:35 UTC

Interesting idea. I put some irrelevant, but correct, code in its place and we are back to the old problem.

So it looks like

$('.product-list.isotope').isotope({ onLayout: function( $elems, instance ) { // this refers to jQuery object of the container element

} });

Has some use.

User Gravatar

conhan

Posted Oct 15 2013 10:38 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions