I've set up some hashchange functions on a grid of divs, when one of the divs is clicked, the relevant content is appended to a clearing div (after every row) and a hash is attached. The reason for this is so you can navigate straight to these divs from other pages, but that's where the problem starts, when the page loads it merely scroll to the bottom of the page as the relevant content still hasn't loaded.
Here's a jsfiddle: http://jsfiddle.net/wtrGx/11/
Here's also a working demo with the hashes: http://jsfiddle.net/wtrGx/11/show/
And here's an example of what I'm referring to, if you navigate here (with the hash) it scroll to the bottom of the page instead of to the relevant div: http://jsfiddle.net/wtrGx/11/show/#07
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 () { 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"); $('html, body').animate({ scrollTop: element.offset().top+400 }, 'slow'); $('#block-wrap').masonry('reload');}\[/code\]I'm assuming this can be rectified by delaying the scroll until the content has loaded, I don't know if this is possible though?
Here's a jsfiddle: http://jsfiddle.net/wtrGx/11/
Here's also a working demo with the hashes: http://jsfiddle.net/wtrGx/11/show/
And here's an example of what I'm referring to, if you navigate here (with the hash) it scroll to the bottom of the page instead of to the relevant div: http://jsfiddle.net/wtrGx/11/show/#07
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 () { 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"); $('html, body').animate({ scrollTop: element.offset().top+400 }, 'slow'); $('#block-wrap').masonry('reload');}\[/code\]I'm assuming this can be rectified by delaying the scroll until the content has loaded, I don't know if this is possible though?