Syntax error, unrecognized expression with a[href and canvas not displaying

Question

I have a strange problem with Bootstrap and jQuery.

I am using the following jQuery script to get smooth scrolling when clicking on a anchor and when returning to the top of page with the back 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' will not be 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 I use double quote ($('a[href*="#"]:not([href="#"])')) this script above works well but the page that I have tested contains a HTML5 canvas and this canvas doesn't display.

On the other side, if I don't use double quote ( $('a[href*=#]:not([href=#])') )), the "anchor" functionalities don't work (I have not a smooth scrolling) and the HTML5 canvas is displayed.

I saw on forums that solution may be :

1) double quoting :

$('a[href*="#"]:not([href="#"])')

Or:

2) Unescape # character

$('a[href*=\\#]:not([href=\\#])')

I tried these solutions but none of them works.

With jQuery 1.12.0, I get the following error :

Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

You said that the issue is that the CANVAS not working. On the link your provide, the CANVAS working. — Aminadav Glickshtein, Feb 08 '16 at 12:44
the canvas is displayed and is working but the smooth scrolling with anchors doesn't work — , Feb 08 '16 at 12:46
Why do you think that the CANVAS, and smooth scrolling have conflict? Do you have an example of the same page without CANVAS and smooth scrolling working? Or do you have the page with smooth scrolling that CANVAS not working? It's really hard to experiment without [independent variables](https://en.wikipedia.org/wiki/Dependent_and_independent_variables) — Aminadav Glickshtein, Feb 08 '16 at 13:20
"*Failed to load resource: the server responded with a status of 404 (Not Found)*" — epascarello, Feb 08 '16 at 14:14
I put at the end of my post the two links illustrating my issue, one case for smooth scrolling but not working canvas and the second the opposite case — , Feb 08 '16 at 17:37
[This](http://stackoverflow.com/questions/31197452/syntax-error-unrecognized-expression-for-href) answered SO thread is very close to what your looking for. — Nikhil Nanjappa, Feb 08 '16 at 18:11

score -2 · Answer 1 · answered Feb 12 '23 at 22:21

(Posted answer on behalf of the question author to move it to the answer space).

I have solved it myself. Initially, my code was :

    $(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' will not be 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, the 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' will not be 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, for initial version, the script was executed before the page was loading, maybe the canvas was not loading too. By put all the script into "$(window).bind("load",, I think that going to anchor and return to top of page are executed once all is loaded.

Syntax error, unrecognized expression with a[href and canvas not displaying

1 Answers1