docs : bind click events before page loads. Thx http://news.ycombinator.com/item?id=2192083

_layouts/elements.html

@@ -51,10 +51,45 @@
   <script src="../js/fake-element.js"></script>
   <script>
 
+    var $container = $('#container');
+
+    $('#filters').find('a').click(function(){
+      // get href attribute, minus the #, plus a . to make it a class
+      var filterName = '.' + $(this).attr('href').slice(1);
+      filterName = filterName === '.show-all' ? '*' : filterName;
+      $container.isotope({ filter: filterName })
+      return false;
+    });
 
-    $(function(){
+    {% include sort-buttons.js %}
+
+    // change size of clicked element
+    $container.find('.element').live('click', function(){
+      $(this).toggleClass('large');
+      $container.isotope('reLayout');
+    });
+
+    // toggle variable sizes of all elements
+    $('#toggle-sizes').find('a').click(function(){
+      $container
+        .toggleClass('variable-sizes')
+        .isotope('reLayout');
+      return false;
+    });
 
-      var $container = $('#container');
+    {% include layout-change.js %}
+
+    {% include add-buttons.js %}
+
+    $('#shuffle a').click(function(){
+      $container.isotope('shuffle');
+      return false;
+    });
+
+    {% include option-buttons.js %}
+    
+
+    $(function(){
 
       // hacky way of adding random size classes
       $container.find('.element').each(function(){
@@ -106,41 +141,6 @@
       });
 
 
-      $('#filters').find('a').click(function(){
-        // get href attribute, minus the #, plus a . to make it a class
-        var filterName = '.' + $(this).attr('href').slice(1);
-        filterName = filterName === '.show-all' ? '*' : filterName;
-        $container.isotope({ filter: filterName })
-        return false;
-      });
-
-      {% include sort-buttons.js %}
-
-      // change size of clicked element
-      $container.find('.element').live('click', function(){
-        $(this).toggleClass('large');
-        $container.isotope('reLayout');
-      });
-
-      // toggle variable sizes of all elements
-      $('#toggle-sizes').find('a').click(function(){
-        $container
-          .toggleClass('variable-sizes')
-          .isotope('reLayout');
-        return false;
-      });
-
-      {% include layout-change.js %}
-
-      {% include add-buttons.js %}
-
-      $('#shuffle a').click(function(){
-        $container.isotope('shuffle');
-        return false;
-      });
-
-      {% include option-buttons.js %}
-
     });
   </script>
 

_posts/demos/2010-12-29-layout-modes.html

@@ -25,9 +25,14 @@ related: layouts
   <script src="../js/jquery-1.4.4.min.js"></script>
   <script src="../{{ site.isotope_js }}"></script>
   <script>
+  
+    var $container = $('#container');
+
+    {% include layout-change.js %}
+    
+    {% include option-buttons.js %}
+
     $(function(){
-      
-      var $container = $('#container');
 
       // hacky way of adding random size classes
       $container.find('.element').each(function(){
@@ -57,10 +62,6 @@ related: layouts
         }
       });
       
-      {% include layout-change.js %}
-      
-      {% include option-buttons.js %}
-      
     });
   </script>
   

_posts/demos/2010-12-30-filtering.html

@@ -39,23 +39,24 @@ related: filtering
   <script src="../js/jquery-1.4.4.min.js"></script>
   <script src="../{{ site.isotope_js }}"></script>
   <script>
+  
+    var $container = $('#container');
+
+    // filter buttons
+    $('#filters a').click(function(){
+      var selector = $(this).attr('data-filter');
+      $container.isotope({ filter: selector });
+      return false;
+    });
+    
+    {% include option-buttons.js %}
+
     $(function(){
-      
-      var $container = $('#container');
 
       $container.isotope({
         itemSelector : '.element'
       });
       
-      // filter buttons
-      $('#filters a').click(function(){
-        var selector = $(this).attr('data-filter');
-        $container.isotope({ filter: selector });
-        return false;
-      });
-      
-      {% include option-buttons.js %}
-      
     });
   </script>
   

_posts/demos/2010-12-30-sorting.html

@@ -26,10 +26,14 @@ related: sorting
   <script src="../js/jquery-1.4.4.min.js"></script>
   <script src="../{{ site.isotope_js }}"></script>
   <script>
-    $(function(){
-      
-      var $container = $('#container');
 
+    var $container = $('#container');
+    
+    {% include sort-buttons.js %}
+    
+    {% include option-buttons.js %}
+  
+    $(function(){
       
       $container.isotope({
         itemSelector : '.element',
@@ -52,9 +56,5 @@ related: sorting
         }
       });
       
-      {% include sort-buttons.js %}
-      
-      {% include option-buttons.js %}
-      
     });
   </script>

_posts/demos/2010-12-31-relayout.html

@@ -25,10 +25,26 @@ related: methods
   <script src="../js/jquery-1.4.4.min.js"></script>
   <script src="../{{ site.isotope_js }}"></script>
   <script>
+  
+    var $container = $('#container');
+  
+    // toggle variable sizes of all elements
+    $('#toggle-sizes a').click(function(){
+      $container
+        .toggleClass('variable-sizes')
+        .isotope('reLayout');
+      return false;
+    });
+  
+    // change size of clicked element
+    $container.find('.element').live('click', function(){
+      $(this).toggleClass('large');
+      $container.isotope('reLayout');
+    });
+  
+  
     $(function(){
       
-      var $container = $('#container');
-      
       // hacky way of adding random size classes
       $container.find('.element').each(function(){
         if ( Math.random() > 0.6 ) {
@@ -46,21 +62,6 @@ related: methods
         }
       });
       
-      // toggle variable sizes of all elements
-      $('#toggle-sizes a').click(function(){
-        $container
-          .toggleClass('variable-sizes')
-          .isotope('reLayout');
-        return false;
-      });
-      
-      // change size of clicked element
-      $container.find('.element').live('click', function(){
-        $(this).toggleClass('large');
-        $container.isotope('reLayout');
-      });
-      
-      
     });
   </script>
   

_posts/demos/2011-01-02-adding-items.html

@@ -29,10 +29,13 @@ related: methods
   <script src="../{{ site.isotope_js }}"></script>
   <script src="../js/fake-element.js"></script>
   <script>
+
+    var $container = $('#container');
+
+    {% include add-buttons.js %}
+
     $(function(){
 
-      var $container = $('#container');
-    
       $container.isotope({
         itemSelector : '.element',
         getSortData : {
@@ -43,8 +46,5 @@ related: methods
         sortBy : 'symbol'
       });
     
-      {% include add-buttons.js %}
-    
-    
     });
   </script>