designsforweb
designsforweb

Reputation: 1

Filterable Portfolio Hashtag

I'm working with a filterable Portfolio. I've got a little problem with the links to filter the portfolio.

When I click on the buttons, it filters the portfolio correctly, but after that it connects automatically to the a site like xy.com/#myfilter and trying to open it.

Maybe you have an idea how to disable this?

LINK SAMPLE:

<a href="#design" rel="design">Design</a>

THE JS-FILE IS THE FOLLOWING:

(function($) {
  $.fn.filterable = function(settings) {
    settings = $.extend({
      useHash          : true,
      animationSpeed   : 500,
      show             : { width: 'show', opacity: 'show' },
      hide             : { width: 'hide', opacity: 'hide' },
      useTags          : true,
      tagSelector      : '#portfolio-filter a',
      selectedTagClass : 'current',
      allTag           : 'all'
    }, settings);

    return $(this).each(function(){

      /* FILTER: select a tag and filter */
      $(this).bind("filter", function( e, tagToShow ){
        if(settings.useTags){
          $(settings.tagSelector)
            .removeClass(settings.selectedTagClass);
          $(settings.tagSelector + '[href=' + tagToShow + ']')
            .addClass(settings.selectedTagClass);
        }

        $(this).trigger("filterportfolio", [ tagToShow.substr(1) ]);
      });

      /* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */
      $(this).bind("filterportfolio", function( e, classToShow ){
        if(classToShow == settings.allTag){
          $(this).trigger("show");
        }else{
          $(this).trigger("show", [ '.' + classToShow ] );
          $(this).trigger("hide", [ ':not(.' + classToShow + ')' ] );
        }

        if(settings.useHash){
          location.hash = '#' + classToShow;
        }
      });

      /* SHOW: show a single class*/
      $(this).bind("show", function( e, selectorToShow ){  
        $(this)
          .children(selectorToShow)
          .animate(settings.show, settings.animationSpeed);
      });

      /* SHOW: hide a single class*/
      $(this).bind("hide", function( e, selectorToHide ){
        $(this)
          .children(selectorToHide)
          .animate(settings.hide, settings.animationSpeed); 
      });

      /* ============ Check URL Hash ====================*/
      if(settings.useHash){
        if(location.hash != '') {
          $(this).trigger("filter", [ location.hash ]);
        }else{
          $(this).trigger("filter", [ '#' + settings.allTag ]);
        }

        /* ============ Setup Tags ====================*/
        if(settings.useTags){
          $(settings.tagSelector).click(function(){
            $('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);
            $(settings.tagSelector).removeClass('current');
            $(this).addClass('current');
          });
        }
      });
    }
})(jQuery);


$(document).ready(function(){

    $('#portfolio-list').filterable();

});

Could it also be, that I have a problem with my search friendly URLS? Thanks a lot for every help.

Best regards.

Upvotes: 0

Views: 648

Answers (1)

Zuul
Zuul

Reputation: 16269

You need to make some adjustments to the click event:

At your current click function:

$(settings.tagSelector).click(function(){
  $('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);

  $(settings.tagSelector).removeClass('current');
  $(this).addClass('current');
});

Change it to:

$(settings.tagSelector).click(function(event){
  $('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);

  $(settings.tagSelector).removeClass('current');
  $(this).addClass('current');

  // push the hash into the url
  location.hash = $(this).attr('href');

  // stop the regular href
  event.preventDefault();
});

This allows you to place the hash value into the URL, but prevent the browser from actually reloading the page with that hash when the user clicks the link!


Read more about it:

event.preventDefault() | location.hash

Upvotes: 1

Related Questions