5 jQuery Must Have Code Snippets

If you haven’t heard of jQuery yet, than you are definitely missing out on one of the most dynamic and stable JavaScript Libraries. With thousands of plug-ins and added widgets it makes jQuery one of the leaders in javascript frameworks. jQuery is designed to cut all hand-code in half if not more simplifying HTML document traversing, event handling, animating, and Ajax interactions for more streamlined web development.

If you don’t already have a copy of javascript, one way that is growing fast is hot linking through Google – Which the idea is that it might already be cached in the users browser so there would be no downloading thus making a page load quicker.

Downloading jQuery

To do this, link google’s jQuery link (Note: T his one might be out dated so make sure you get the most up to date one). Insert this into the head tag of your page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

If you would like to manual download you can vist the link here to download. With that downloaded you’ll have to load it into your page by inserting this code. (Note: Depending on your file structure, you’ll have to change the path)

<script type="text/javascript" src="path/to/file/jquery.min.js"></script>

Now that you have jQuery installed correctly and working we can start adding functions for our website.

1.)Linkable Div’s

Make a whole div clickable to the user

Lets start off by creating a new javascript file called ‘functions.js’. Inside function.js we’re going to add our jQuery code. So you’ll also have to link this javascript to our web site document as we did to jquery.js

Clickable Box Screenshot

Adding the JavaScript

Now after that’s done, we’re first going to add a piece of code that tells the browsers to load this code when the page is finished (We need to actually do something with the function we create, so this calls the function into action.) So, insert the following code into the functions.js:

//Clickable Boxes
$(document).ready(function(){
						   
	$("#clickablebox").click(function(){
    	window.location=$(this).find("a").attr("href");return false;
	});

});

Adding the HTML

Now lets on to the HTML part of the project, add the following to your HTML document. This will create a div with a link and paragraph inside, the link is essential mainly because in order for the whole box to be clickable somewhere it needs to grab a URL inside of itself.

<div id="#clickablebox">
     <h1><a href="#">Click Me</a><h1>
     <p>This whole div will be clickable to the click you define in the above or anywhere inside the div</p>
</div>

Adding the CSS

This portion is just for aesthetics only, just to show how you and customize it how ever you want.

#clickablebox	{
	width: 250px;
	height: 250px;
	margin: 150px auto;
	background: #E6E6E6;
	padding: 15px;
	cursor: pointer;
}

Final Code

Here’s the final produced code, enjoy!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clickable Boxes</title>
<style type="text/css">
#clickablebox	{
	width: 250px;
	height: 250px;
	margin: 150px auto;
	background: #E6E6E6;
	padding: 15px;
	cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//Clickable Boxes
$(document).ready(function(){
						   
	$("#clickablebox").click(function(){
    	window.location=$(this).find("a").attr("href");return false;
	});

});
</script>
</head>

<body>
	<div id="clickablebox">
		<h1><a href="#">Click Me</a></h1>
		<p>This whole div will be clickable to the click you define in the above or anywhere inside the div</p>
	</div>
</body>
</html>

2.)Table Stripes (Zebra)

Stripe the tr’s of your table for an easier read.

So this ones an easy but effective tool for stripping a table to make it look more professional and easier to read.

Table Stripe Screenshot

Adding the JavaScript

In the previous snippet there was a ‘functions.js’ we created, we’ll use the same file or type of file for this one aswell. Inside the javascript file add the following code:

//Table Stripes
$(document).ready(function(){						   
	$("table tr:even").addClass('stripe');
});

Adding the HTML

The following is just a plain table with the added class of stripe – The class calls the jQuery to add the stripe class to every even tr.

<table border="0" cellspacing="0" cellpadding="0" class="stipe">
		<tr>
			<th>Ipsum</th>
			<th>Ipsum</th>
		</tr>
		<tr>
				<td>Ipsum</td>
				<td>Ipsum</td>
		</tr>
		<tr>
				<td>Ipsum</td>
				<td>Ipsum</td>
		</tr>
		<tr>
				<td>Ipsum</td>
				<td>Ipsum</td>
		</tr>
</table>

Adding the CSS

Again, aesthetically speaking I’m providing this to show a customized example :

body	{
	background: #111111;
}
table	{
	width: 585px;
	background: #333;
	color: #999;
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: -1px;
	font-style: italic;
	margin: 150px auto;
}
table tr	{
	height: 45px;
	text-indent: 20px;
}
.stripe	{
	background: #444;
}
table th	{
	background: #004d99;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	text-align: left;
}

Final Code

Here’s the finished product.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Stripes</title>
<style type="text/css">
body	{
	background: #111111;
}
table	{
	width: 585px;
	background: #333;
	color: #999;
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: -1px;
	font-style: italic;
	margin: 150px auto;
}
table tr	{
	height: 45px;
	text-indent: 20px;
}
.stripe	{
	background: #444;
}
table th	{
	background: #004d99;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	text-align: left;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//Table Stripes
$(document).ready(function(){						   
	$("table tr:even").addClass('stripe');
});
</script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" class="stipe">
		<tr>
			<th>Ipsum</th>
			<th>Ipsum</th>
		</tr>
		<tr>
				<td>Ipsum</td>
				<td>Ipsum</td>
		</tr>
		<tr>
				<td>Ipsum</td>
				<td>Ipsum</td>
		</tr>
		<tr>
				<td>Ipsum</td>
				<td>Ipsum</td>
		</tr>
</table>
</body>
</html>

3.)Swap Input Fields

