1. Be More Specific with Selectors

When you are setting up jQuery to search through the DOM for a specific element, the more information you give it, the faster it will find the element. It is also faster to use IDs instead of classes.

Something like this will require going through the whole DOM structure to find the element:

$(".item")

These are way more efficient:

$("#item") // use IDs instead of Classes
$("p.first .item") // be more specific with the location

2. Always Use $(this)

If you are using a selector to traverse the DOM in search of an element to perform a specific function on, that element becomes stored and can be manipulated within the function by using $(this).

This code will traverse the DOM twice to get the same element:

$("#item").click(function() {
  $("#item").addClass('clicked');
});

This is the efficient way since the element is already stored within the $(this) call:

$("#item").click(function() {
  $(this).addClass('clicked');
});

3. Pass Multiple Selectors

If you want the same functions to occur on multiple elements, it is possible to group selectors together to increase performance and avoid repetitive traversing of the DOM.

// bad
$("p#one").fadeIn();
$("p#two").fadeIn();
$("p#three").fadeIn();

// good
$("p#one, p#two, p#three").fadeIn();

4. Use Multiple Properties and Values

Many jQuery methods accept multiple properties and values instead of just a single property and value pair. Including multiple properties will help speeds things up as it reduces the amount of jQuery objects that are created within your code.

// bad
$("img#one").attr('src', 'http://mysite.com/images/image.jpg');
$("img#one").attr('alt', 'My Image');

// good
$("img#one").attr({
  'src': 'http://mysite.com/images/image.jpg',
  'alt': 'My Image'
});

5. Add Styles with Classes or IDs

If you want to add multiple style changes to an element, it make more sense to use CSS to assign your styles to a Class or ID, and then add that Class or ID to the element.

Create your styles:

<style type="text/css">
.faster {
  background: #dd0000;
  color: #fff;
  padding: 5px 8px;
  }
</style>

And instead of doing this:

$("p").css({
  'background': '#dd0000',
  'color': '#fff',
  'padding': '5px 8px'
});

Do this:

$("p").addClass("faster");

6. Use Chaining

Once you have already selected an element, you can chain your commands using .end() instead of traversing the DOM multiple times to find the same element. Understanding chaining might take a bit of trial and error to really get the hang of it. Certain commands require that you .end() the chain and certain don’t. I’ll give more in depth tutorial on chaining in the future to help guide you through the ins and outs of it all.

//bad
$("div").fadeIn();
$("div p.one").slideDown();
$("div p.two").addClass('highlight');

//good
$("div")
  .fadeIn()
  .find('p.one')
  .slideDown()
.end()
  .find('p.two')
  .addClass('highlight');

These are just a few things that have helped me make my jQuery code run more efficiently. There are tons of books and resources out there that can help you take it to the next level to create the most efficient jQuery code imaginable. Here are a few I suggest:

• jQuery Enlightenment by Cody Lindley
• Learning jQuery
• jQuery for Designers

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Then you can use the font like this:

<style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
</style>

Check out a list of available font in the font directory. They are all licensed for commercial and non-commercial use.

First, you need to download some @font-face kits. I like to use kits supplied by Font Squirrel because they have an awesome library and all their fonts are 100% free for commercial use. For this example I’m going to use Riesling.

Once you have the files downloaded you need to add them to your Web site. Create a folder named “fonts” and place the riesling.eot and riesling.ttf files into the folder. Upload that to your site, in to the same directory as your style sheet.

Now open your style sheet and add the following:

/*
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * @vendor:     Bright Ideas
 * @licenseurl: http://www.fontsquirrel.com/license/Riesling
 *
 *
 */
 
@font-face {
	font-family: 'RieslingRegular';
	src: url('fonts/riesling.eot');
	src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype');
}

Everything is in place for you to use Riesling as a font on your Web site. Just add it to your CSS like you would any other font-family:

h1 {
  font-family: 'RieslingRegular', Arial, sans-serif;
}

The one thing you need to realize when using @font-face kits is that only modern browsers recognize it.

This is a sample paragraph that uses @font-face kits and CSS. If you see this paragraph in Riesling then your browser supports @font-face. If not, you might need to upgrade your browser to take advantage of @font-face kits.

<?php get_term_by( $field, $value, $taxonomy, $output, $filter ) ?>

