I have a website that has a fluid width of 100%. I want the isotope items to have equal gaps on the sides no matter what the viewport of browser is. I tried playing around with the css with margin: 0 auto; but it doesn't work. I had a look at the documentation on http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html but the instruction is unclear. Seems like there is an extended code I need to add somewhere?

Comments

MrNeko’s picture

MrNeko commented

Alright I manage to implement the centered function. The weird thing is .. it doesn't automatically center the div on initial load. It loaded automatically centers the div when I resize the viewport.

kreynen’s picture

kreynen commented
Status: Active » Postponed (maintainer needs more info)

I'm still not exactly sure what you are trying to do and whether something needs to change in the module to allow it... or make it easier.

Can you post either what you did or what you changed to get this to work?

MrNeko’s picture

MrNeko commented
Status: Postponed (maintainer needs more info) » Active

http://jsfiddle.net/salt/QNkVF/

Ok it might be easier if you have a look at this .. In order to make sure the items are always centered, I need to get the #container div's width to be automatically calculated and apply margin 0 auto; to it. However, there is one problem, the div doesn't calculate the initial width on load. This can be observed when you resize your browser and reload the page, there is a gap on the right side of the div. I used firebug to check and the initial width is not there, and only appear when I start resizing the browser.

I implemented that same code into views_isotope.js and it gives me the same result. The div width is only calculated when I resize the browser.

MrNeko’s picture

MrNeko commented

Nvm, found the solution, there is a section of code missing from http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html that needs to be added in.

kreynen’s picture

kreynen commented
Status: Active » Closed (works as designed)
dureaghin’s picture

dureaghin commented

Works for me!

code from: http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html

CSS code:

#isotope-container {
   margin: 0 auto !important;
}

JS code:

<script>
(function ($) {
  $.Isotope.prototype._getCenteredMasonryColumns = function() {
    this.width = this.element.width();
    
    var parentWidth = this.element.parent().width();
    
                  // i.e. options.masonry && options.masonry.columnWidth
    var colW = this.options.masonry && this.options.masonry.columnWidth ||
                  // or use the size of the first item
                  this.$filteredAtoms.outerWidth(true) ||
                  // if there's no items, use size of container
                  parentWidth;
    
    var cols = Math.floor( parentWidth / colW );
    cols = Math.max( cols, 1 );

    // i.e. this.masonry.cols = ....
    this.masonry.cols = cols;
    // i.e. this.masonry.columnWidth = ...
    this.masonry.columnWidth = colW;
  };
  
  $.Isotope.prototype._masonryReset = function() {
    // layout-specific props
    this.masonry = {};
    // FIXME shouldn't have to call this again
    this._getCenteredMasonryColumns();
    var i = this.masonry.cols;
    this.masonry.colYs = [];
    while (i--) {
      this.masonry.colYs.push( 0 );
    }
  };

  $.Isotope.prototype._masonryResizeChanged = function() {
    var prevColCount = this.masonry.cols;
    // get updated colCount
    this._getCenteredMasonryColumns();
    return ( this.masonry.cols !== prevColCount );
  };
  
  $.Isotope.prototype._masonryGetContainerSize = function() {
    var unusedCols = 0,
        i = this.masonry.cols;
    // count unused columns
    while ( --i ) {
      if ( this.masonry.colYs[i] !== 0 ) {
        break;
      }
      unusedCols++;
    }
    
    return {
          height : Math.max.apply( Math, this.masonry.colYs ),
          // fit container to columns that have been used;
          width : (this.masonry.cols - unusedCols) * this.masonry.columnWidth
        };
  };
  
})(jQuery);  
</script>
kristofferrom’s picture

kristofferrom
He/him/his
commented

Great, works for me too at http://nordicwaves.net

kristofferrom’s picture

kristofferrom
He/him/his
commented

Great, works for me too at http://nordicwaves.net

kristofferrom’s picture

kristofferrom
He/him/his
commented
Issue summary: View changes

Change details

PI_Ron’s picture

PI_Ron commented

Where are we meant to put the code from #6, in a custom js file?

truyenle’s picture

truyenle commented
Issue summary: View changes

Work for me too.

The code can be placed simply in a custom block or even in view header, etc.

rcodina’s picture

rcodina
Primary language Catalan
Location Barcelona
commented

#6 Works for me too!

@PI_Ron Yes

rcodina’s picture

rcodina
Primary language Catalan
Location Barcelona
commented

#6 Works but if you have multiple Isotope views in the same page, only the first isotope view gets centered. Any idea about centering both Isotope views?

rcodina’s picture

rcodina
Primary language Catalan
Location Barcelona
commented

I modified the code in #6 so when Isotope view doesn't return results it doesn't produce a JS error. I just added an if to check if property Isotope is available.

(function (jQuery) {
  if (jQuery.hasOwnProperty('Isotope')) {
	  jQuery.Isotope.prototype._getCenteredMasonryColumns = function() {
	    this.width = this.element.width();
	    
	    var parentWidth = this.element.parent().width();
	    
	                  // i.e. options.masonry && options.masonry.columnWidth
	    var colW = this.options.masonry && this.options.masonry.columnWidth ||
	                  // or use the size of the first item
	                  this.$filteredAtoms.outerWidth(true) ||
	                  // if there's no items, use size of container
	                  parentWidth;
	    
	    var cols = Math.floor( parentWidth / colW );
	    cols = Math.max( cols, 1 );
	    // i.e. this.masonry.cols = ....
	    this.masonry.cols = cols;
	    // i.e. this.masonry.columnWidth = ...
	    this.masonry.columnWidth = colW;
	  };
	  
	  jQuery.Isotope.prototype._masonryReset = function() {
	    // layout-specific props
	    this.masonry = {};
	    // FIXME shouldn't have to call this again
	    this._getCenteredMasonryColumns();
	    var i = this.masonry.cols;
	    this.masonry.colYs = [];
	    while (i--) {
	      this.masonry.colYs.push( 0 );
	    }
	  };
	
	
	  jQuery.Isotope.prototype._masonryResizeChanged = function() {
	    var prevColCount = this.masonry.cols;
	    // get updated colCount
	    this._getCenteredMasonryColumns();
	    return ( this.masonry.cols !== prevColCount );
	  };
	  
	  jQuery.Isotope.prototype._masonryGetContainerSize = function() {
	    var unusedCols = 0,
	        i = this.masonry.cols;
	    // count unused columns
	    while ( --i ) {
	      if ( this.masonry.colYs[i] !== 0 ) {
	        break;
	      }
	      unusedCols++;
	    }
	    
	    return {
	          height : Math.max.apply( Math, this.masonry.colYs ),
	          // fit container to columns that have been used;
	          width : (this.masonry.cols - unusedCols) * this.masonry.columnWidth
	        };
	  };
  }
  
})(jQuery);