In this snippet there is a default text placed in the specified input field (eg. Search, Textfield) and when the user goes to click the form, the text clears ready for the user to input their information.

Swap Values Screenshot

Adding the JavaScript

The following just indicates as the user clicks the input box the default text will clear and if there is nothing when the user clicks away then replace with original text.

// Form Swap Values
$(function() {
	swapValues = [];
		$("input.searchfield").each(function(i){
			swapValues[i] = $(this).val();
			$(this).focus(function(){
				if ($(this).val() == swapValues[i]) {
					$(this).val("");
				}
			}).blur(function(){
				if ($.trim($(this).val()) == "") {
					$(this).val(swapValues[i]);
			}
		});
	});
});

Adding the HTML

And now you add a simple input with the proper class:

<input type="text" value="Search..." maxlength="25" id="search-text" name="s" class="searchfield">

Final Code

Simple as that.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swap Values</title>
<style type="text/css">
body	{
	background: #111111;
}
div	{
	width: 250px;
	height: 40px;
	margin: 150px auto;
	background: #222;
	padding: 15px;
	cursor: pointer;
	text-transform: capitalize;
	border: 20px solid #1b1b1b;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
}
div a	{
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	letter-spacing: -3px;
}
input	{
	padding: 7px;
	color: #CCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -2px;
	width: 200px;
	margin: 50px 0 0 15px;
	display: block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
// Form Swap Values
$(function() {
	swapValues = [];
		$("input.searchfield").each(function(i){
			swapValues[i] = $(this).val();
			$(this).focus(function(){
				if ($(this).val() == swapValues[i]) {
					$(this).val("");
				}
			}).blur(function(){
				if ($.trim($(this).val()) == "") {
					$(this).val(swapValues[i]);
			}
		});
	});
});

</script>
</head>

<body>
	<div>
		<input style="margin: 0 auto;" type="text" value="Search..." maxlength="45" id="search-text" name="s" class="searchfield">
	</div>
</body>
</html>

4.) Back To Top Link

These ‘back to top’ links can be essential for pages that have a long vertical stretch, allowing the user to easily glide back to the top of the page to navigate smoothly. You will need an extra plugin script for this to take action, download the small javascript file and link it to your page as you did with the jQuery script. You can grab a copy of scrollTo here.

Back To Top Screenshot

Adding the JavaScript

This uses the class .top to define where what link is going to send the user to the top.

// Back To Top
$(document).ready(function(){ 
  $('.top').click(function() {  
	$(document).scrollTo(0,500);  
  });
}); 

Adding the HTML

All you need to do is make sure you have a link defined with the class .top

<a href="#" class="top">Back To Top</a>

Final Code

Simplicity.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swap Values</title>
<style type="text/css">
body	{
	background: #111111;
}
div	{
	width: 250px;
	height: 840px;
	margin: 150px auto;
	background: #222;
	padding: 15px;
	text-transform: capitalize;
	border: 20px solid #1b1b1b;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	position: relative;
}
div a	{
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	letter-spacing: -2px;
	font-size: 16px;
	bottom: 0px;
	display: block;
	position: absolute;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
// Back To Top
$(document).ready(function(){
  $('.top').click(function() {
	$(document).scrollTo(0,500);
  });
});
</script>
</head>

<body>
	<div>
		<a href="#" class="top">Back To Top</a>
	</div>
</body>
</html>

5.)On Hover Add/Remove Class

This one is almost essential for dumb fixes for IE6, as it doesn’t support most of the common hovers now in standard browsers – So YAY for jQuery as it comes to rescue!

On Hover Screenshot

Adding the JavaScript

//On Hover
$('.onhover').hover(  
   function(){ $(this).addClass('hover_style_class') },  
   function(){ $(this).removeClass('hover_style_class') }  
)

Adding the HTML

<div class="onhover">
Now I Hover!
</div>

Final Code

So, with some added css you can create a link with our first tutorial on clickable divs.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>On Hover</title>
<style type="text/css">
body	{
	background: #111111;
}
div	{
	width: 250px;
	height: 125px;
	margin: 150px auto;
	background: #222;
	padding: 15px;
	cursor: pointer;
	text-transform: capitalize;
	border: 20px solid #1b1b1b;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
}
div h1	{
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	letter-spacing: -3px;
}
.hover_style_class	{
	background: #282828;
	border-color: #1d1d1d;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//Clickable Boxes
$(document).ready(function(){
						   
	//On Hover
	$('.onhover').hover(  
	   function(){ $(this).addClass('hover_style_class') },  
	   function(){ $(this).removeClass('hover_style_class') }  
	)

});
</script>
</head>

<body>
	<div class="onhover">
		<h1>Hover My Div</h1>
		<p>This div demonstrates how javascript can be used to hover specific selectors.</p>
	</div>
</body>
</html>

, , , ,



Jun

20