3randilovesyou3
New Member
I'm using a hashchange function to navigate to events from other pages. The hashchange function works fine, clicking on a div will append the relevant content to a clearing div and scroll to this div. The only problem is when you navigate to these hashes from another page, e.g. \[code\]www.example.com/#09\[/code\] the scroll function doesn't work, which makes it appear the div hasn't been shown unless you scroll down manually.
Here's a jsfiddle: http://jsfiddle.net/wtrGx/1/
Here's also a demo showing the hash function: http://jsfiddle.net/wtrGx/1/show/
jQuery:\[code\]$(window).hashchange( function(){ var hash = location.hash; if(hash) { var element = $('.content-block-footer[hook="'+hash.substring(1)+'"]'); if(element) showDetail(element); }});$(document).ready(function() { $(document).hashchange(); var $container = $('#block-wrap'); $(function(){ $container.imagesLoaded(function(){ $('#block-wrap').masonry({ itemSelector : '.content-block-small, .content-block-big, .content-preview:not(.excluded)', columnWidth: 5, gutterWidth: 10, isFitWidth: true, isAnimated: true }); }); }); $(".content-block-footer").click(function () { $('html, body').animate({ scrollTop: $(this).offset().top+105 }, 'slow'); document.location.hash = $(this).attr('hook'); });});function showDetail(element) { $('.content-block-preview').hide(); var previewForThis = element.parent(".content-block-small").nextAll('.content-preview:first'); var otherPreviews = element.parent(".content-block-small").siblings('.content-preview').not(previewForThis); otherPreviews .addClass('excluded') // exclude other previews from masonry layout .hide(); previewForThis .removeClass('excluded') .append($('#content-preview' + element.attr('hook')).show()) .hide() .delay(400) .fadeIn("slow"); $('#block-wrap').masonry('reload');}\[/code\]So what I'm trying to figure out is if you navigate to the hashes via a url e.g. \[code\]www.example.com/#09\[/code\] that the scrollto function will work, in this case scrolling to \[code\]content-preview09\[/code\]
Here's a jsfiddle: http://jsfiddle.net/wtrGx/1/
Here's also a demo showing the hash function: http://jsfiddle.net/wtrGx/1/show/
jQuery:\[code\]$(window).hashchange( function(){ var hash = location.hash; if(hash) { var element = $('.content-block-footer[hook="'+hash.substring(1)+'"]'); if(element) showDetail(element); }});$(document).ready(function() { $(document).hashchange(); var $container = $('#block-wrap'); $(function(){ $container.imagesLoaded(function(){ $('#block-wrap').masonry({ itemSelector : '.content-block-small, .content-block-big, .content-preview:not(.excluded)', columnWidth: 5, gutterWidth: 10, isFitWidth: true, isAnimated: true }); }); }); $(".content-block-footer").click(function () { $('html, body').animate({ scrollTop: $(this).offset().top+105 }, 'slow'); document.location.hash = $(this).attr('hook'); });});function showDetail(element) { $('.content-block-preview').hide(); var previewForThis = element.parent(".content-block-small").nextAll('.content-preview:first'); var otherPreviews = element.parent(".content-block-small").siblings('.content-preview').not(previewForThis); otherPreviews .addClass('excluded') // exclude other previews from masonry layout .hide(); previewForThis .removeClass('excluded') .append($('#content-preview' + element.attr('hook')).show()) .hide() .delay(400) .fadeIn("slow"); $('#block-wrap').masonry('reload');}\[/code\]So what I'm trying to figure out is if you navigate to the hashes via a url e.g. \[code\]www.example.com/#09\[/code\] that the scrollto function will work, in this case scrolling to \[code\]content-preview09\[/code\]