Demo: Shake message box using jQuery

Click here to see me shake.

The Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
		
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		
	<title>Demo: Shake message box using jQuery</title>
			
	<style>
		body {
			font-family: helvetica, georgia;
		}
		div.error-message {
			font-size: 140%;
			font-weight: bold;
			margin: 0 auto;
			text-align: center;
			padding: 0.7em;
			-moz-border-radius: 8px;
			-webkit-border-radius: 8px;
			width: 90%;
			border:solid 1px #CC0000; 
			background:#F7CBCA;
			color:#CC0000;
			}
		</style>
			
		<script src="jquery-1.2.3.min.js"></script>
		<script src="jquery-ui-1.7.2.min.js"></script>
		<script>
			function shake() {
				$('.error-message').effect('shake', {times:3}, 50);
			}

			$(document).ready(function () {
				shake();
					
				$('.error-message').click(function() {
					shake();
				});
			});
		</script>
</head>
		
<body>
	<h1>Demo: Shake message box using jQuery</h1>
	<div class="error-message">Click here to see me shake.</div>
</body>
</html>