CODEWITHSUNDEEP
javascriptjqueryhtmljquery-isotope
user1251762
user1251762

Reputation: 119

isotope container - show on click

I'm using isotope to create a filter feature. But the entire isotope container needs to be hidden on the initial page load, and visitor will have to click on a button for the container to show.

I have the filter working, but when you click on the button, the first time the container loads, all items are on top of each other, then when you click on either one of the filters, everything falls into place.

You can see my code here - http://chrsdev.com/test.html

How can I fix the issue of all items positioning on top of each other on the initial content load?

Would greatly appreciate it if someone can point me in the right direction.

Upvotes: 2

Views: 428

Answers (1)

Macsupport
Macsupport

Reputation: 5444

Download imagesloaded.js and add the script to your page. (Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue)

Then call isotope like this:

//Initialize isotope on each container
    jQuery.each($container, function (j) {
     this.imagesLoaded( function() {
        this.isotope({
            itemSelector : '.element-item'
        });
   });
    });

ADDENDUM

The issue is with your each function and "this". Try this instead. 

  //Initialize isotope on each container
    jQuery.each($container, function (j) {
     $container.imagesLoaded( function() {
        $container.isotope({
            itemSelector : '.element-item'
        });
   });
    });

Upvotes: 1

Related Questions