CODEWITHSUNDEEP
jqueryhtmlcssjquery-isotopefluid-layout
user1374796
user1374796

Reputation: 1582

jQuery: Fluid isotope only working after resize

I'm having some trouble with a fluid isotope grid I'm setting up, a simple 4 column grid, each .grid-block being 24% width, leaving a 1% allowance.
The problem is though, when the page loads it's displaying as a 3 column grid until the browser window is resized and it snaps into 4 columns.
Here's a jsfiddle demo: http://jsfiddle.net/BVzTV/4/
jQuery:

$(document).ready(function() {
var $container = $('#main-grid');

$container.isotope({
    itemSelector: '.grid-block',
    animationEngine: 'best-available',
    resizable: false,
    masonry: { columnWidth: $container.width() / 4 }
    });

    $(window).smartresize(function(){
  $container.isotope({
    // update columnWidth to a percentage of container width
    masonry: { columnWidth: $container.width() / 4 }
  });
    });
});

I can't figure out why this is happening / how to fix it, its simple really I'm just trying to achieve a simple 4 column grid when the page loads, and when it's resized. Any suggestions would be greatly appreciated!

Upvotes: 4

Views: 4959

Answers (1)

Travis J
Travis J

Reputation: 82267

jsFiddle Demo

The optimized grid is inside of the settings for smartresize. You could just make a single call to the resize function when the page loads like this:

$(window).smartresize();//I know it seems kind of simple, but it works

Upvotes: 4

Related Questions