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 }