javascript - Strange error - Syntax error, unrecognized expression with a[href and canvas not displaying -
i have strange problem bootstrap , jquery javascript.
i using following jquery script smooth scrolling when clicking on anchor , when returning top of page whith button of browser (with removing #anchorname extension) :
$(function() { $('a[href*=#]:not([href=#])').click(function(event) { event.preventdefault(); if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { var hash = this.hash; // 'this' not in scope in callback $('html,body').animate({ scrolltop: target.offset().top - 55}, 300, function() { href = window.location.href; history.pushstate({page:href}, null, href.split('#')[0]+hash); }); return false; } } }); $(window).bind('popstate', function(event) { var state = event.originalevent.state; var target = window.location.href.split('#'); var href = target[0]; if (state) { $('html,body').animate({ scrolltop: 0 }, 300, function() { history.replacestate({}, null, href); }) } }); window.onload = function() { history.replacestate({ path: window.location.href }, ''); } });
if use double quote ( $('a[href*="#"]:not([href="#"])')
) script above works page have tested contains html5 canvas , canvas doesn't display.
on other side, if don't use double quote ( $('a[href*=#]:not([href=#])')
)), "anchor" functionalities don't work (i have not smooth scrolling) , html5 canvas displayed ;
i saw on forums solution may :
1) double quoting : $('a[href*="#"]:not([href="#"])')
or
2) unescape # character $('a[href*=\\#]:not([href=\\#])')
i tried these 2 solutions none of them works.
with jquery 1.12.0, following error :
error: syntax error, unrecognized expression: a[href*=#]:not([href=#])
any welcome
update solution :
initially, code :
$(function() { $('a[href*=#]:not([href=#])').click(function(event) { event.preventdefault(); if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { var hash = this.hash; // 'this' not in scope in callback $('html,body').animate({ scrolltop: target.offset().top - 55}, 300, function() { href = window.location.href; history.pushstate({page:href}, null, href.split('#')[0]+hash); }); return false; } } }); $(window).bind('popstate', function(event) { var state = event.originalevent.state; var target = window.location.href.split('#'); var href = target[0]; if (state) { $('html,body').animate({ scrolltop: 0 }, 300, function() { history.replacestate({}, null, href); }) } }); window.onload = function() { history.replacestate({ path: window.location.href }, ''); } });
finally, version below works :
$(window).bind("load", function () { $('a[href*="#"]:not([href="#"])').click(function(event) { event.preventdefault(); if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { var hash = this.hash; // 'this' not in scope in callback $('html,body').animate({ scrolltop: target.offset().top - 55}, 300, function() { href = window.location.href; history.pushstate({page:href}, null, href.split('#')[0]+hash); }); return false; } } }); $(window).bind('popstate', function(event) { var state = event.originalevent.state; var target = window.location.href.split('#'); var href = target[0]; if (state) { $('html,body').animate({ scrolltop: 0 }, 300, function() { history.replacestate({}, null, href); }); } }); });
it seems that, initial version, script executed before page loading, maybe canvas not loading too. put script "$(window).bind("load",
, think going anchor , return top of page executed once loaded. confirm ?
thanks
Comments
Post a Comment