CODEWITHSUNDEEP
javascriptjqueryhtmlfiltering
bigant841
bigant841

Reputation: 48

How to add hash history to a filterable portfolio?

I am creating a filterable portfolio for my website. Once I click one of the filters it displays a hashtag at the end of my URL. For example if I click design it will display as www.yourdomain.com/#design.

Is it possible to make the browser back button work with that? That is, if I click this link, I add #design to my current address. Once I click the back button, the #design hash is removed and will display the last page or filter that was selected. Right now the back button works but it only displays all the filters that I selected in the URL but not on the page.

Is that somehow possible?

Here is a sample of the design that I am trying to work with http://www.jsfiddle.net/xnnnk/6/

$(document).ready(function () {
    $(".filter").click(function () {
        var filterText = $(this).attr('href').replace('#', '');
        $(".projectGrid").hide();
        $(".projectHolder").show();
        $(".projectHolder").not('.' + filterText).hide();
        $(".projectGrid").fadeIn(1500);
        $('.filter').not($(this).toggleClass('activeWork')).removeClass('activeWork');
    });
});

Thank you

Upvotes: 1

Views: 167

Answers (1)

melc
melc

Reputation: 11671

You could detect the hash change e.g.

$(window).on('hashchange', function() {
  console.log('changed to:'+document.location.hash);
});

and act accordingly, possibly call the filtering code you have posted.

This seems to be widely supported, http://caniuse.com/#search=hash

Simple demo of what i've described,

http://jsfiddle.net/3nA2p/1

http://jsfiddle.net/3nA2p/1/show

Upvotes: 2

Related Questions