diff --git a/index.html b/index.html index 247497b..52a5b22 100755 --- a/index.html +++ b/index.html @@ -4,8 +4,7 @@ Nested - - + diff --git a/jquery.nested.js b/jquery.nested.js index bdb1d75..457217b 100644 --- a/jquery.nested.js +++ b/jquery.nested.js @@ -1,5 +1,5 @@ /** - * jQuery Nested v1.02 + * jQuery Nested v1.03 * * For a (total) gap free, multi column, grid layout experience. * http://suprb.com/apps/nested/ @@ -64,6 +64,7 @@ if (!Object.keys) { minWidth: 50, minColumns: 1, gutter: 1, + centered: false, resizeToFit: true, // will resize block bigger than the gap resizeToFitOptions: { resizeAny: true // will resize any block to fit the gap @@ -82,6 +83,7 @@ if (!Object.keys) { _init: function (options) { var container = this; this.box = this.element; + $(this.box).css('position', 'relative'); this.options = $.extend(true, {}, $.Nested.settings, options); this.elements = []; this._isResizing = false; @@ -103,12 +105,16 @@ if (!Object.keys) { this.counter = 0; this.t = 0; this.maxHeight = 0; - - //this.total = !$els ? this.box.find(this.options.selector) : $els; + this.currWidth = 0; this.total = this.box.find(this.options.selector); this.matrix = {}; this.gridrow = new Object; - this.columns = Math.max(this.options.minColumns, parseInt(this.box.innerWidth() / (this.options.minWidth + this.options.gutter)) + 1); + + var calcWidth = !this.options.centered ? this.box.innerWidth() : $(window).width(); + + console.log(calcWidth) + + this.columns = Math.max(this.options.minColumns, parseInt(calcWidth / (this.options.minWidth + this.options.gutter)) + 1); // build columns var minWidth = this.options.minWidth; @@ -131,8 +137,8 @@ if (!Object.keys) { 'position': 'absolute', 'width': currWidth, 'height': currHeight, - 'top': $(this).offset().top, - 'left': $(this).offset().left + 'top': $(this).position().top, + 'left': $(this).position().left }).removeClass('nested-moved').attr('data-box', self.idCounter).attr('data-width', currWidth); self.idCounter++; @@ -168,8 +174,8 @@ if (!Object.keys) { _updateMatrix: function (el) { var height = 0; - var t = parseInt(el['y']) - this.box.offset().top; - var l = parseInt(el['x']) - this.box.offset().left; + var t = parseInt(el['y']); + var l = parseInt(el['x']); for (var h = 0; h < el['height']; h += (this.options.minWidth + this.options.gutter)) { for (var w = 0; w < el['width']; w += (this.options.minWidth + this.options.gutter)) { var x = l + w; @@ -216,7 +222,7 @@ if (!Object.keys) { $.each(this.matrix, function (y, row) { rowsLeft--; - actualY = parseInt(y) + parseInt(self.box.offset().top); + actualY = parseInt(y); // + parseInt(self.box.offset().top); $.each(row, function (x, col) { if (col === 'false' && actualY < topY) { @@ -246,8 +252,8 @@ if (!Object.keys) { $(el['$el']).addClass('nested-moved'); self.elements.push({ $el: $(el['$el']), - x: parseInt(box.x) + self.box.offset().left, - y: parseInt(box.y) + self.box.offset().top, + x: parseInt(box.x), + y: parseInt(box.y), col: i, width: parseInt(box.w), height: parseInt(box.h) @@ -347,18 +353,19 @@ if (!Object.keys) { if (method == "prepend") { this.elements.unshift({ $el: $el, - x: x + this.box.offset().left, - y: y + this.box.offset().top, + x: x, + y: y, width: w, height: h, cols: cols, rows: rows }); } else { + console.log(this.box.position().top) this.elements.push({ $el: $el, - x: x + this.box.offset().left, - y: y + this.box.offset().top, + x: x, + y: y, width: w, height: h, cols: cols, @@ -371,7 +378,7 @@ if (!Object.keys) { var self = this; $.each($els, function (index, value) { // set maxHeight - var colY = (value['y'] + value['height']) - self.box.offset().top; + var colY = (value['y'] + value['height']); if (colY > self.maxHeight) { self.maxHeight = colY; } @@ -379,11 +386,26 @@ if (!Object.keys) { return self.maxHeight; }, + _setWidth: function ($els) { + var self = this; + $.each($els, function (index, value) { + // set maxWidth + var colX = (value['x'] + value['width']); + if (colX > self.currWidth) { + self.currWidth = colX; + } + }); + return self.currWidth; + }, + _renderItems: function ($els) { var self = this; - // set container height + // set container height and width this.box.css('height', this._setHeight($els)); + if (this.options.centered) { + this.box.css({'width' : this._setWidth($els), 'margin-left' : 'auto', 'margin-right' : 'auto'}); + } $els.reverse(); var speed = this.options.animationOptions.speed; @@ -398,13 +420,13 @@ if (!Object.keys) { $.each($els, function (index, value) { - $currLeft = $(value['$el']).offset().left; - $currTop = $(value['$el']).offset().top; + $currLeft = $(value['$el']).position().left; + $currTop = $(value['$el']).position().top; $currWidth = $(value['$el']).width(); $currHeight = $(value['$el']).width(); - value['$el'].attr('data-y', $currTop).attr('data-x', $currLeft); + //if animate and queue if (animate && queue && ($currLeft != value['x'] || $currTop != value['y'])) { setTimeout(function () { diff --git a/style.css b/style.css index 8c64d67..f0d63e9 100644 --- a/style.css +++ b/style.css @@ -3,7 +3,7 @@ body { background-color:#e1e1e1; font-family: Arial, sans-serif; font-size:11px; line-height: 14px; - padding:1px; + padding:0px; margin:0px; } @@ -31,7 +31,7 @@ body { background-color:#e1e1e1; } -#container { background: red } +#container { background: red;} .size21, .size22, .size23, .twocols { background: #ccc } .size31, .size32, .size33, .threecols { background: #ff9999 }