Catch404 – A jQuery And CSS3 Modal Plugin For Handling Broken Links Elegantly

Hey guys. I’ve got a brand new jQuery plugin for you today. Let’s talk about the problem we’re going to be solving with it first: Broken links and 404 Errors are a problem that have plagued almost all websites since the dawn of the internet – they’re just a really bad user experience and we’ve all encountered them.

There’s nothing attractive about clicking a link hoping that it’ll take you to your destination only to find out that the page doesn’t exist. In most cases you’re left having to figure out what to do next – do you hit the back button? do you go googling the file to see if you can find it?. In some cases they can be a total show-stopper, so what can we do to change that?.

Today I’d like to present a new jQuery Plugin I wrote 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. So, why it this useful and how does it work?.

View Demo  Download Source

Why Is Catch404 Useful?

Let’s pretend that this is a broken link. Can you imagine that when your users click this link, instead of them being redirected to a 404 error on your site, a friendly modal message pops up on your current page saying that it’s not available?. In that same message box you can then give them a sense of direction so that they’re not lost – you could ask them to click on a contact link to report the link’s broken, offer an alternative mirror, recommend they do a site search for the file or just say that you’re experiencing hosting issues and the file will be back up soon. The choice is completely up to you. The benefit of Catch404 is that you can offer your users a better experience when errors are encountered on your site.

How Does Catch404 Work?

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.

Let’s take a look at the jQuery under the bonnet!

As you can see in the code snippet below, the most advanced piece of code in this plugin is the part that performs the above 404 handling. Because we’re connecting up to a third party site (Yahoo) in order to access this URL, there is going to be a wait of about a second or two during our query and this is the case for URLs that are valid as well as those that aren’t. To ensure your users are aware of whats going on it can be useful to display a progress overlay on your page with the label ‘Checking URL status..’ or something similar.

//Perform the Ajax JSON call to get the Yahoo YQL response for the URL
   function performAjaxCall(url,msg,container)
  {
    if(url.match('^http')){
      msg.html(' (checking...)');
      //connect to yahoo YQL to get a response for the URL
      $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
                "q=select%20*%20from%20html%20where%20url%3D%22"+
                encodeURIComponent(url)+
                "%22&format=xml'&callback=?",
        function(data){
          if(data.results[0]){
            var data = filterData(data.results[0]);
             //if the url passes the test, navigate to it
			donav(url);
          } else {
            msg.html(' (404!)');
            //otherwise display the modal error window
	    fourPop();
          }
        }
      );
    }

function fourPop(){
		var popWidth = 500; //dim[0].split('=')[1];
		var popID = '404message';
		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
		//Apply Margin to Popup
		$('#' + popID).css({
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		//Fade in Background
		$('body').append('
 
'); .
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
		return false;
	};
	//Close Popups and Fade Layer
	$('a.close, #fade').live('click', function() {
	  	$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();
	});
		return false;
	});
    });
  }

How Do I Use Catch404 On My Site Or Page?

Using Catch404 will help you keep those broken links and fail whales at bay, but the best news is it’s relatively easy to start using straight away. All you need to do is first include jQuery and catch404.js in your page and then call the catch404() function on a selector as follows – it should apply it to the links with that particular class or id and you’re all set. In the following case I’m using the class ‘ajaxcheck’ to indicate links on the page that I would like checked using Catch404.

This is a link to check

$(document).ready(function()
{
$(".ajaxcheck").catch404();
});

Demo and Download

To see a fully featured demo of Catch404 in action, just click the demo button below. You can also download the plugin and source files via the Download button if you’d like to start using it in your projects.

View Demo  Download Source

Thanks for reading and I hope Catch404 helps you to keep those broken links, 404′s and fail whales at bay. To share this article with your friends click Catch404 – A jQuery And CSS3 Modal Plugin For Handling Broken Links Elegantly now. Good luck with your projects!

- Addy.