Graceful handling of anchors with jQuery

Over at Hainhealt.com they have an interesting post on handling anchors gracefully with jQuery.

Below is an excerpt from the post:

I've come to use this quite often which eventually leads to a considerable amount of if statements.

Which is ugly. And since I don't like ugliness, I've coded myself a small anchor handler for jQuery. Looking at the code I think I could quite easily make it compatible with the Prototype framework too, but I'll keep that for another post :D

(function(){
  url = window.location.href, handlers = [];

  jQuery.extend({
    anchorHandler: {
      add: function(regexp, callback) {

        if (typeof(regexp) == 'object') {
          jQuery.map(regexp, function(arg){

            args = {r: arg[0], cb: arg[1]};});}

        else  args = {r: regexp, cb: callback};

        handlers.push(args);
        return jQuery.anchorHandler;
      }

    }
  })(document).ready(function(){
    jQuery.map(handlers, function(handler){

      match = url.match(handler.r) && url.match(handler.r)[0] || false;

      if (match) {
      	handler.cb.apply(this, [match, (url.match(/#.*/)[0] || false)]);

      }});});
})();

And I can add triggers like this:

$.anchorHandler
  .add(/\/\#ch\-cheatsheet/,    h.comment.showCheatsheet)

  .add(/\/\#comment\-compose/,  h.comment.showCompose)
  .add(/\/\#comment\-\d+/,      h.comment.focus);

The first argument is a regular expression or a string that is passed to the function match, the second argument is the callback function.

The method also accept arrays as argument like this:

$.anchorHandler.add([
  [/\/\#ch\-cheatsheet/,   h.comment.showCheatsheet],

  [/\/\#comment\-compose/, h.comment.showCompose],
  [/\/\#comment\-\d+/,     h.comment.focus]]);

The callback function receive 2 arguments. The matched bit of the anchor with the anchor itself.

Read the full post here.

This technique is very useful for downgrading your applications on browsers where JavaScript is disabled.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.