Comments on: A Continuation of the Isotope Tutorial: Hash History with Isotope

By: Alexandre Smirnov

Alexandre Smirnov — Wed, 01 May 2013 22:23:00 +0000

How exactly are you initiating isotope for each one? Separate function calls or are you using only one selector, e.g. “$(‘.class1, class2′).isotope”?

By: Bob Rast

Bob Rast — Wed, 01 May 2013 21:54:00 +0000

Great tutorials! I want to use three instances of isotope – each in a separate tab – to display lists of congressional and regulatory actions. I’m not well versed in javascript and I find that my first-panel isotope instance of isotope displays and sorts just fine, but in tabs 2 and 3 the display is collapsed into a pile. Is there a way to initiate multiple isotope instances on a page, and if so, would appreciate guidance on how to do it.

Thanks,

By: Asd

Asd — Wed, 06 Mar 2013 21:18:00 +0000

when your isotope container is located down the page and you want to prevent the whole page from jumping to the top, when a user klicks “all” (therefore #):

    var selector = $(this).attr(‘data-filter’);
    var prettyselector = selector.substr(1);

    if(prettyselector==”"){
        location.hash = “none”;
    } else {
        location.hash = prettyselector;

AND

    if(location.hash!=”#none”){
        var hashfilter = “.” + location.hash.substr(1);
    }
    else {
        var hashfilter = “*”;
    }

no hands need to be layed on document.ready.

By: Aline Rodrigues

Aline Rodrigues — Fri, 25 Jan 2013 18:19:00 +0000

How use this in a external link?

By: Derick

Derick — Fri, 26 Oct 2012 04:35:00 +0000

Thanks for the reply. I haven’t had any success following your instructions yet (I’m not very experienced with jquery) but I’m grateful for the fast response.

By: Alexandre Smirnov

Alexandre Smirnov — Thu, 25 Oct 2012 05:22:00 +0000

Follow the hash history tutorial completely, and once you have that set up and working, do the following:
In the “active cat” tutorial, take a look at the

$(‘#nav a’).click(function(){

Specifically, look at the
$container.attr(‘data-current’,selector);
Code inside it. Just add
if(location.hash!=”"){ var hashfilter = “.” + location.hash.substr(1); } else{ var hashfilter = “*”; }
selector = hashfilter;

}

Right before it.
Make sure you have all the functions from the “hash history” tutorial; the hashchange function, the code that detects the hash when the page loads, and so on.

The “hashchange” function from the “hash history” tutorial should take care of the rest. Really, just copy-paste the code from both tutorials into one big JS file, and make sure that the “location.hash” is being plugged into “#container” “data-current attribute. Delete the right code blocks and it should work fine.

By: Derick

Derick — Thu, 25 Oct 2012 04:02:00 +0000

Thank for the tutorials! I’m using isotope to filter some content and I’ve used your tutorials to apply hash history to great success. I’ve also been able to highlight the currently active link with your other tutorial on another page. I can’t, however, combine the too. Any suggestions?

By: Alexandroid

Alexandroid — Thu, 13 Sep 2012 15:12:00 +0000

Yes, problems with clicking on All again in IE10 – it`s not working.
Very interesting post, so I`m waiting for continuation of a story.

By: Victoria Boarer

Victoria Boarer — Mon, 03 Sep 2012 11:10:00 +0000

There seems to be problem when you click on the filter links and then click on All again, in IE (I am using version 9), it doesn’t bring them all up again?

Also I’m having trouble with using isotope in wordpress, it works in all other browsers except IE, I’m wondering if I’m doing something wrong (www.riotcreative.co.uk/dc/) any help would be great.