1.0

sirEgghead · Jan 29, 2013 · 2b8ca16 · 2b8ca16
1 parent 933b971
commit 2b8ca16
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title></title>
+<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>
@@ -11,22 +11,9 @@
 </head>
 <body>
 
-<div id="firstbox">
-  <div class="box size21">1</div>
-  <div class="box size32">2</div>
-  <div class="box size11">3</div>
-  <div class="box size21">4</div>
-  <div class="box size12">5</div>
-  <div class="box size11">6</div>
-  <div class="box size21">7</div>
-</div>
-
-<div>
-  <a id="prepend">Prepend</a>
-  <a id="append">Append</a>
-</div>
+<a class="btn" id="prepend">Prepend</a>
 
-<div id="secondbox">
+<div id="container">
   <div class="box size11">1</div>
   <div class="box size21">2</div>
   <div class="box size32">3</div>
@@ -57,18 +44,21 @@
   <div class="box size22">28</div>
 </div>
 
+<a class="btn" id="append">Append</a>
+
 <script type="text/javascript" >
+
   $(function() { 
-    $('#firstbox').nested(); 
-    $('#secondbox').nested(); 
+
+    $('#container').nested(); 
 
     $('#prepend').click(function(){
       var boxes = makeBoxes();
-      $('#secondbox').prepend(boxes).nested('prepend',boxes);
+      $('#container').prepend(boxes).nested('prepend',boxes);
     })
     $('#append').click(function(){
       var boxes = makeBoxes();
-      $('#secondbox').append(boxes).nested('append',boxes);     
+      $('#container').append(boxes).nested('append',boxes);     
     })
 
   });

diff --git a/jquery.nested.js b/jquery.nested.js
@@ -55,8 +55,8 @@
         },
         animate: true,
         animationOptions: {
-            speed: 50,
-            duration: 200,
+            speed: 20,
+            duration: 100,
             queue: true,
             complete: function () {}
         },
@@ -380,10 +380,7 @@
                 $currTop = $(value['$el']).offset().top;
                 $currWidth = $(value['$el']).width();
                 $currHeight = $(value['$el']).width();
-
-                if($currTop < 1) {
-                  //$currTop = value['y'];
-                }
+
 
                 value['$el'].attr('data-y', $currTop).attr('data-x', $currLeft);                
                 //if animate and queue

diff --git a/js/.DS_Store b/js/.DS_Store
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:0px;
+				padding:1px;
 				margin:0px;	
 				}
 
@@ -13,10 +13,35 @@ body {	background-color:#e1e1e1;
   		  -khtml-border-radius: 3px;
 				-webkit-border-radius:3px;
 				border-radius:3px;
-				}
+
+
+-webkit-transition: all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
+   -moz-transition: all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
+    -ms-transition: all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
+     -o-transition: all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
+        transition: all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
+
+  -webkit-transition-property: left, right, top;
+     -moz-transition-property: left, right, top;
+      -ms-transition-property: left, right, top;
+       -o-transition-property: left, right, top;
+          transition-property: left, right, top;
+
+
+
+        				}
 
-#firstbox { background: red; }
-#secondbox { background: yellow }
+#container { background: red }
 
 .size21, .size22, .size23, .twocols { background: #ccc }
-.size31, .size32, .size33, .threecols { background: #ff9999 }
+.size31, .size32, .size33, .threecols { background: #ff9999 }
+
+a.btn {
+  margin-right: 1px;
+  line-height: 30px;
+  height: 30px;
+  cursor: pointer;
+  display: inline-block;
+  width: 75px;
+  color: red;
+}