CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-isotope
cheng
cheng

Reputation: 1324

Using Isotope's smartresize() to make divs fluid

I've been stuck for hours on how to implement the $(window).smartresize() function to make my divs fluid.

I used the javascript from thistheme but when I try to implement it myself, my divs do not resize.

I made a simpler page to try to test it and here it is. I ran Chrome Inspector many times through this and it seems that the width is not changing with the resize. I have a feeling it's because I used :before in the CSS but I'm not sure.

HTML

<div class="thumbs"> 
 <div class="item" style="background-image: url('http://placehold.it/300x225');"> </div> 
 <div class="item" style="background-image: url('http://placehold.it/300x225');"></div>
 <div class="item" style="background-image: url('http://placehold.it/300x225');"> </div>
 <div class="item" style="background-image: url('http://placehold.it/300x225');"> </div>
 <div class="item" style="background-image: url('http://placehold.it/300x225');"> </div>
</div>

CSS

.item {
 overflow:hidden;
 width:308px;
 float: left;
 position: relative;
 background-size: 100%;
 background-repeat: no-repeat;
}

.item:after {
 content: "";
 display: block;
 padding-top: 75%;
}

JS

var $gridContainer = $('.thumbs');
var colW;
var thumbWidth = 308;

function isotopeInit() {
 setColumns();  
 $gridContainer.isotope({       
  resizable: false,
  layoutMode: 'fitRows',
  masonry: {
   columnWidth: colW
  }
 });    
}

function setColumns()
{   
 var columns;
 console.log($gridContainer.width()/thumbWidth);

 columns = Math.ceil($gridContainer.width()/thumbWidth);    
 colW = Math.floor($gridContainer.width() / columns);
 $('.item').each(function(id){
  $(this).css('width',colW-gridGutter+'px');
 });
}

function gridResize() { 
 setColumns();

 $gridContainer.isotope({
  resizable: false,
  masonry: {
   columnWidth: colW
  }
 })     
}

$(window).load(function(){      
 isotopeInit(); 

});

$(window).smartresize(function(){
 gridResize();
});

Upvotes: 0

Views: 1395

Answers (2)

cheng
cheng

Reputation: 1324

The smartresize() function was only available with Isotope v1 and I was running v2. In the end, I solved this by using an open source jQuery plugin which provided the same functions as smartresize() and was compatible with Isotope v2.

Upvotes: 0

Tovly Deutsch
Tovly Deutsch

Reputation: 663

Given that the link you provided goes to the Isotope v1 docs and that the resizable option you are using is exclusively an Isotope v1 option, I'm assuming you're using Isotope v1.

I would suggest that you update to Isotope v2 and use percentage sizing for your Isotope elements and use element sizing to resize your container and column widths. This technique is demonstarted in this jsfiddle by David DeSandro, the create of Isotope.

Upvotes: 1

Related Questions