Question

I can’t find where i can put my own code on resize and reposition. I need to find where to insert the callback, this is the only bit i should be looking at and i just can’t find where to insert the callback function on resize

  $.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
    }
   };

Any idea?

Answer 1

Solution was to simply do a window.resize an apply a timer in it:

 var delay = (function(){
   var timer = 0;
   return function(callback, ms){
     clearTimeout (timer);
      timer = setTimeout(callback, ms);
   };
 })();

 $(window).resize(function() {
   delay(function(){
     if ($("#head").width() != $("#container").width()){
        var myLeft = $("#container").offset().left;
        var newWidth = $("#container").innerWidth();
        var myRight = $("#container").offset().left + $("#container").outerWidth();
        $("#head").animate({ width: newWidth, marginLeft: myLeft, marginRight: myRight }, "fast");
    }
  }, 800);
});