HTML | Steve Reynolds Blog

Posts Tagged ‘HTML’

Custom 404 with jQuery and jQuery UI

Thursday, September 10th, 2009

So I thought I would have a whizz at creating a custom 404 error message page, seeing as they’re so dull! What better way to do this, than with some sexy jQuery UI animations, and a snipsy bit of jQuery? This tutorial isn’t limited to 404 error pages, you can use this animation technique anywhere. Here’s the premise – a 404 that’s breaking, the page is literally cracking into bits:

Click to see my cracking demo

You’ve got to check it out above! You like? Here is how I did it.

HTML & CSS

First off I built a basic HTML structure – this obviously has key parts missing, but for the sake of the demo this is what we’ve got:

<html>
	<head>
		<title>404 - File Not Found - Reynoldsftw.com</title>

		<script src="js/jquery-1.3.2.min.js"></script>
		<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
		<script src="js/jquery-background.js"></script>
		<script src="js/controller.js"></script> 

		<LINK href="css/style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<div id="error_code">404</div>
	<div id="error_status">File Not Found</div>
	<div id="error_message">We're sorry you are seeing this page, please don't break the site again!</div>

	<div id="crack"></div>
	<div id="crack_overlay"></div>
	</body>
</html>

Some DIVS for the text content, and also a couple of empty DIVs that will hold two images. One being the crack, the second being an overlay .png file which we will animate over the top. Here’s the CSS for those two image DIVS:

#crack
{
	z-index: 1;
	position: absolute;
	width: 200px;
	height: 600px;
	background-image: url(../images/crack.png);
	left: 520px;
	top: 0px;
}

#crack_overlay
{
	z-index: 1000;
	position: absolute;
	width: 200px;
	height: 600px;
	background-image: url(../images/crack_over.png);
	background-position: 0px -1100px;
	left: 520px;
	top: 0px;
}

A couple of things to note – the overlay image is extremely large in height, therefore I am positioning it in the DIV so that in that position, the crack image/DIV underneath it cannot be seen (background-position-y: -1100px;). Both DIVs are absolutely positioned, as well as the overlay having a z-index higher than that of the image/DIV underneath. Okay, let’s “crack” on…

jQuery and jQuery UI

Next we have the jQuery UI and jQuery code. I’ve chosen to use the “shake”, “bounce” and “pulsate” jQuery UI effects, setting their options quite tightly so that the movements made are very minimal – giving the wall shaking, earthquakey effect. I’ve also set some timers to randomly shake various elements, as well as re-position the overlay so that more and more of the crack is revealed.

var coord = -1125;

$(document).ready(function() {

	setTimeout("shake()", 2000);
});

function reveal()
{
	setTimeout("moreCrack(coord)", 200);
}

function shake()
{
	coord = coord + 50;
	if(coord < -125)
	{
		$("#crack").effect("shake", {distance: 1}, 40, reveal);
		$("#error_code").effect("bounce", {distance: 5}, 50);
		$("#error_status").effect("pulsate", {times: 2}, 50);
	} else {

		$("#crack_overlay").hide();	

	}
}

function randomXToY(minVal,maxVal,floatVal)
{
  var randVal = minVal+(Math.random()*(maxVal-minVal));
  return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}

function moreCrack(coord)
{
	$("#crack_overlay").animate({backgroundPosition:"(0 " + coord + ")"});
	setTimeout("shake()", randomXToY(3500, 5000));
}

Okay, so on the document.ready() call, I’m setting up a timer to call the shake() function. This will then call a chain of functions to shake and reveal more of the crack (moreCrack()). I then start over again, but call shake at a random interval so that it is less predictable.

Finally, the shake() function keeps an eye on the position of the overlay DIV and stops the entire thing once there is no more to reveal.

Download the solution

Download Solution

As ever, here is the code for you all bundled up. Feel free to have a play and let me know how it goes. There are a few ways looking at it at how to streamline some of the code, but I thought I’d get it out there for you all to play with for now! Probably more soon.

Anyway – click the icon to the left or download here. Please let me know if you use it, or do something even cooler with it – stick an url in the comments!