CODEWITHSUNDEEP
jquery-isotope
aitor
aitor

Reputation: 2735

Isotope grid layout fails first time

The Isotope grid is wrong the first time I access to it. There are two screen captures to compare.

  1. First time (or accessing without browser cache):

page look at first time access

  1. Second time access (or simple browser reload):

page look at second time access

This can be seen at: http://telmo.club/merz/

Isotope js init:

init: function() {
        // init Isotope
        var $grid = $('.grid').isotope({
          // options
          layoutMode: 'fitRows',
        });
        // filter items on button click
        $('.filter-button-group').on( 'click', 'a', function() {
          var filterValue = $(this).attr('data-filter');
          $grid.isotope({ filter: filterValue });
          $('.grid').isotope({
            hiddenStyle: {
              opacity: 0
            },
            visibleStyle: {
              opacity: 1
            }
          });
        });
      }

What am I doing wong? Thanks in advance

Upvotes: 1

Views: 1290

Answers (1)

Hamed
Hamed

Reputation: 588

Put your codes inside $(window).load():

    $(window).load(function () {
        var $grid = $('.grid').isotope({
          // options
          layoutMode: 'fitRows',
        });
        // filter items on button click
        $('.filter-button-group').on( 'click', 'a', function() {
          var filterValue = $(this).attr('data-filter');
          $grid.isotope({ filter: filterValue });
          $('.grid').isotope({
            hiddenStyle: {
              opacity: 0
            },
            visibleStyle: {
              opacity: 1
            }
          });
        });
    });

Upvotes: 2

Related Questions