$field: (string) (required) Either ‘slug’, ‘name’, or ‘id’. Default: None
$value: (string|integer) (required) Search for this term value. Default: None
$taxonomy: (string) (required) Taxonomy Name. Default: None
$output: (string) (optional) Constant OBJECT, ARRAY_A, or ARRAY_N. Default: OBJECT
$filter: (string) (optional) default is raw or no WordPress defined filter will applied. Default: ‘raw’

We are going to use it like this to get the ID with the category slug ‘tutorials’:

<?php 
$theCatId = get_term_by( 'slug', 'tutorials', 'category' );
$theCatId = $theCatId->term_id;
?>

If you insert a print_r() function you can echo out all the information that the get_term_by() function contains. Use something like this and see if there is other information that you might want to extract:

<?php 
$theCatId = get_term_by( 'slug', 'tutorials', 'category' );
print_r($theCatId);
?>

Then all you would have to do is use whichever term your see between those square brackets like so:

<?php 
$theCatId = get_term_by( 'slug', 'tutorials', 'category' );
$theCatId = $theCatId->description;
?>

Purchasing the book now will give you a lifetime subscription to all future updates. If you want to check out a sample, the Table of Contents and part of Chapter Three is available through this link.

Check out the official site for more information.

<a href='http://bavotasan.com/articles/win-a-one-year-subscription-to-layers-magazine/' title='Win a One-Year Subscription to Layers Magazine'>Win a One-Year Subscription to Layers Magazine</a>

On November 1st, 2009, I will randomly select a trackback and award the winner a one-year subscription to Layers Magazine.

This contest is only open to residents of Canada and the United States. The winner will be contacted through their Web site on November 1st, 2009. Contest ends October 31st at 11:59pm.

Here is some nice CSS to help anyone who wants to use <hr /> tags to clear sections of their site.

hr.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	}

Just use the following code whenever you want to clear with an <hr /> tag.

<hr class="clear" />

Add the jQuery script between your head tags.

<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>

Here is the function.

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});
</script>

Here is the CSS.

<style>
 
div.fadehover {
	position: relative;
	}
 
img.a {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
        }
 
img.b {
	position: absolute;
	left: 0;
	top: 0;
	}
 
</style>

And here is the body code.

<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>

All together you got something that looks like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
 
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});
</script>
<style>
div.fadehover {
	position: relative;
	}
 
img.a {
	position: absolute;
	left: 0;
	top: 0;
        z-index: 10;
	}
 
img.b {
	position: absolute;
	left: 0;
	top: 0;
	}
</style>
</head>
 
<body>
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>
</body>
</html>

Test it out below:

NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.

<div class="wrapper">
<div class="leftcontainer">
This is the left container.
</div>
<div class="rightcontainer">
This is the right container.
</div>
</div>

Next comes some styles.

div.wrapper {
width:800px;
height: 600px;
border: 1px solid #000;
position: relative;
}
 
div.leftcontainer {
width: 380px;
height: 560px;
background: #aaa;
position: absolute;
left: 20px;
top: 20px;
}
 
div.rightcontainer {
width: 360px;
height: 560px;
background: #444;
position: absolute;
right: 20px;
top: 20px;
}

Put it all together and this is what you should get.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Absolute $amp; Relative Positions</title>
<style>
div.wrapper {
width:800px;
height: 600px;
border: 1px solid #000;
position: relative;
}
 
div.leftcontainer {
width: 380px;
height: 560px;
background: #aaa;
position: absolute;
left: 20px;
top: 20px;
}
 
div.rightcontainer {
width: 360px;
height: 560px;
background: #444;
position: absolute;
right: 20px;
top: 20px;
}
</style>
 
</head>
 
<body>
 
<div class="wrapper">
<div class="leftcontainer">
This is the left container.
</div>
<div class="rightcontainer">
This is the right container.
</div>
</div>
 
</body>
</html>

The thing to remember with CSS positions is that you need to identify which div will contain the other. In the example above, div.maincontainer is styled position: relative; because it contains the other two divs. If we didn’t do this, then when we set div.leftcontainer to position: absolute; it would not position itself within the div container we want.

According to the website, WYSIWYM means What You See Is What You Mean.

“WMD produces clean semantic HTML, leaving presentation details like fonts and colors up to style sheets. But you’re not left in the dark about cosmetics; as you type, WMD’s live preview shows you exactly what your text will look like after the current styles have been applied.”

So far, I like the way it works, and the live preview it great.

NOTE: I no longer use this comment editor plugin.