Question

I’m playing around with isotope for filtering and it’s great. When the user clicks on one of the images it shows a different page (detail page), but the menu for filtering its still present. Now what I want is when the user click again on one of the possibilities, he goes back to main page but but already with the filtred results.

I already read this page ( http://isotope.metafizzy.co/docs/hash-history-jquery-bbq.html ) but I confess that I didn’t understood many things

I have the following HTML code, as they reccomended:

div id="leftMenu">

            <span><a href="#filter=*" >All Menus</a></span>
            <span><a href="#filter=.pizza" >Pizza </a></span>
            <span><a href="#filter=.soda" >Soda </a></span>
            <span><a href="#filter=.popcorn" >PopCorn</a></span>
            <span><a href="#filter=.beer" >Beer</a></span>
         </div> 

and the followin Js code

$('#leftMenu span a').click(function() {
        // get href attr, remove leading #
        var href = $(this).attr('href').replace(/^#/, ''),
        // convert href into object
        // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
        option = $.deparam(href);
        // set hash, triggers hashchange on window
        console.log('value de href: '+href+ ' || option: '+option);
        $.bbq.pushState(recursiveDecoded);

        return false;
    }); 

But I got an error at the depram function. It tells me that $.depram is not a function

Do I have to link an other extra file for read the depram method??

Can anyone help me how to accomplish or understand??

many thanks

EDIT – My Progress
I found two extra js files, I linked my project to them and with the following code

$('#leftMenu span a').click(function() {
        // get href attr, remove leading #
        var href = $(this).attr('href').replace(/^#/, ''),
        // convert href into object
        // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
        option = $.deparam(href);
        // set hash, triggers hashchange on window
        $.bbq.pushState(option);
        console.log("--> " +option );
        //return false;
    });     


$(window).bind('hashchange', function(event) {
    alert('Hello');
    // get options object from hash
    var hashOptions = $.deparam.fragment();
    console.log(hashOptions);
    // apply options from hash
    $('#leftMenu span a').isotope(hashOptions);
})
// trigger hashchange to capture any hash data on init
.trigger('hashchange');

I don’t got any errors. BUT it doesn’t the filter.

I can get the alert(‘Hello’).

Any ideas??

Answer 1

I found the solution. I had an error in my js code.

here’s the code

$container.isotope({});


    $('#leftMenu span a').click(function() {
        // get href attr, remove leading #
        var href = $(this).attr('href').replace(/^#/, ''),
        // convert href into object
        // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
        option = $.deparam(href);
        // set hash, triggers hashchange on window
        $.bbq.pushState(option);
        return false;
    }); 



    $(window).bind('hashchange', function(event) {
        // get options object from hash
        var hashOptions = $.deparam.fragment();
        // apply options from hash
         $container.isotope(hashOptions);
    })
    // trigger hashchange to capture any hash data on init
    .trigger('hashchange'); 

I tought that the $container.isotope(hashOptions); was refering to the menu items, but in reality it refers to the results container.