jQuery Isotope Combination Filters with BBQ Hash History - Highlight filter options when stepping through history -


i have page using excellent isotope , bbq jquery plugins. have followed combo filters , has history demo/test amongst other things, cannot figure out how filters select when stepping through page history (as seen on regular hash history demo).

here's complete js code:

    // modified isotope methods gutters in masonry $.isotope.prototype._getmasonryguttercolumns = function() {     var gutter = this.options.masonry && this.options.masonry.gutterwidth || 0;         containerwidth = this.element.width();      this.masonry.columnwidth = this.options.masonry && this.options.masonry.columnwidth ||                   // or use size of first item                   this.$filteredatoms.outerwidth(true) ||                   // if there's no items, use size of container                   containerwidth;      this.masonry.columnwidth += gutter;      this.masonry.cols = math.floor( ( containerwidth + gutter ) / this.masonry.columnwidth );     this.masonry.cols = math.max( this.masonry.cols, 1 ); };  $.isotope.prototype._masonryreset = function() {     // layout-specific props     this.masonry = {};     // fixme shouldn't have call again     this._getmasonryguttercolumns();     var = this.masonry.cols;     this.masonry.colys = [];     while (i--) {       this.masonry.colys.push( 0 );     } };  $.isotope.prototype._masonryresizechanged = function() {     var prevsegments = this.masonry.cols;     // update cols/rows     this._getmasonryguttercolumns();     // return if updated cols/rows not equal previous     return ( this.masonry.cols !== prevsegments ); };  $(function(){     var wait = $(".loading");     wait.animate({opacity: 0}, 500, 'linear').animate({opacity: 1}, 500, 'linear');      var $container = $('#container');     var initialoptions = {         filter: '*',         itemselector : '.item',         sortby: 'random',         layoutmode: 'masonry',         masonry: {             columnwidth: 170,             gutterwidth: 6.6         }     };      $container.imagesloaded( function(){          // build hash our options         var options = {             // special hash combination filters             combofilters: {}         };          var $optionsets = $('#options').find('.option-set'),             isoptionlinkclicked = false;          // filter buttons         $optionsets.find('a').click(function(){         //$('.filter').on( 'click', 'a', function( event ) {             event.preventdefault();             var $this = $(this);             // don't proceed if selected             if ( $this.hasclass('selected') ) {               return false;             }              selectlink( $this );              var $optionset = $this.parents('.option-set');             var group = $optionset.attr('data-filter-group');             options.combofilters[ group ] = $this.attr('data-filter-value');             $.bbq.pushstate( options );             isoptionlinkclicked = true;         });          function selectlink( $link ) {             $link.parents('.option-set').f  ind('.selected').removeclass('selected');             $link.addclass('selected')         }          var location = window.location;         var $combofilteroptionsets = $('.combo-filters .option-set');         var hashchanged = false;          function getcombofilterselector( combofilters ) {             // build filter             var isofilters = [];             var filtervalue, $link, $optionset;             ( var prop in combofilters ) {                 filtervalue = combofilters[ prop ];                 isofilters.push( filtervalue );                 // change selected combo filter link                 $optionset = $combofilteroptionsets.filter('[data-filter-group="' + prop + '"]');                 $link = $optionset.find('a[data-filter-value="' + filtervalue + '"]');                 //selectlink( $link );             }             var selector = isofilters.join('');             return selector;         }          $( window ).on( 'hashchange', function() {             //var aniengine = hashchanged ? 'best-available' : 'none'             //var isooptions = $.extend( {}, setupoptions, options );              if ( location.hash ) {                 $.extend( options, $.deparam.fragment( location.hash, true ) );             }             // build options hash , initial options             var isooptions = $.extend( {}, initialoptions, options );              if ( options.combofilters ) {                 isooptions.filter = getcombofilterselector( options.combofilters );             }              $container.isotope( isooptions );              // if option link not clicked             // we'll need update selected links             if ( !isoptionlinkclicked ) {                 // iterate on options                 var hrefobj, hrefvalue, $selectedlink;                 ( var key in options ) {                     hrefobj = {};                     hrefobj[ key ] = options[ key ];                     // convert object parameter string                     // i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition'                     hrefvalue = $.param( hrefobj );                     alert(hrefvalue);                     // matching link                     $selectedlink = $optionsets.find('a[href="#' + hrefvalue + '"]');                     selectlink( $selectedlink );                 }             }              isoptionlinkclicked = false;             hashchanged = true;         })          // trigger hashchange capture initial hash options         .trigger( 'hashchange' );         wait.fadeout(300);         $('.item').delay(800).fadein(500);      }); }); 

my problem in area:

if ( !isoptionlinkclicked ) {                 // iterate on options                 var hrefobj, hrefvalue, $selectedlink;                 ( var key in options ) {                     hrefobj = {};                     hrefobj[ key ] = options[ key ];                     // convert object parameter string                     // i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition'                     hrefvalue = $.param( hrefobj );                     alert(hrefvalue);                     // matching link                     $selectedlink = $optionsets.find('a[href="#' + hrefvalue + '"]');                     selectlink( $selectedlink );                 }             } 


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -