Sunday, 29 September 2013

jQuery: absolute pathname before hash

jQuery: absolute pathname before hash

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?

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();
}

No comments:

Post a Comment