Catch404 – jQuery Plugin For Handling Broken Links Smartly

Catch404 – jQuery Plugin For Handling Broken Links Smartly
in jQuery 5 comments
Advertisements

Today we are going to present a new jQuery Plugin is  called Catch404. Through the magic of jQuery we’re going to catch 404 errors without your users even having to leave the page and then suggest some other options they’ve got using an inline jQuery Modal window.

You may be interested in the following modern trends related articles as well.

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.

Don’t forget to Subscribe  to  our  RSS-feed subscribe to our RSS-feed and Follow  us on  Twitter follow us on Twitter — for recent updates.

Catch404 is a jQuery plugin which adds a layer between the web page and the link to detect this issue with the process:

  • when a link is clicked, it sends a request to the page
  • if a 404 message is returned, displays a modal box mentioning that the page does not exist. Else, redirects to the URL.

What is Catch404

The basic idea behind Catch404 is that you perform an Ajax query for a URL and handle the response provided accordingly, so if its a 404 error, we handle this error specifically. Now because cross-domain 404 handling with jQuery is something that has often been problematic to correctly implement, achieving this isn’t as straight-forward as it should be. Instead, the plugin uses a neat trick using the Yahoo YQL Engine to access the URL for us which returns a HTML string (local URLs don’t require this hack) – thanks to James Padolsey and Christian Heillman for their work in this area. Depending on the contents of this string response, we’re then able to handle the error from the same page the user tried clicking out from. In my plugin, a modal window is used to render the error message and it’s here that you’re able to define whatever message, links or tips that you would like to offer your users regarding the 404. This offers a much better user experience than traditional 404 handling because rather than taking them somewhere with no content, you’ve now got the option to either present them with an alternative mirror or advice through the modal window.

Requirements: jQuery
Website: http://addyosmani.com/blog/catch404/
Demo: http://www.addyosmani.com/resources/catch404/catch404.html

 
 
Author:
I'm Muhammad Faisal founder of GDJ and co-founder of FPD. I love all things having to do with WordPress, PHP, CSS, AJAX or jQuery. And really enjoying to writing articles on photography and typography. You can catch me on Twitter, Facebook and Pinterest.

5 Comments

aisha Jul 28, 2010

A very resource full article! Thanks for compiling the tips and tricks. I have some already implemented…thanks for the rest.

KarachiCorner Blog Aug 3, 2010

Amazing plugin i m using in my blog..

thanks

Trackbacks to this post.
Leave a Comment

Previous Post
«
Next Post
»
© 2010 - 2014 Graphic Design Junction.
Powered by Wordpress.