I'm having some trouble getting the hashchange function to work how I want it to. I currently have a masonry grid of divs, with a clearing div after every row (of 4), which is hidden. Clicking on one of the divs shows the closest clearing div, appends the relevant content inside it and reloads the masonry around it.
This all works fine, but as I want to link to these divs that are being show from other pages I want to attach hashes to the functions. The hashes are being added to the URL, but if you load the URL it fails to run the function and show the relevant divs.
jQuery:\[code\]$(document).ready(function () {$(window).hashchange( function(){ $(".content-block-footer").click(function () { $('.content-block-preview').hide(); var previewForThis = $(this).parent(".content-block-small").nextAll('.content-preview:first'); var otherPreviews = $(this).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' + $(this).attr('hook')).show()) .hide() .delay(400) .fadeIn("slow"); $('html, body').animate({ scrollTop: $(this).offset().top-95 }, 'slow'); $('#block-wrap').masonry('reload'); }); });$(window).hashchange();});\[/code\]HTML:\[code\]<div id="block-wrap"><div class="content-block-small" style="background-color: white;"><div class="content-block-footer" hook="01"><a href="http://stackoverflow.com/questions/15582458/#test01">READ MORE</a></div></div><div class="content-block-small" style="background-color: white;"><div class="content-block-footer" hook="02"><a href="http://stackoverflow.com/questions/15582458/#test02">READ MORE</a></div></div><div class="content-block-small" style="background-color: white;"><div class="content-block-footer" hook="03"><a href="http://stackoverflow.com/questions/15582458/#test03">READ MORE</a></div></div><div class="content-block-small" style="background-color: white;"><div class="content-block-footer" hook="04"><a href="http://stackoverflow.com/questions/15582458/#test04">READ MORE</a></div></div><div class="content-preview excluded"></div><div id="content-preview01" class="content-block-preview">CONTENT GOES HERE</div><div id="content-preview02" class="content-block-preview">CONTENT GOES HERE</div><div id="content-preview03" class="content-block-preview">CONTENT GOES HERE</div><div id="content-preview04" class="content-block-preview">CONTENT GOES HERE</div></div>\[/code\]Is it possible to attach hashes to such click functions and link to these hashes from exterior pages (showing the relevant content)?
This all works fine, but as I want to link to these divs that are being show from other pages I want to attach hashes to the functions. The hashes are being added to the URL, but if you load the URL it fails to run the function and show the relevant divs.
jQuery:\[code\]$(document).ready(function () {$(window).hashchange( function(){ $(".content-block-footer").click(function () { $('.content-block-preview').hide(); var previewForThis = $(this).parent(".content-block-small").nextAll('.content-preview:first'); var otherPreviews = $(this).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' + $(this).attr('hook')).show()) .hide() .delay(400) .fadeIn("slow"); $('html, body').animate({ scrollTop: $(this).offset().top-95 }, 'slow'); $('#block-wrap').masonry('reload'); }); });$(window).hashchange();});\[/code\]HTML:\[code\]<div id="block-wrap"><div class="content-block-small" style="background-color: white;"><div class="content-block-footer" hook="01"><a href="http://stackoverflow.com/questions/15582458/#test01">READ MORE</a></div></div><div class="content-block-small" style="background-color: white;"><div class="content-block-footer" hook="02"><a href="http://stackoverflow.com/questions/15582458/#test02">READ MORE</a></div></div><div class="content-block-small" style="background-color: white;"><div class="content-block-footer" hook="03"><a href="http://stackoverflow.com/questions/15582458/#test03">READ MORE</a></div></div><div class="content-block-small" style="background-color: white;"><div class="content-block-footer" hook="04"><a href="http://stackoverflow.com/questions/15582458/#test04">READ MORE</a></div></div><div class="content-preview excluded"></div><div id="content-preview01" class="content-block-preview">CONTENT GOES HERE</div><div id="content-preview02" class="content-block-preview">CONTENT GOES HERE</div><div id="content-preview03" class="content-block-preview">CONTENT GOES HERE</div><div id="content-preview04" class="content-block-preview">CONTENT GOES HERE</div></div>\[/code\]Is it possible to attach hashes to such click functions and link to these hashes from exterior pages (showing the relevant content)?