jQuery: absolute pathname before hash

Question

I'm currently experiencing some conflict between a hashchange function I have set up and jQuery mobile (used for sliding page transitions).
To demonstrate here's an isolated demo on my server: http://nealfletcher.co.uk/transition/
Click on transition click which slides the relevant page in, as it should and appends the url accordingly: /transition/news.

This is where the problem lies, click on news hash click and this will fire my hashchange function and load in the relevant div, BUT instead of the url being like so: /transition/news/#news-01 the url is being rendered like so /transition/#news-01 which causes problems when navigating to the url.
Is there anyway to force the /news/ to be added before the hash, so I get /transition/news/#news-01 instead of /transition/#news-01?
The relevant jQuery is below, is it at all possible to append /news/ before the hash?
Any suggestions would be greatly appreciated!

jQuery:

$(document).ready(function () {
    $(window).hashchange(function () {
        var hash = location.hash;
        if (hash) {
            var element = $('.click-block[data-hook="' + hash.substring(1) + '"]');
            if (element) showDetail(element);
        }
    });

    $(document).ready(function () {
        $(document).hashchange();

        var $container = $('#main-grid, #news-grid');

        $(function () {
            $container.imagesLoaded(function () {
                $container.isotope({
                    itemSelector: '.grid-block, .grid-break, .hidden',
                    animationEngine: 'best-available',
                    filter: '*:not(.hidden), .grid-block',
                    masonry: {
                        columnWidth: 8,
                        gutterWidth: 25
                    }
                });
            });
        });

        $(".click-block").click(function () {
            document.location.hash = $(this).attr('data-hook');
        });
    });


    function showDetail(element) {

        var newHeight = $('#post-' + element.attr('data-hook')).height();
        $('#post-' + element.attr('data-hook')).removeClass('hidden').addClass('grid-break').delay(300).fadeIn('slow');
        newHeight = (Math.floor((newHeight + 10) / 230) + 1) * 230 - 10;
        $('#post-' + element.attr('data-hook')).css('height', newHeight);

        element.children('.up-arrow').fadeIn('slow');
        setTimeout(function () {
            $('html, body').animate({
                scrollTop: $('#post-' + element.attr('data-hook')).offset().top - 90
            }, "slow");
        }, 1500);
        $('#main-grid').isotope();
        $('#news-grid').isotope();
    }

Answer 1

Just add the section in your data-hook attribute. So for your news links they will be prefixed by news/ like so data-hook="news/news-01"

Now, I would reccomend you to consider using something like http://backbonejs.org/#Router for what you'r doing. Or atleast take a look at https://github.com/browserstate/history.js/