From 4e8b9d4ea1d326ee79ace8ab6031753ff5bbc651 Mon Sep 17 00:00:00 2001
From: David DeSandro <david@desandro.com>
Date: Tue, 8 Feb 2011 07:43:51 -0500
Subject: [PATCH] docs : bind click events before page loads.  Thx
 http://news.ycombinator.com/item?id=2192083

---
 _layouts/elements.html                    | 74 +++++++++++------------
 _posts/demos/2010-12-29-layout-modes.html | 13 ++--
 _posts/demos/2010-12-30-filtering.html    | 23 +++----
 _posts/demos/2010-12-30-sorting.html      | 14 ++---
 _posts/demos/2010-12-31-relayout.html     | 35 +++++------
 _posts/demos/2011-01-02-adding-items.html | 10 +--
 6 files changed, 86 insertions(+), 83 deletions(-)

diff --git a/_layouts/elements.html b/_layouts/elements.html
index 0e7d3fe..d885f93 100644
--- a/_layouts/elements.html
+++ b/_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>
 
diff --git a/_posts/demos/2010-12-29-layout-modes.html b/_posts/demos/2010-12-29-layout-modes.html
index 18d6e75..244c9b9 100644
--- a/_posts/demos/2010-12-29-layout-modes.html
+++ b/_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>
   
diff --git a/_posts/demos/2010-12-30-filtering.html b/_posts/demos/2010-12-30-filtering.html
index 891d204..5936d3f 100644
--- a/_posts/demos/2010-12-30-filtering.html
+++ b/_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>
   
diff --git a/_posts/demos/2010-12-30-sorting.html b/_posts/demos/2010-12-30-sorting.html
index 3e14a3e..b079983 100644
--- a/_posts/demos/2010-12-30-sorting.html
+++ b/_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>
diff --git a/_posts/demos/2010-12-31-relayout.html b/_posts/demos/2010-12-31-relayout.html
index 60cb370..2de6c3b 100644
--- a/_posts/demos/2010-12-31-relayout.html
+++ b/_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>
   
diff --git a/_posts/demos/2011-01-02-adding-items.html b/_posts/demos/2011-01-02-adding-items.html
index 8de6656..69a4426 100644
--- a/_posts/demos/2011-01-02-adding-items.html
+++ b/_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>
\ No newline at end of file