Question

I’ve sort of paginated a large menu — user sees 12 items at a time in a panel.

Its the menu on the right, here: http://bartlettstudio.com/

You can see my issue when you click on More Projects and select a link from that second panel.

Take this one for example: http://bartlettstudio.com/projects/dog-named-lucky/

When you’re on that page, the sidebar menu reverts back to the first panel and you have no way to tell what menu item you’re on. You need to click More Projects to see that “Dog Named Lucky” menu item.

The Question

Can anyone help me figure out how to approach this issue? Others have mentioned using jQuery hashchange, but that’s proven to be way over my head. Can anyone think of another way to solve this?

With much thanks

Terry

Answer 1

The more projects link could be changed to have a href in it lets say:

 <a href="#more-1" class="next">More Projects</a>

Then next onClick you can do something like this in jQuery:

jQuery(function ($) {

    if(window.location.hash) {
        // onLoad hash was detected
        console.log('onLoad hash detected // do something to position menu');

        // window.location.hash starts with a # following with the string behind it
        // window.location.hash.slice(1) gets the string only
    }


    // This isn't needed but quessing you already have an onClick set up for this element...
    $('a.next').click(function (e) {
        /* 
        Don't do e.preventDefault()! The browser will add the href hash value itself if you only specified the hash!
        If you want to preventit you will have to set the hash yourself like this:

        window.location.hash = 'more-1';
        */

        // do stuff, possibly with the href value since you have it anyway


        // I reccommend that you change the value of the href to specify the next hash value change
        $(this).attr('href', '#more-2');
    });

});