offset fix, setting added: centered

sirEgghead · Oct 3, 2013 · 1a34d5e · 1a34d5e
1 parent 67674d5
commit 1a34d5e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -4,8 +4,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Nested</title>
 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
-<script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="jquery.nested.js"></script>
 <script src="makeboxes.js"></script>
 </head>

diff --git 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,19 +378,34 @@ 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;
                 }
             });
             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
@@ -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 }