demos : hash history : enable back button on first click

_posts/demos/2011-06-13-hash-history.html

@@ -69,8 +69,14 @@ $(function(){
   
   var $container = $('#container'),
       // object that will keep track of options
+      defaultOptions = {
+        filter: '*',
+        sortBy: 'original-order',
+        sortAscending: true,
+        layoutMode: 'masonry'
+      },
       isotopeOptions = {};
-  
+      
   
   // hacky way of adding random size classes
   $container.find('.element').each(function(){
@@ -81,7 +87,7 @@ $(function(){
       $(this).addClass('height2');
     }
   });
-
+  
   // set up Isotope
   $container.isotope({
     itemSelector : '.element',
@@ -151,29 +157,28 @@ $(function(){
 
   $(window).bind( 'hashchange', function( event ){
     // get options object from hash
-    var hashOptions = $.deparam.fragment( window.location.href, true );
-    
-    // do not proceed if hash options aren't new
-    if ( hashOptions === isotopeOptions ) {
-      return;
-    }
-    
+    var hashOptions = window.location.hash ? $.deparam.fragment( window.location.hash, true ) : {},
+        options = {};
+
+    $.extend( options, defaultOptions, hashOptions );
     isotopeOptions = hashOptions;
+    
     // apply options from hash
-    $container.isotope( isotopeOptions );
+    $container.isotope( options );
     
     // if option link was not clicked
-    // then we'll need to update selected links with 
+    // then we'll need to update selected links
     if ( !isOptionLinkClicked ) {
       // iterate over options
-      for ( var key in isotopeOptions ) {
-        var hrefObj = {};
-        hrefObj[ key ] = isotopeOptions[ key ];
+      var hrefObj, hrefValue, $selectedLink;
+      for ( var key in options ) {
+        hrefObj = {};
+        hrefObj[ key ] = options[ key ];
         // convert object into parameter string
         // i.e. { filter: 'inner-transition' } -> 'filter=inner-transition'
-        var hrefValue = $.param( hrefObj ),
-            // get matching link
-            $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]');
+        hrefValue = $.param( hrefObj ),
+        // get matching link
+        $selectedLink = $optionSets.find('a[href="#' + hrefValue + '"]');
         changeSelectedLink( $selectedLink );
       }
     }