Skip to content

Instantly share code, notes, and snippets.

@dalethedeveloper
Created September 10, 2013 15:49
Show Gist options
  • Save dalethedeveloper/6511417 to your computer and use it in GitHub Desktop.
Save dalethedeveloper/6511417 to your computer and use it in GitHub Desktop.
Override jQuery Mobile page change/show methods to hack in support for #anchor links in the content fragment loaded. Tested with JQM 1.2 to 1.3.2.
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
if (window.location.hash == '#_=_') // Darn it, Facebook
window.location.hash = '';
$(document).bind("mobileinit", function(){
// Enable anchor links to behave like you think they would
$(document).on('pagechange',function(e,ui){
$('a[href^="#"]',ui.toPage).on('click',function(){
var selector = 'a[name="'+($(this).attr('href').substring(1))+'"]',
target = $(selector).get(0).offsetTop;
$.mobile.silentScroll(target)
return false;
});
});
// Allow direct navigation to anchor links
$(document).on('pageshow',function(e,ui){
if( window.location.hash.length > 0 ) {
setTimeout(
function(){
var hash = window.location.hash;
if( hash[0] == '#' )
hash = hash.substr(1);
var target = $('a[name="'+hash+'"]').get(0).offsetTop;
$.mobile.silentScroll(target);
}, 500);
}
});
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment