The explosion of JavaScript libraries and frameworks such as jQuery onto the front-end development scene has opened up the power of JavaScript to a far wider audience than ever before. It was born of the need — expressed by a crescendo of screaming by front-end developers who were fast running out of hair to pull out — to improve JavaScript’s somewhat primitive API, to make up for the lack of unified implementation across browsers and to make it more compact in its syntax.

All of which means that, unless you have some odd grudge against jQuery, those days are gone — you can actually get stuff done now. A script to find all links of a certain CSS class in a document and bind an event to them now requires one line of code, not 10. To power this, jQuery brings to the party its own API, featuring a host of functions, methods and syntactical peculiarities. Some are confused or appear similar to each other but actually differ in some way. This article clears up some of these confusions.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

1. .parent() vs. .parents() vs. .closest()

All three of these methods are concerned with navigating upwards through the DOM, above the element(s) returned by the selector, and matching certain parents or, beyond them, ancestors. But they differ from each other in ways that make them each uniquely useful.

parent(selector)

This simply matches the one immediate parent of the element(s). It can take a selector, which can be useful for matching the parent only in certain situations. For example:

$('span#mySpan').parent().css('background', '#f90');
$('p').parent('div.large').css('background', '#f90');

The first line gives the parent of #mySpan. The second does the same for parents of all <p> tags, provided that the parent is a div and has the class large.

Tip: the ability to limit the reach of methods like the one in the second line is a common feature of jQuery. The majority of DOM manipulation methods allow you to specify a selector in this way, so it’s not unique to parent().

parents(selector)

This acts in much the same way as parent(), except that it is not restricted to just one level above the matched element(s). That is, it can return multiple ancestors. So, for example:

$('li.nav').parents('li'); //for each LI that has the class nav, go find all its parents/ancestors that are also LIs

This says that for each <li> that has the class nav, return all its parents/ancestors that are also <li>s. This could be useful in a multi-level navigation tree, like the following:

<ul id='nav'>
	<li>Link 1
		<ul>
			<li>Sub link 1.1</li>
			<li>Sub link 1.2</li>
			<li>Sub link 1.3</li>
		</ul>
	<li>Link 2
		<ul>
			<li>Sub link 2.1

			<li>Sub link 2.2

		</ul>
	</li>
</ul>

Imagine we wanted to color every third-generation <li> in that tree orange. Simple:

$('#nav li').each(function() {
	if ($(this).parents('#nav li').length == 2)
		$(this).css('color', '#f90');
});

This translates like so: for every <li> found in #nav (hence our each() loop), whether it’s a direct child or not, see how many <li> parents/ancestors are above it within #nav. If the number is two, then this <li> must be on level three, in which case color.

closest(selector)

This is a bit of a well-kept secret, but very useful. It works like parents(), except that it returns only one parent/ancestor. In my experience, you’ll normally want to check for the existence of one particular element in an element’s ancestry, not a whole bunch of them, so I tend to use this more than parent(). Say we wanted to know whether an element was a descendent of another, however deep in the family tree:

if ($('#element1').closest('#element2').length == 1)
	alert("yes - #element1 is a descendent of #element2!");
else
	alert("No - #element1 is not a descendent of #element2");

Tip: you can simulate closest() by using parents() and limiting it to one returned element.

$($('#element1').parents('#element2').get(0)).css('background', '#f90');

One quirk about closest() is that traversal starts from the element(s) matched by the selector, not from its parent. This means that if the selector that passed inside closest() matches the element(s) it is running on, it will return itself. For example:

$('div#div2').closest('div').css('background', '#f90');

This will turn #div2 itself orange, because closest() is looking for a <div>, and the nearest <div> to #div2 is itself.

2. .position() vs. .offset()

These two are both concerned with reading the position of an element — namely the first element returned by the selector. They both return an object containing two properties, left and top, but they differ in what the returned position is relative to.

position() calculates positioning relative to the offset parent — or, in more understandable terms, the nearest parent or ancestor of this element that has position: relative. If no such parent or ancestor is found, the position is calculated relative to the document (i.e. the top-left corner of the viewport).

offset(), in contrast, always calculates positioning relative to the document, regardless of the position attribute of the element’s parents and ancestors.

Consider the following two <div>s:

Querying (no pun intended) the offset() and position() of #innerDiv will return different results.

var position = $('#innerDiv').position();
var offset = $('#innerDiv').offset();
alert("Position: left = "+position.left+", top = "+position.top+"\n"+
      "Offset: left = "+offset.left+" and top = "+offset.top
)

Try it yourself to see the results: click here.

3. .css(‘width’) and .css(‘height’) vs. .width() and .height()

These three, you won’t be shocked to learn, are concerned with calculating the dimensions of an element in pixels. They both return the offset dimensions, which are the genuine dimensions of the element no matter how stretched it is by its inner content.

They differ in the data types they return: css('width') and css('height') return dimensions as strings, with px appended to the end, while width() and height() return dimensions as integers.

There’s actually another little-known difference that concerns IE (quelle surprise!), and it’s why you should avoid the css('width') and css('height') route. It has to do with the fact that IE, when asked to read “computed” (i.e. not implicitly set) dimensions, unhelpfully returns auto. In jQuery core, width() and height() are based on the .offsetWidth and .offsetHeight properties resident in every element, which IE does read correctly.

But if you’re working on elements with dimensions implicitly set, you don’t need to worry about that. So, if you wanted to read the width of one element and set it on another element, you’d opt for css('width'), because setting dimensions, just like in CSS, requires specifying a unit of measurement.

But if you wanted to read an element’s width() with a view to performing a calculation on it, you’d be interested only in the figure; hence width() is better.

Note that each of these can simulate the other with the help of an extra line of JavaScript, like so:

var width = $('#someElement').width(); //returns integer
width = width+'px'; //now it's a string like css('width') returns
var width = $('#someElement').css('width'); //returns string
width = parseInt(width); //now it's an integer like width() returns

Lastly, width() and height() actually have another trick up their sleeves: they can return the dimensions of the window and document. If you try this using the css() method, you’ll get an error.

4. .click() (etc) vs. .bind() vs. .live() vs. .delegate

These are all concerned with binding events to elements. The differences lie in what elements they bind to and how much we can influence the event handler (or “callback”). If this sounds confusing, don’t worry. I’ll explain.

click() (etc)

It’s important to understand that bind() is the daddy of jQuery’s event-handling API. Most tutorials deal with events with simple-looking methods, such as click() and mouseover(), but behind the scenes these are just the lieutenants who report back to bind().

These lieutenants, or aliases, give you quick access to bind certain event types to the elements returned by the selector. They all take one argument: a callback function to be executed when the event fires. For example:

$('#table td ').click(function() {
	alert("The TD you clicked contains '"+$(this).text()+"'");
});

This simply says that whenever a <div> inside #table is clicked, alert its text content.

bind()

We can do the same thing with bind, like so:

$('#table td ').bind('click', function() {
	alert("The TD you clicked contains '"+$(this).text()+"'");
});

Note that this time, the event type is passed as the first argument to bind(), with the callback as the second argument. Why would you use bind() over the simpler alias functions?

Very often you wouldn’t. But bind() gives you more control over what happens in the event handler. It also allows you to bind more than one event at a time, by space-separating them as the first argument, like so:

$('#table td').bind('click contextmenu', function() {
	alert("The TD you clicked contains '"+$(this).text()+"'");
});

Now, our event fires whether we’ve clicked the <td> with the left or right button. I also mentioned that bind() gives you more control over the event handler. How does that work? It does it by passing three arguments rather than two, with argument two being a data object containing properties readable to the callback, like so:

$('#table td').bind('click contextmenu', {message: 'hello!'}, function(e) {
	alert(e.data.message);
});

As you can see, we’re passing into our callback a set of variables for it to have access to, in our case the variable message.

You might wonder why we would do this. Why not just specify any variables we want outside the callback and have our callback read those? The answer has to do with scope and closures. When asked to read a variable, JavaScript starts in the immediate scope and works outwards (this is a fundamentally different behavior to languages such as PHP). Consider the following:

var message = 'you left clicked a TD';
$('#table td').bind('click', function(e) {
	alert(message);
});
var message = 'you right clicked a TD';
$('#table td').bind('contextmenu', function(e) {
	alert(message);
});

No matter whether we click the <td> with the left or right mouse button, we will be told it was the right one. This is because the variable message is read by the alert() at the time of the event firing, not at the time the event was bound.

If we give each event its own “version” of message at the time of binding the events, we solve this problem.

$('#table td').bind('click', {message: 'You left clicked a TD'}, function(e) {
	alert(e.data.message);
});
$('#table td').bind('contextmenu', {message: 'You right clicked a TD'}, function(e) {
	alert(e.data.message);
});

Events bound with bind() and with the alias methods (.mouseover(), etc) are unbound with the unbind() method.

live()

This works almost exactly the same as bind() but with one crucial difference: events are bound both to current and future elements — that is, any elements that do not currently exist but which may be DOM-scripted after the document is loaded.

Side note: DOM-scripting entails creating and manipulating elements in JavaScript. Ever notice in your Facebook profile that when you “add another employer” a field magically appears? That’s DOM-scripting, and while I won’t get into it here, it looks broadly like this:

var newDiv = document.createElement('div');
newDiv.appendChild(document.createTextNode('hello, world!'));
$(newDiv).css({width: 100, height: 100, background: '#f90'});
document.body.appendChild(newDiv);

delegate()

Another shortfall of live() is that, unlike the vast majority of jQuery methods, it cannot be used in chaining. That is, it must be used directly on a selector, like so:

$('#myDiv a').live('mouseover', function() {
	alert('hello');
});

But not…

$('#myDiv').children('a').live('mouseover', function() {
	alert('hello');
});

… which will fail, as it will if you pass direct DOM elements, such as $(document.body).

delegate(), which was developed as part of jQuery 1.4.2, goes some way to solving this problem by accepting as its first argument a context within the selector. For example:

$('#myDiv').delegate('a', 'mouseover', function() {
	alert('hello');
});

Like live(), delegate() binds events both to current and future elements. Handlers are unbound via the undelegate() method.

Real-Life Example

For a real-life example, I want to stick with DOM-scripting, because this is an important part of any RIA (rich Internet application) built in JavaScript.

Let’s imagine a flight-booking application. The user is asked to supply the names of all passengers travelling. Entered passengers appear as new rows in a table, #passengersTable, with two columns: “Name” (containing a text field for the passenger) and “Delete” (containing a button to remove the passenger’s row).

To add a new passenger (i.e. row), the user clicks a button, #addPassenger:

$('#addPassenger').click(function() {
	var tr = document.createElement('tr');
	var td1 = document.createElement('td');
	var input = document.createElement('input');
	input.type = 'text';
	$(td1).append(input);
	var td2 = document.createElement('td');
	var button = document.createElement('button');
	button.type = 'button';
	$(button).text('delete');
	$(td2).append(button);
	$(tr).append(td1);
	$(tr).append(td2);
	$('#passengersTable tbody').append(tr);
});

Notice that the event is applied to #addPassenger with click(), not live('click'), because we know this button will exist from the beginning.

What about the event code for the “Delete” buttons to delete a passenger?

$('#passengersTable td button').live('click', function() {
	if (confirm("Are you sure you want to delete this passenger?"))
	$(this).closest('tr').remove();
});

Here, we apply the event with live() because the element to which it is being bound (i.e. the button) did not exist at runtime; it was DOM-scripted later in the code to add a passenger.

Handlers bound with live() are unbound with the die() method.

The convenience of live() comes at a price: one of its drawbacks is that you cannot pass an object of multiple event handlers to it. Only one handler.

5. .children() vs. .find()

Remember how the differences between parent(), parents() and closest() really boiled down to a question of reach? So it is here.

children()

This returns the immediate children of an element or elements returned by a selector. As with most jQuery DOM-traversal methods, it is optionally filtered with a selector. So, if we wanted to turn all <td>s in a table that contained the word “dog” orange, we could use this:

$('#table tr').children('td:contains(dog)').css('background', '#f90');

find()

This works very similar to children(), only it looks at both children and more distant descendants. It is also often a safer bet than children().

Say it’s your last day on a project. You need to write some code to hide all <tr>s that have the class hideMe. But some developers omit <tbody> from their table mark-up, so we need to cover all bases for the future. It would be risky to target the <tr>s like this…

$('#table tbody tr.hideMe').hide();

… because that would fail if there’s no <tbody>. Instead, we use find():

$('#table').find('tr.hideMe').hide();

This says that wherever you find a <tr> in #table with .hideMe, of whatever descendancy, hide it.

6. .not() vs. !.is() vs. :not()

As you’d expect from functions named “not” and “is,” these are opposites. But there’s more to it than that, and these two are not really equivalents.

.not()

not() returns elements that do not match its selector. For example:

$('p').not('.someclass').css('color', '#f90');

That turns all paragraphs that do not have the class someclass orange.

.is()

If, on the other hand, you want to target paragraphs that do have the class someclass, you could be forgiven for thinking that this would do it:

$('p').is('.someclass').css('color', '#f90');

In fact, this would cause an error, because is() does not return elements: it returns a boolean. It’s a testing function to see whether any of the chain elements match the selector.

So when is is useful? Well, it’s useful for querying elements about their properties. See the real-life example below.

:not()

:not() is the pseudo-selector equivalent of the method .not() It performs the same job; the only difference, as with all pseudo-selectors, is that you can use it in the middle of a selector string, and jQuery’s string parser will pick it up and act on it. The following example is equivalent to our .not() example above:

$('p:not(.someclass)').css('color', '#f90');

Real-Life Example

As we’ve seen, .is() is used to test, not filter, elements. Imagine we had the following sign-up form. Required fields have the class required.

<form id='myform' method='post' action='somewhere.htm'>
	<label>Forename *
	<input type='text' class='required' />
	<br />
	<label>Surname *
	<input type='text' class='required' />
	<br />
	<label>Phone number
	<input type='text' />
	<br />
	<label>Desired username *
	<input type='text' class='required' />
	<br />
	<input type='submit' value='GO' />
</form>

When submitted, our script should check that no required fields were left blank. If they were, the user should be notified and the submission halted.

$('#myform').submit(function() {
	if ($(this).find('input').is('.required[value=]')) {
		alert('Required fields were left blank! Please correct.');
		return false; //cancel submit event
	}
});

Here we’re not interested in returning elements to manipulate them, but rather just in querying their existence. Our is() part of the chain merely checks for the existence of fields within #myform that match its selector. It returns true if it finds any, which means required fields were left blank.

7. .filter() vs. .each()

These two are concerned with iteratively visiting each element returned by a selector and doing something to it.

.each()

each() loops over the elements, but it can be used in two ways. The first and most common involves passing a callback function as its only argument, which is also used to act on each element in succession. For example:

$('p').each(function() {
	alert($(this).text());
});

This visits every <p> in our document and alerts out its contents.

But each() is more than just a method for running on selectors: it can also be used to handle arrays and array-like objects. If you know PHP, think foreach(). It can do this either as a method or as a core function of jQuery. For example…

var myarray = ['one', 'two'];
$.each(myarray, function(key, val) {
	alert('The value at key '+key+' is '+val);
});

… is the same as:

var myarray = ['one', 'two'];
$(myarray).each(function(key, val) {
	alert('The value at key '+key+' is '+val);
});

That is, for each element in myarray, in our callback function its key and value will be available to read via the key and val variables, respectively.

One of the great things about this is that you can also iterate over objects — but only in the first way (i.e. $.each).

jQuery is known as a DOM-manipulation and effects framework, quite different in focus from other frameworks such as MooTools, but each() is an example of its occasional foray into extending JavaScript’s native API.

.filter()

filter(), like each(), visits each element in the chain, but this time to remove it from the chain if it doesn’t pass a certain test.

The most common application of filter() is to pass it a selector string, just like you would specify at the start of a chain. So, the following are equivalents:

$('p.someClass').css('color', '#f90');
$('p').filter('.someclass').css('color', '#f90');

In which case, why would you use the second example? The answer is, sometimes you want to affect element sets that you cannot (or don’t want to) change. For example:

var elements = $('#someElement div ul li a');
//hundreds of lines later...
elements.filter('.someclass').css('color', '#f90');

elements was set long ago, so we cannot — indeed may not wish to — change the elements that return, but we might later want to filter them.

filter() really comes into its own, though, when you pass it a filter function to which each element in the chain in turn is passed. Whether the function returns true or false determines whether the element stays in the chain. For example:

$('p').filter(function() {
	return $(this).text().indexOf('hello') != -1;
}).css('color', '#f90')

Here, for each <p> found in the document, if it contains the string hello, turn it orange. Otherwise, don’t affect it.

We saw above how is(), despite its name, was not the equivalent of not(), as you might expect. Rather, use filter() as the positive equivalent of not().

Note also that unlike each(), filter() cannot be used on arrays and objects.

Real-Life Example

You might be looking at the example above, where we turned <p>s starting with hello orange, and thinking, “But we could do that more simply.” You’d be right:

$('p:contains(hello)').css('color', '#f90')

For such a simple condition (i.e. contains hello), that’s fine. But filter() is all about letting us perform more complex or long-winded evaluations before deciding whether an element can stay in our chain.

Imagine we had a table of CD products with four columns: artist, title, genre and price. Using some controls at the top of the page, the user stipulates that they do not want to see products for which the genre is “Country” or the price is above $10. These are two filter conditions, so we need a filter function:

$('#productsTable tbody tr').filter(function() {
	var genre = $(this).children('td:nth-child(3)').text();
	var price = $(this).children('td:last').text().replace(/[^\d\.]+/g, '');
	return genre.toLowerCase() == 'country' || parseInt(price) >= 10;
}).hide();

So, for each <tr> inside the table, we evaluate columns 3 and 4 (genre and price), respectively. We know the table has four columns, so we can target column 4 with the :last pseudo-selector. For each product looked at, we assign the genre and price to their own variables, just to keep things tidy.

For the price, we replace any characters that might prevent us from using the value for mathematical calculation. If the column contained the value $14.99 and we tried to compute that by seeing whether it matched our condition of being below $10, we would be told that it’s not a number, because it contains the $ sign. Hence we strip away everything that is not number or dot.

Lastly, we return true (meaning the row will be hidden) if either of our conditions are met (i.e. the genre is country or the price is $10 or more).

filter()

8. .merge() vs. .extend()

Let’s finish with a foray into more advanced JavaScript and jQuery. We’ve looked at positioning, DOM manipulation and other common issues, but jQuery also provides some utilities for dealing with the native parts of JavaScript. This is not its main focus, mind you; libraries such as MooTools exist for this purpose.

.merge()

merge() allows you to merge the contents of two arrays into the first array. This entails permanent change for the first array. It does not make a new array; values from the second array are appended to the first:

var arr1 = ['one', 'two'];
var arr2 = ['three', 'four'];
$.merge(arr1, arr2);

After this code runs, the arr1 will contain four elements, namely one, two, three, four. arr2 is unchanged. (If you’re familiar with PHP, this function is equivalent to array_merge().)

.extend()

extend() does a similar thing, but for objects:

var obj1 = {one: 'un', two: 'deux'}
var obj2 = {three: 'trois', four: 'quatre'}
$.extend(obj1, obj2);

extend() has a little more power to it. For one thing, you can merge more than two objects — you can pass as many as you like. For another, it can merge recursively. That is, if properties of objects are themselves objects, you can ensure that they are merged, too. To do this, pass true as the first argument:

var obj1 = {one: 'un', two: 'deux'}
var obj2 = {three: 'trois', four: 'quatre'}
$.extend(true, obj1, obj2);

Covering everything about the behaviour of JavaScript objects (and how merge interacts with them) is beyond the scope of this article, but you can read more here.

The difference between merge() and extend() in jQuery is not the same as it is in MooTools. One is used to amend an existing object, the other creates a new copy.

There You Have It

We’ve seen some similarities, but more often than not intricate (and occasionally major) differences. jQuery is not a language, but it deserves to be learned as one, and by learning it you will make better decisions about what methods to use in what situation.

While there are strict rules these days for writing semantic and SEO-compliant mark-up, JavaScript is still very much the playground of the developer. No one will demand that you use click() instead of bind(), but that’s not to say one isn’t a better choice than the other. It’s all about the situation.

Related Posts

You may be interested in the following related posts:

• Seven JavaScript Things I Wish I Knew Much Earlier In My Career
• The Seven Deadly Sins Of JavaScript Implementation
• Developing Sites With AJAX: Design Challenges and Common Issues

We appreciate the feedback of our Twitter followers who reviewed the article before it was published.

(al)

© Andy Croxall for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Coding, javascript, jquery, programming

You don’t have to always use Photoshop to style your images. Some cool effects can be achieved trough CSS, jQuery etc too and I strongly suggest you to continue reading to find out how to do it!

1. 

CSS3 Rounded Image With jQuery

Learn to wrap a span tag around the image element to achieve rounded images which will be displayed right in all modern browsers.

2.

Multiple Backgrounds and Borders with CSS 2.1

Learn how to use CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element.

3. 

Quick Tip: Multiple Borders with Simple CSS

Quick screencast showing you how to achieve multiple borders with simple CSS that way adding more depth to your designs. Much simplier version of previous tutorial.

4. 

Multiple Borders on Dynamically Sized Elements with CSS2

Third version of Nicolas Gallagher showing you what to do if you don’t the size of element.

5. 

Have Fun w/ Borders – Beveled, Pressed, & More!

Learn how to achieve pressed effect with CSS and some simple border style tricks to get various effects.

6. 

Polaroids with CSS3

Learn how to use some awesome CSS2 and CSS3 to turn an otherwise unassuming list of images into a full-blown set of Polaroid pictures.

7. 

Perfect Full Page Background Image

Learn how to add background image with CSS that fills entire page with image, no white space, scales image as needed, does not cause scrollbars and much more.

8. 

CSS3 Box Shadow and Image Hover Effects

Explore a new way of adding drop shadow effects just by editing a style sheet.

9. 

Fancy Thumbnail Hover Effect w/ jQuery

Achieve neat flash-style effect with CSS and jQuery.

10. 

How To Create Simple CSS Image Rollover Effect

In this tutorial you are going to learn how to create simple CSS image rollover effect with basic HTML and CSS styling.

11. 

Floatutorial

Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. Check out 4 tutorials dedicated to image floating.

12. 

Snazzy Hover Effects Using CSS

In this tutorial, you will be going over creating flexible advanced hover techniques using CSS2.1 properties.

13. 

Fast Rollovers Without

Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). Learn how to put all states into one image makes dynamic changes faster and requires no preload.

14. 

jQuery Rounded Corners

Lots of jQuery effects for rounded corners and much more patterns.

15. 

Easiest Tooltip and Image Preview Using jQuery

See 3 examples of using jQuery rollover preview script. This simple script can be applied for a variety of purposes.

16. 

Supersized – Full Screen Background/

Slideshow

jQuery Plugin

Superzided is a jQuery plugin that resizes images to fill browser while maintaining image dimension ratio and cycles Images/backgrounds via slideshow with transitions and preloading.

17. 

PNG Overlay

Have you ever run into the problem of creating a site with pictures given by the client, only to find later after they update their photography the original look and feel is not retained? This solution involves creating a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF. This way, a typical CMS installation can be configured so users can upload photos without having to worry about using any graphics program to apply filters.

18. 

BeZoom

Lighweight

JQuery

Zoom Plugin

BeZoom is a simple and lightweight alternative for JQZoom. It’s lighter and it’s easier to use.

19. 

Using jQuery for Background Image Animations

Play with jQuery and change the position of the background image to create the type of effect you’re looking for. There’s a new article answering the “How do I handle active states?” – Handling Active State for jQuery Animated Backgrounds.

20. 

5 Ways to Spice up Your Images with CSS

Here are a few simple tricks to add some flavor to your typical bland images. Using Photoshop to style each image can be tedious and difficult to maintain in the long run. These following CSS techniques will help you ease that pain.

21. 

How To:

Resizeable

Background Image

Learn how to set up resizeable background image with CSS. You have 3 options to choose from.

22. 

Style Your Image Links

Letting users know that particular section of our website is meant to be clicked on is best achieved through mouse over effect. Those “clickable” sections certainly include content images. Image Link is a script that enables you to apply additional styling to your image links.

23. 

Multiple Background Images with CSS

At times, it makes more sense to use background images than to insert them directly into the page. And while each element – like your body tag – can hold only one background image, they can be applied to several elements.

24. 

Image Borders with CSS

Really easy tutorial showing you how to add solid border to images using CSS.

25. 

CSS Sprites without Using Background Images

Learn how to apply hover effect without lot of knowledge about CSS sprites.

For simple users,who don’t code a lot, plugins is the best way to secure your blog. They’re free, easily usable and safe. This post assembles 35 best plugins to make your blog bulletproof. They’re each devised for different purposes, so you will get the best protection from each field.

Secure Your Login

1. Semisecure Login Reimagined

Semisecure Login Reimagined increases the security of the login process by using a combination of public and secret-key encryption to encrypt the password on the client-side when a user logs in. JavaScript is required to enable encryption. It is most useful for situations where SSL is not available, but the administrator wishes to have some additional security measures in place without sacrificing convenience.

2. Stealth Login

This plugin allows you to create custom URLs for logging in, logging out, administration and registering for your WordPress blog. Instead of advertising your login URL on your homepage, you can create a URL of your choice that can be easier to remember than wp-login.php, for example you could set your login URL to http://www.myblog.com/login for an easy way to login to your website.

3. Login LockDown

Login LockDown records the IP address and timestamp of every failed login attempt. If more than a certain number of attempts are detected within a short period of time from the same IP range, then the login function is disabled for all requests from that range. This helps to prevent brute force password discovery.

4. Chap Secure Login

Whenever you try to login into your website, you can use this plugin to transmit your password encrypted. The encryption process is done by the Chap protocol. By activating the Chap Secure Login plugin, the only information transmitted unencrypted is the username, password is hidden with a random number (nonce) generated by the session – and opportunely transformed by the MD5 algorithm. In the first login there will be an error, but don’t worry is only a technical error. Indeed in the next login’s operation, if the values are correct, there will not be errors.

Admin Area

1. Admin SSL

Admin SSL secures login page, admin area, posts, pages – whatever you want – using Private or Shared SSL. Once you have activated the plugin, you have to go to the Admin SSL config page to enable SSL.

Database

1. WP-DB-Backup

WP-DB-Backup allows you easily to back up your core WordPress database tables. You may also backup other tables in the same database.

2. Remote Database Backup

This plugin creates SQL dumps of your WordPress database. It is based on the WordPress Database Backup plugin (http://www.ilfilosofo.com/blog/wp-db-backup) – but it removes some of the security restrictions in the plugin to enable automated remote backups. You still need the admin user name and password to do a remote backup.

3. WP-DB Manager

This plugin allows you to optimize database, repair database, backup database, restore database, delete backup database , drop/empty tables and run selected queries. It supports automatic scheduling of backing up and optimizing of database.

4. BackUpWordPress

BackUpWordPress is a backup & recovery suite for your WordPress website. This plugin allows you to back up database tables as well as files and comes with a rich set of options.

5. Wordpress 1 Click EZ Backup

EZ Backup has been turned into a simple one click operation. Click the button and watch your files and database backup be created. You can create a backup of all your webspace files or backup just your wp-content folder all from this one plugin. Unlike the Full EZ Backup plugin this one does not require any special information such as usernames or passwords etc. This plugin costs $5.

6. myEASYbackup

This plugin allows you to back up, restore, migrate your WordPress installation, both files and mySQL tables with a single click. When performing a backup, myEASYbackup creates a compressed data set file that can be stored outside the WordPress installation directory. A list of all data sets on the server is also logged in the admin area.

Spam

1. Antispam Bee

AntispamBee protects blogs from digital rubbish. It is made up of sophisticated techniques and analyzes comments including pings. Also, for reasons of data privacy, the use of AntispamBee is a safe solution, as it is anonymous and registration-free.

2. NoSpamNX

NoSpamNX is the successor of Yawasp (Yet Another WordPress antispam plugin) and is a plugin to protect against automated comment spam (spambots). While Yawasp changed the names of the form fields in the comment template, NoSpamNX works without these modifications, but is equally effective. By eliminating the need for modifications the form field need maximum compatibility with other WordPress plugins or browser is ensured.

3. Akismet

Automattic Kismet (Akismet for short) is a collaborative effort to make comment and trackback spam a non-issue and restore innocence to blogging, so you never have to worry about spam again.

4. Math Comment Spam Protection

Asks the visitor making the comment to answer a simple math question. This is intended to prove that the visitor is a human being and not a spam robot. Example of such question: What is the sum of 2 and 9?

5. Defensio Anti-Spam

Defensio is an advanced spam filtering web service that learns and adapts to your behaviors and those of your readers. Advanced features such as support for OpenID, detailed statistics, charts, RSS feed of our comments (innocent and spam) and counter widget are also available.

6. SI CAPTCHA Anti-Spam

Adds CAPTCHA anti-spam methods to WordPress on the comment form, registration form, login, or all. In order to post comments or register, users will have to type in the code shown on the image. This prevents spam from automated bots. Adds security. Works great with Akismet. Also is fully WP, WPMU, and BuddyPress compatible.

7. reCAPTCHA

reCAPTCHA is an anti-spam method originating from Carnegie Mellon University which uses CAPTCHAs in a genius way. Instead of randomly generating useless characters which users grow tired of continuously typing in, risking the possibility that spammers will eventually write sophisticated spam bots which use OCR libraries to read the characters, reCAPTCHA uses a different approach.

8. Blackhole

Blackhole is a trap for bad bots. The concept is simple: include a hidden link to a robots.txt-forbidden directory somewhere on your pages. Bots that ignore or disobey your robots rules will crawl the link and fall into the trap, which then performs a WHOIS Lookup and records the event in the blackhole data file. Once added to the blacklist data file, bad bots immediately are denied access to your site.

9. Invisible Defender

This plugin protects registration, login and comment forms from spambots by adding two extra fields hidden by CSS. This approach gave me 100% anti-spam protection on one of my sites.

Other

1. Secure WordPress

Little help to secure your WordPress installation. This plugin removes error information on login page, adds index.html to plugin directory, removes the wp-version, except in admin area.

2. WP Security Scan

This plugin will scan your WordPress installation for security vulnerabilities and it will suggest some corrective actions.

3. AskApache Password Protect

This plugin doesn’t control WordPress or mess with your database, instead it utilizes fast, tried-and-true built-in Security features to add multiple layers of security to your blog. This plugin is specifically designed and regularly updated specifically to stop automated and unskilled attackers attempts to exploit vulnerabilities on your blog resulting in a hacked site.

4. TAC (Theme Authenticity Checker)

TAC stands for Theme Authenticity Checker. Currently, TAC searches the source files of every installed theme for signs of malicious code. If such code is found, TAC displays the path to the theme file, the line number, and a small snippet of the suspect code. As of v1.3  TAC also searches for and displays static links.

5. HTTP Authentication

The HTTP Authentication plugin allows you to use existing means of authenticating people to WordPress. This includes Apache’s basic HTTP authentication module and many others.

6. AntiVirus

Viruses, worms and malware exist for WordPress and could easily attack your WordPress installation. AntiVirus for WordPress monitors malicious injections and warns you of any possible attacks. It also has multilingual support.

7. Secure Files

This plugin allows you to upload and download files from outside of your web document root for security purposes. It can be used to can restrict file downloads to users that are logged in, or have a certain user level.

8. Replace WP-Version

Security your WordPress-Installation and eliminate or replace your wp-version and database-version on easy way with a small plugin. If you’re running an older version of WordPress, anyone can view source to see what attacks might work against your blog. This plugin replaces the WP-version with a random string < WP 2.4 and eliminate WP-version > WP 2.4.

9. WP Email Guard

WP Email Guard protects your email addresses included on any post or page from being crawled by spammers. It converts every email written within your post body into a JavaScript code, so the emails is readable and can be clicked by humans only. Spammers can’t crawl JavaScript.

10. WordPress File Monitor

Monitors your WordPress installation for added/deleted/changed files. When a change is detected an email alert can be sent to a specified address.

11. WP Dephorm

WP-Dephorm protects your users from the prying eyes of phorm. This is achieved by setting a cookie to opt out of the phorm information mining. Your blog viewers will not have their information stored and used in marketing campaigns whilst viewing your site.

12. WordPress Firewall

This WordPress plugin investigates web requests with simple WordPress-specific heuristics to identify and stop most obvious attacks. There exist a few powerful generic modules that do this; but they’re not always installed on web servers, and difficult to configure.

13. Secure Contact

SecureContact is a drop in form for users to contact you, based on the WP Contact Form plugin by Ryan Duff. It offers enhanced security by using captcha images.

14. Fast and Secure Contact Form

Fast and secure contact form for WordPress. This contact form lets your visitors send you a quick E-mail message. Blocks all common spammer tactics. Spam is no longer a problem. Includes a CAPTCHA and Akismet support. Additionally, the plugin has a multi-form feature, optional extra fields, and an option to redirect visitors to any URL after the message is sent. Super customizable.

15. Ultimate Security Check

The Ultimate Security Check plugin helps you identify security problems with your WordPress installation. It scans your blog for hundreds of known threats, then give you a security “grade” based on how well you have protected yourself.

16. Content Security Policy

Content Security Policy prevents content injection attacks by allowing admins to specify which sites they trust to serve JavaScript and other types of content in their site. Any content which is not explicitly allowed by the policy will be blocked from loading.

Further Resources

• Top 10 ways to stop spam in WordPress
• WordPress Security Tips and Hacks
• 12 Essential Security Tips and Hacks for WordPress
• 13 Vital Tips and Hacks to Protect Your WordPress Admin Area
• 20+ Powerful WordPress Security Plugins and Some Tips and Tricks
• 11 Ways To Secure Your WordPress Blog
• 10 Things to do After Installing WordPress

I have assembled 25 beginner level tutorials for you to start knowing and exploiting jQuery and it’s powerful tools. After reading these guides and tutorials you will be able to proceed and start testing jQuery’s limits.

1. jQuery for Complete Beginners: Part 1

This is the first part of our series walking you through the process of learning the hugely popular JavaScript library jQuery from scratch. This series is aimed at people who have a strong knowledge of HTML and CSS and will include such topics like what is jQuery and how to include it into your code.

2. jQuery for Complete Beginners: Part 2

In this lesson you are going to learn how to select elements through their relationship with the element we are already interacting with. This may seem complicated, but it’s in fact very straightforward.

3. jQuery for Complete Beginners: Part 3

In this part you are going to put the skills you’ve learned in two past parts into practice and create a basic accordion.

4. jQuery for Absolute Beginners: The Complete Series

Fifteen video tutorials that teach you exactly how to use the jQuery library. You will start by downloading the library and eventually work our way up to creating an AJAX style-switcher.

5. jQuery Tutorials for Designers

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

6. New to jQuery? Don’t be Scurred…

Once you get the jQuery basics down it’s not very hard to pull of some neat effects. Soh Tanaka teaches you 4 basic jQuery features.

7. Getting Started With jQuery

This guide is an introduction to the jQuery library. Basic knowledge of JavaScript and the document object model (DOM) is required. It starts from ground up and tries to explain details where necessary. It covers a simple hello world example, selector and event basics, AJAX, FX and usage and authoring of plugins.

8. Getting Started with jQuery

In this article, author will be introducing and laying the groundwork for advanced JavaScript development with jQuery. In this article he’s going beyond just quick-start syntax and instead provide a solid overview of jQuery and discuss the benefits of using such a library.

9. jQuery Essentials Presentation

Modern and good-looking presentation assembling all the summary of jQuery features and power.

10. Useful and Handy jQuery Tips and Tricks

As you get more familiar with the basics you’ll need to learn some tricks and cheats. This article will assemble all the jQuery tips and tricks and cheat sheets that web offers in a single page.

11. Questions and Answers From the List

Answers to some common questions beginners have about jQuery.

12. jQuery Tutorial for Beginners: Nothing But the Goods

This fast-paced tutorial should be able to get beginners up and running with jQuery very quickly, while also providing a good overview of what jQuery is capable of.

13. Introduction to jQuery

This is a very basic introduction to including jQuery on your web page and getting started writing a few functions.

14. Intro to jQuery 2

Continuation of exploring the possibilities of jQuery. Revisit some of the old functions and make them do some smarter things. Explore IF/ELSE statement, AJAX-y .load() function, the CSS function, and then finish off by writing out your own custom function and going over how that layer of abstraction can help you keep your code clean.

15. Simple Guide: How To Get Started With jQuery

In this article, you will have a look at how to get started with jQuery, and writing your first script!

16. Selectors, Animation, and AJAX – jQuery Tutorial And Examples

For part two of our jQuery series, you will get a look at some special selectors, the animation method, and simple AJAX calls. Be sure to check out the demo for each section for an idea of how you could implement some of these ideas and scripts!

17. What Is jQuery?

This article provides a gentle introduction to jQuery and its uses.

18. Getting Started with jQuery

Find out how to start coding with the jQuery JavaScript library. Shows how to install jQuery, and explores jQuery objects and the jQuery() function. Example code included.

19. How jQuery Beginners can Test and Improve their Code

Making small changes to your code improves the readability and/or performance significantly. Here are some tips to get you on your way to optimizing your code.

20. Getting Friendly With jQuery

This article is the summation of Rajesh Pillai’s notes collected during my attempt to learn jQuery through various books and websites.

21. jQuery for Beginners – Step by Step Tutorial

Three series tutorial teaching you the basics step by step.

22. Beginner’s Guide to jQuery

Another quick guide introducing you to jQuery.

23. jQuery For Absolute Beginners

This video tutorial will show beginners exactly how to get started with jQuery.

24. JQuery Basics

25. The jQuery Basics

This tutorials teaches you some basic jQuery uses like showing/hiding and animation.

Further Resources

• Elated
• jQuery For Designers
• Soh Tanaka
• Net.Tutsplus
• Learning jQuery

• 20 Best And Highly Useful jQuery Tutorials For Designers And Beginners
• 45+ New jQuery Techniques For Good User Experience
• 40+ Excellent jQuery Tutorials
• 51+ Best of jQuery Tutorials and Examples
• Best jQuery Tutorials – March 2010
• 30 Jquery Slider/Slideshow Image Gallery Plugins And Tutorials
• 30 Stunning jQuery Slider Plugins and Tutorials To Boost Your Work
• 35 jQuery Tutorials You Must Know
• 21 Useful and Practical jQuery Tutorials You Might Have Missed

Below you will find a lot of tutorials each teaching you something different and appropriate. You will also find quite lot CSS3 tutorials, because CSS3 offered features are being used more and more and you should practise them too.

Menus

1. Bulletproof CSS Sliding Doors

In this tutorial author shows you solution how to preclude common problems with implementations.

2. CSS Sliding Door Using Only One Image

In this tutorial, author will show you how to code the navigation bar using only 1 image.

3. CSS Dropdown Menu Tutorial

Learn how to create simple horizontal CSS dropdown and popout menu.

4. Pure CSS Menu With Infinite Sub Menus Tutorial

Today we are going to cover how to build a pure CSS menu with infinite sub menus; an area of CSS that is seldom talked about, poorly written or misconceived. This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript.

5. Pure CSS Vertical Menu

Following this tutorial you are going to build the second most common menu navigation, the vertical navigation menu. Here you are going to be using only pure CSS and un-ordered lists to create your vertical navigation menu with three levels of pop outs. This version of the vertical navigation menu will work in IE5, IE6, IE7 and IE8 as well as FF and Safari.

6. Horizontal Menus That Grow on You

In this quick tutorial, author is  going to discuss how to create a neat little menu effect. You’re going to create a horizontal row of boxes containing link text. When you move the mouse over one of these boxes, it’s going to get taller and the text larger and bold.

7. Advanced CSS Menu

This tutorial will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position  property.

8. Horizontal Subnav with CSS

Learn how to create simple submenu with CSS and a touch of jQuery for IE6.

9. Advanced CSS Menu Trick

This tutorial will teach you how to create powerful and solid navigation. What you want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.

10. How to Create a CSS Menu Using Image Sprites

Follow these steps to build your own modern navigation bar design, starting with the initial steps in Photoshop to flesh out the design, then moving on to constructing the HTML and styling with the CSS image sprite technique.

11. CSS Graphic Menu With Rollovers

3 part tutorial showing you how to make clean, nice vertical menu using Adobe Photoshop, then slice your web graphic and finally code website menu using unordered lists, and valid xHTML/CSS.

12. CSS Dock Menu

If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface  and some great looking icons. Here author will show you how to implement it to your web page.

13. Vertical CSS Menu With a ‘Behavior’ File

In this tutorial you will build a vertical CSS menu with rollover submenu’s. This menu will be written in CSS and HTML, and will use a so-called ‘behavior’ file.

14. CSS Vertical Navigation with Teaser

Learn how to code simple vertical menu a simple way to display some teaser information for your vertical navigation.

15. CSS Sprite Navigation Tutorial

This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.

16. CSS3 Dropdown Menu

Learn how to create Mac-like multi-level dropdown menu that author’s created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome.

17. Create an Advanced CSS Menu Using the Hover and Position Properties

Starting with a photoshop file and finishing with semantic HTML and CSS, you’ll be creating an advanced CSS navigation menu using its :hover  and position properties.

18. Create Vimeo-like Top Navigation

Learn how to re-create Vimeo style dropdown menu. The menu drops down when you hover over the search box and it offers you different search options that you can choose and narrow your search. The base for this tutorial is simple CSS drop down menu based on unordered list

19. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial author would like to go over how to create a sexy drop down menu that can also degrade gracefully.

20. How to Create Dropdown CSS Menu

This CSS menu will have submenus and will use the web-techniques HTML, CSS and the “whatever:hover” behavior file to make things work in Firefox and IE6+.

21. CSS Overlapping Tabs Menu

In this tutorial you’re going to learn to create a simple, yet cool menu with overlapping tabs.

22. Rounded corner CSS navigation bar with jQuery

First, check out how to Turn your HTML list into a navigation bar with CSS. Then this tutorial will show you how to add some nice round corner effect to your anchor elements with jQuery. And yes, you will be doing this without using any image.

23. Simple CSS Vertical Menus

In this tutorial you will learn the basics of creating simple vertical menus for your website using only HTML and CSS.

24. CSS Navigation Rollovers With Drop-downs

First read Super Fantastic CSS Navigation Image Rollovers, then come back to this tutorial and learn how to code your images into working CSS menu.

25. Navigation Bar With Tabs Using CSS and Sliding Doors Effect

Read short explanation about how to use PHP URL variables to set a tab “active” when the relative page is loaded.

26. Simple CSS Vertical Menu Digg-like

This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu.

27. jQuery Style Menu With CSS3

In this tutorial you will learn how to create an animated sliding vertical menu using CSS3 without any JavaScript.

28. Apple’s Navigation Bar Using Only CSS

Following this article you are going to learn how to make the toolbar below, using nothing but HTML and CSS.

29. Create a Slick Menu using CSS3

In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

30. Create Windows 7 Start Menu Using CSS3 Only

Test CSS3 offered opportunities and create slick Windows 7 menu using only CSS3.

Buttons

1. Gradient Buttons with CSS3

A quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button showing people just how amazing CSS3 is.

2. Liquid & Color Adjustable CSS Buttons

Learn how to save time and adjust button color with CSS.

3. CSS3 Gradients: No Image Aqua Button

Create Mac OS X style aqua button with CSS3 using no images.

4. Sexy CSS Hover Button

Learn how to bring two Photoshop files into functional web buttons.

5. Creating buttons with CSS3

The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.

6. Roll Your Own Google Buttons

Create Google style buttons with CSS3 where no images are required.

7. How to make sexy buttons with CSS

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS.

8. Better Button and Nav Interactions

Create iPhone style glowing button using CSS3.

9. Roll Over Button Tutorial

In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button who’s hover state image is preloaded.

10. How to Build a Simple Button with CSS Image Sprites

Take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example. This one’s a good one for anyone getting started with CSS!

11. Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We’ve got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

12. Pretty CSS3 buttons

Learn to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers.

13. How To Design A Sexy Button Using CSS

Learn how to create simple good-looking button getting it by almost only by CSS.

14. Radioactive Buttons

Create awesome looking and engaging buttons by using CSS animations to give them all that radioactive feel.

15. Beautiful CSS Buttons With Icon Set

This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set.

16. Building Beautiful Buttons With CSS Gradients

We’ll build a nice-looking embossed and beveled button using gradients and existing CSS properties, where you don’t have to regenerate images every time you change text, pages will load much faster because you don’t have to download separate images and it allows text to be easily localized.

17. CSS3 Gradient Buttons

In this tutorial author’s going to show you how to put the CSS gradient feature in a good practical use. Check out demo with a lot of buttons.

18. Build Kick-Ass Practical CSS3 Buttons

Learn to take advantage of modern CSS3 features and create pretty button just with code.

19. CSS Only Button

Another tutorial showing you that you can live with CSS only.

20. How to Make Nice CSS Buttons

Learn how to use pseudo-class and apply the same CSS styling for all your website’s buttons.

21. Cross-Browser Rounded Buttons with CSS3 and jQuery

Simple a solution for developers to create flexible buttons with easily changeable text.

22. Making CSS Rollover Buttons

In this tutorial, we’ll show you how to create easy, search-engine-friendly rollovers, using nothing but HTML, CSS and images. No JavaScript or IMG tags in sight!

23. Recreating CNN’s Beveled Navigation Buttons with Pure CSS

This brief tutorial shows beginners that creating images for CNN’s beveled style navigation isn’t necessary.

24. Creating a Glassy Non Div Navigation Bar

This tutorial will show you how to style and control lists in CSS, as well as showing you the valid ways of using lists and where to use them.

25. CSS Button Sprites Tutorial

In this post author will show you how to implement the image of a two-state button into your design.

Today we will be featuring calendar date pickers to let you output planners, calendars even more easier, most of these date pickers are built on jQuery and jQuery UI (User Interface).

I would consider these date pickers as frameworks with great functionality, but most of them require modifying and some styling, but I think it’s really acceptable since each project needs it’s own design and you should change style of calendar plugin too. These plugins will help you and your visitors keep track what’s happening in specific project and help to organize time!

1. Create astonishing iCal-like calendars with jQuery

This is tutorial how to make kind a like iPhone calendar application.

Download Now | View Example

2. BlueShoes JS DatePicker Component

The DatePicker lets users easily select valid dates from a dropdown calendar. No need to worry about date formats, by picking dates it’s always correct.

Download Now | View Examples

3. Calendar – A Javascript class for Mootools

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers I have implemented over the years and has been completely re-written for Mootools. I have tried to include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Use the links below to see what features are available in Calendar and how it might enhance the accessibility, usability and validation of form elements on your website.

Download Now | View Example

4. jQuery Calendar Widget Plugin

jQuery Calendar Widget Plugin is a simple jQuery Calendar Widget Plugin with a month view. You can specify which month you would like to display or have it display the current month. With just 100 lines of Javascript code, this plugin is light-weight and perfect for its purpose.

Download Now | View Example

5. JavaScript Calendar Component

Calendar Component that is very customizable and extendable.

Features:

• Create any numbers of months per calendar.
• Set the weekend, days off, holidays (dates off), start day of the week.
• Start and end date.
• Multi selection with limits or without.
• Skinnable (using CSS).
• Can have any number of calendars in any page.
• Optimized for best performance.

View Example

6. Simple Calendar Widget

This flexible, simple pop-up calendar is written to work across browsers. It’s fully commented and customisable for language, colours and date format. The pop-up displays a month at a time from a specified range of years.

The optional input date determines the initial month displayed. The year can be in two or four digits while the month can be digits or a month name abbreviation that can easily be set up for any language. Any date or day of the week can be disabled (and re-enabled) using JavaScript on the calling page.

This is ideal for combination with server-side technologies to produce a professional application.

Download Now | View Example

7. DatePicker

Date Picker component with a lot of options and easy to fit in your web application.

Features:

• Flat mode – as element in page
• Multiple calendars in the component
• Allows single, multiple or range selection
• Mark dates as special, weekends, special days
• Easy to customize the look by changing CSS
• Localiation for months’ and days’ names
• Custom day to start the week
• Fits into the viewport

Download Now | View Example

8. Calendar System

Calendar System – the basic calendar.

Download Now | View Example

9. Tigra JavaScript Calendar

Tigra Calendar is a free cross-browser JavaScript Calendar control, it improves the user experience by enabling a drop-down calendar for date fields in HTML forms.

Download Now | View Example

10. Plans

One installation of plans can support many calendars. Calendars can share information with each other. Each calendar is managed independently (unique password, custom options, custom look & feel).

Multiple calendars running on the same installation of plans can be “embedded” in completely different websites. Plans uses a powerful and flexible recurring event model.

Plans supports multiple languages. Weeks can start on days other than Sunday. Plans supports arbitrary date formats (mm/dd/yy, dd/mm/yy, etc.) Plans can store data in flat files or an SQL database.

11. jQuery UI Datepicker

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.

You can use keyboard shortcuts to drive the datepicker:

• page up/down – previous/next month
• ctrl+page up/down – previous/next year
• ctrl+home – current month or open when closed
• ctrl+left/right – previous/next day
• ctrl+up/down – previous/next week
• enter – accept the selected date
• ctrl+end – close and erase the date
• escape – close the datepicker without selection

Download Now | View Example

12. The sliding date-picker

This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly. Besides this, when the user decides to manually change the dates, the bar is automatically adjusted to the corresponding dates.

Download Now | View Example

13. FullCalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar).

It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

Download Now | View Example

14. Unobtrusive Date-Picker Widget

• Fully keyboard accessible
• Multiple date formats and date dividers supported
• Unobtrusive and nameSpace friendly
• Fully skinnable with CSS
• Both upper and lower date limits can be set
• Certain days of the week can be disabled
• Certain, dates can be disabled/enabled (and wildcards used to stipulate the dates in question)
• Includes “smart” localisation (16 languages currently available)
• Bespoke days of the week can be highlighted
• Works with single text inputs, split text inputs or select lists
• It’s free to use, even commercially (Released under a CC share-alike license)

Download Now | View Example

15. Simple jQuery date-picker plugin

Features:

• works on one or more text input elements (<input type="text" ... />)
• highlights a preset date (first looking for a value in the input, then a passed option / default, then just selects today)
• closes when either a date is picked, the “today” button is hit, or the “close” button is hit
• allows fast navigation using a <select> field for months and years
• advances and reverses months with a hit of the « or » buttons
• automatically hides the « or » buttons when either the start or end of the date range is reached
• and much more…

View Example

16. jQuery CalendarPicker

This component is a light-weight calendar/date-picker.

Features:

• supports internationalization (supports do not necessary means it is implemented:-) )
• supports changing current date
• supports mouse wheel scrolling
• supporting (deferred) callback on date selection
• supports variable number of years, months and days
• supports next/prev arrows

Download Now | View Example

17. Timeframe

Timeframe is open source, tested, and available for forking, pushing, and pulling at Github. It can select dates “from – to”.

Download Now | View Example

18. Date / Time Picker

Date / Time Picker is a easy date picker control. To open the calendar, click the icon at the right side of the input box.

Download Now | View Example

19. YUI Library: Calendar Control

This is another example of easy date picker. Calendar has three required dependencies: the YAHOO Global object, the Event Utility, and the DOM Collection.

Download Now | View Example

20. Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework

This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges. It is an update from a former version.

Download Now | View Example

21. The New Coolest DHTML Calendar

Download Now | View Example

22. jMonthCalendar

jMonthCalendar is a full month calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. The plugin does have extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. jMonthCalendar now supports hover extension points, hover over an event and trigger an event like an alert(); By default the events would each have a URL supplied that would link to a details page.

Download Now | View Example

23. VCalendar

VCalendar (Virtual Web Calendar) is an open source Web calendar application for posting and maintaining events and schedules online, in calendar format. This is an excellent and free solution for use by online Web communities and any commercial and non-commercial organizations. Unlike any other online calendars, VCalendar comes with source code in multiple programming languages: PHP, ASP and ASP.NET (C#); with potential for adding more technologies in the future.

Download Now | View Example

24. PHP Calendar

All day and month names are automatically generated specific to your locale. Allows you to choose what day your weeks start on.

Download Now | View Example

25. Multiday Calendar Datepicker JQuery Plugin

Multiday Calendar Datepicker JQuery Plugin is a nicely animated calendar datepicker for multi-day selection with multi-month display. Allows for a sequence of months to reside side by side and for the user to select a number of consecutive days. This is great for lodging reservation systems, ticket purchasing systems, etc.

Download Now: JS file and CSS file | View Example

26. Easy PHP Calendar

The Easy PHP Calendar is a powerful PHP calendar script that is easily integrated into web sites and is simple to customize. This attractive, full-featured calendar is suitable for display on a calendar of events page, home page, or any other page that needs a calendar.

Download Now | View Example

27. jQuery Date Input

Date Input is a no frills date picker plugin for jQuery. It is lightweight, fast and pretty by default.

Download Now | View Example

28. jQuery DatePicker

jQuery DatePicker is an clean, unobtrusive plugin for jQuery which allows you to easily add date inputing functionality to your web forms and pages. Designed from the ground up to be flexible and extensible, the date picker can be used in unlimited ways to allow you to add calendar widgets to your pages.

Download Now | View Example

29. dynDateTime

This jQuery plugin makes it easy to add date and time selection to textfield inputs. This supports date and time, and renders the value to a single field in a configurable format.

Download Now | View Example

30. Week Calendar

The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

Download Now | View Example

jQuery possibilities are growing rapidly and there are many people who play with code and discover some amazing combinations achieving effects you have never seen before!

You will find here many plugins which will help to add motion, 3d effects and animation to your website! This list will blow your mind away with possibilities – ready?!!!

1. AJAX-ZOOM – Image Zoom – Pan Gallery plugin

AJAX-ZOOM is a sophisticated image zoom & pan gallery plugin based on jQuery and PHP. With over 250 options it is very flexible and can be integrated into any website.

Download Now | View Examples

2. Image Rotator

Simply rotates an image by a certain degree or allows the user to rotate an image by dragging around a central axis.

Download Now | View Example

3. Cloud Zoom

The Cloud Zoom plugin is comparable to commercial image zoom products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

Download Now | View Example

4. jQuery Before/After Plugin

Download Now | View Example

5. jQDock

Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.

Download Now | View Example

6. Visual Lightbox – Create fantastic lightbox-style galleries and slideshows. jQuery LightBox Plugin.

Download Now | View Examples

7. Image Bubbles

Image Bubbles is a cool Flash-like effect that causes an image to bubble up and expand whenever the mouse rolls over it from within a series of images.

Download Now | View Example

8. jQuery Panel Magic

jQuery Panel Magic is a new take on website navigation. Using a matrix or grid style layout for your website, you can easily implement this plugin for small websites and web applications. It gives you more room for your design and provides a cool new approach to a sitemap.

Download Now | View Example

9. iCheckbox

Convert a checkbox or multiple checkboxes into iphone style switches.

Download Now | View Example

10. jqFancyTransitions

jqFancyTransitions is plugin for displaying your photos as slideshow with fancy transition effects.

Download Now | View Example

11. Images In All Size jQuery Plugin

Download Now | View Example

12. Text Effects

Download Now | View Examples

13. jCoverflip

jCoverflip is a jQuery cover flow widget that allows website administrators to present featured website content in a visually appealing manner. The widget is quick setup and is highly configurable, and can run as a Drupal Module or standalone.

Download Now | View Example

14. BxSlider

bxSlider is a jQuery content slider plugin that is light weight and easy to use.

Download Now | View Example

15. jScratchcard plugin

Download Now | View Example

16. jQuery Menu Style 1 – Drop Down Menu with Visual Effects

View Examples

17. Frame Animation Plugin for jQuery

Download Now | View Example

18. Cusor Hover Buttons

This plugin lets you create a two-layer button with one layer that follows the mouse. This method allows you to create some very professional effects on your site.

Download Now | View Example

19. jQuery carrousel

The core allows to create your own controls or effects. This plugin transform an “ul li” into an animated carrousel.

Download Now | View Example

20. 2D Transform

This plug-in utilizes the matrix filter in IE and the new CSS3 transform properties to 2d transform any DOMElement.

Download Now | View Example

21. jPhotoGrid

This plugin displays a list of image thumbnails in a grid and allows them to be zoomed open. It’s a cool and simple effect.

Download Now | View Example

22. jMagnify

jQuery jMagnify, plugin attach a ola effect to some text following the mouse position.

Download Now | View Examples

23. animaDrag: Animating Drag and Drop Plugin

Download Now | View Example

24. jOla

Download Now | View Example

25. Flight Board

This plugin sets a division to flip between text messages like a flight board at an airport. It alternates between two or more messages by flipping individual characters.

Download Now | View Example

26. 3D Cloud Carousel

This is a fast and cross-browser implementation of a 3d carousel – looks very nice, more like a Flash implementation. It can create dynamic reflections underneath the carousel items, is accessible and degrades nicely without JavaScript.

Download Now | View Example

27. 3D Feature Image Carousel

This plugin rotates images in a three dimensional (simulated) carousel. Optionally, all images can have a description element attached to them that pops up on an overlay whenever that image rotates to the center.

Download Now | View Example

28. Smooth Anchors jQuery Plugin

This plugin creates a simple animation for anchor links by quickly scrolling the page to the area where the anchor is at rather than just jumping right to the anchor like normal.

Download Now | View Example

29. HoverAttribute

HoverAttribute is a jQuery plugin that allows you to make (link-)elements more dynamic by making an attribute of that element show up on hovering.

Download Now | View Example

30. Expanding Grid

Creates grid system out of divs. On hover the active grid expands to ratio set by the config, fades out the background.

Download Now | View Example

Never tables have been so dynamic and users now can specify and filter all the sections they want, you just need to find right plugin for specific project and that’s why I collected here 30 various functional jQuery plugins.

1. DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Key features:

• Variable length pagination
• On-the-fly filtering
• Multi-column sorting with data type detection
• Smart handling of column widths
• Display data from almost any data source
• Fully internationalisable
• jQuery UI ThemeRoller support
• Rock solid – backed by a suite of 1300+ unit tests
• Wide variety of plug-ins inc. TableTools, FixedHeader and KeyTable
• It’s free!

Download Now | View Preview

2. jQuery Grid Plugin

Download Now | View Examples

3. Table Pagination

This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.

Download Now: Uncompressed or Compressed version | View Example

4. PicNet Table Filter

The PicNet Table Filter is used in production in several PicNet projects so it has been tested production ready. The table filter was born out of our Visual Analytics (Mouse Eye Tracking) project and has received great feedback.

Download Now | View Example

5. uiTableFilter

It gives you a great way to filter through table your specified keywords, and it is not using search button! You don’t have to wait while page reloads!

Download Now | View Preview One | View Preview Two

6. TableFilter

Download Now | View Example

7. LiveFilter

LiveFilter is a very lightweight jQuery plugin that will filter either an ordered or unordered list and display only the results that match the supplied string. It is throughly documented and designed in a way in which it is very easy to understand for designers.

Download Now | View Example

8. TableSort

Simple table sorter.

9. Tablesorter

Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:

• Multi-column sorting
• Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
• Support for ROWSPAN and COLSPAN on TH elements
• Support secondary “hidden” sorting (e.g., maintain alphabetical sort when sorting on other criteria)
• Extensibility via widget system
• Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
• Small code size

Download Now | View Preview

10. jQuery.TinySort 1.0.3

TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children.

Download Now | View Example

11. Table Drag and Drop JQuery plugin

TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

Download Now | View Examples

12. HeatColor

HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a “heat” color based on its derived value’s position within the range.

You bind a collection of elements such as table rows, divs or list members to heatcolor and let it do the work.

It can find the min and max values of the desired elements, or you can pass them in manually.

Download Now | View Previews

13. Fixed Header Tables

Download Now | View Examples

14. Graph Data from an HTML table using jQuery and flot

It makes image as graphical data using data from table. It requires to use flot.

Download Now | View Examples

15. Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement

Visualize plugin — adding ARIA attributes to clarify the chart’s role to screen reader users, so they’re better informed about which elements contain useful data; and providing two style variations to demonstrate how you can use CSS to customize the charts’ appearance.

Download Now | View Example

16. JQTreeTable

JQTreeTable allow you to take a plain html table, wrap the rows you want collapsing/expanding in a tbody with an id of treetable, map each row to it’s parent row, set some options, and let jQTreeTable take it from there.

Download Now | View Preview

17. jQueryTreeTable

This is very similar to JQTreeTable.

View Examples

18. Ingrid

Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables. It’s easy to get started.

Download Now | View 3 examples

19. ColumnManager

A jQuery-plugin to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit. It’s supporting tables with colspans and rowspans, too!

Download Now | View Examples

20. ColumnHover

A jQuery-plugin that highlights whole columns in a table when hovering over them. It’s supporting tables with colspans and rowspans, too!

Download Now | View Examples

21. Colorize

Colorize is a jQuery plugin to add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows or columns as you want. A repeat mouse click reverts the row/column to the original background color.

Download Now | View Example

22. KeyTable

KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. As a further bonus, KeyTable integrates seamlessly with DataTables.

Download Now | View Example

23. Grider

Grider is a plugin for jQuery that makes your life easier when you need to edit or create a table that handles a list of items. It helps you to do calculations in a very simple way, it supports the following features

• Can make simple operations defined in the headers
• Can add a row count to the table
• Adds or deletes rows based on a row
• Has summaries for average (avg), sum (sum), maximum (max) and minimum (min)
• Works nice with Ruby on rails nested forms

View Example

24. jQueryTableRowCheckboxToggle

• Written for jQuery 1.2.3 (should continue to work for any newer versions)
• Click on any row, it will toggle the state of the applicable checkboxes
• On page load, it also labels the last row with the appropriate css class since it contains checked applicable checkboxes
• View source to get the gist of its usage
• You may customize it by changing the variable values at the beginning of the tableRowCheckboxToggle.js
• On this demo page, there are checkboxes that are excluded from the script i.e. checkbox with name testName, id checkme100 & checkme101, and class testClass

Download Now | View Example

25. Expand table rows with jQuery – jExpand plugin

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

Download Now | View Example

26. TableEditor

TableEditor provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.

Download Now | View Example

27. jGridEditor

This jQuery plugin allow you to add on-the-flight cell editing functionality in your table. You may configure it to perform AJAX queries and returning changed content or error messages. It was designed to work with Google App Engine, and it is strongly advice you develop your ajax server routines in this plataform.

Download Now | View Example

28. Zentable

Zentable is a plug-in for the jQuery Javascript library. It allows to show and manipulate tabulated data on a web page but with functionalities typically expected from native applications, as scrolling with the mouse wheel, resizing column widths or using keys to move through the data. It can be used with or without AJAX, but is using AJAX where this plug-in really shines.

• Data loaded on demand using AJAX, or embedded in the page.
• Mouse wheel and keyboard can be also used for scrolling.
• Column resizing, auto resizing and table resizing
• Orderable and filtrable by columns.
• Tooltips
• Editable
• Supports HTML as content
• Themeable by CSS. Supports different styles for rows and columns.

Download Now | View Example

29. Flexigrid

Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Features:

• Resizable columns
• Resizable height and width
• Sortable column headers
• Cool theme
• Can convert an ordinary table
• Ability to connect to an ajax data source (XML and JSON[new])
• Paging
• Show/hide columns
• Toolbar (new)
• Search (new)
• Accessible API
• Many more

Download Now | View Example

30. jQuery Week Calendar

The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

Download Now | View Examples

But they can also generate a surprising number of superfluous elements.

The 960 Grid System encourages the addition of <div> elements and class attributes, especially on complicated pages. Is this really an improvement over nested tables?

Creating cleaner code means going beyond the framework and thinking about what it really represents.

CSS frameworks provide a workflow solution, namely a rapid deployment of grid-based web layouts. One of the most popular frameworks today is the 960 Grid System (960.gs), named after its default width. With practice, 960.gs can be a great tool for any web designer. But it also revisits a few old problems.

Before CSS saw widespread use, tables provided all the layout a web designer needed. More complicated designs had tables nested within tables, but used in excess these created a tangled mess of HTML. CSS-based layouts lured designers with the promise of less HTML; they also appealed to semantics enthusiasts. Simply put, CSS encouraged the use of HTML that described what content was about, not what it should look like.

As designers learned to use CSS, div elements replaced tables. But divs can be—and often are—nested, just like tables.

The Spread of Class-itis and Div-itis

Clear, lean code offers many advantages. It’s easy to fix, quick to download and causes fewer problems across different types of browsers. Relevant tags help screen readers, search engines and mobile devices interpret meaning in addition to layout.

Other than the semantics, the great advantage of using <div>…</div> over <table><tr><td>…</td></tr></table> is that we end up with less code to do the same job. But now designers face a glut of classes and divs.

Do CSS frameworks such as 960.gs recreate the underlying problem with tables? If their goal is efficient HTML, can designers and developers use 960.gs without spreading “class-itis” (i.e. excessive use of classes) and “div-itis” (i.e. so many divs that tables start looking good again)? Yes, they can.

To understand how, we need to look at the framework itself.

A Rundown of 960.gs

960.gs provides a set of columns, written in CSS, that facilitate the laying out of web pages. Download the files, add them to your website and it’s ready to go. No special plug-ins or new technology are needed, and you can use it in conjunction with other CSS files.

Columns are contained within blocks called (naturally) “containers.” The defaults are container_12 and container_16, which divide into 12 and 16 columns, respectively. Custom sizes are available.

The diagram above shows the two default containers with 12 and 16 columns. The gray won’t be visible on your final website, of course. The columns merely show where blocks, called “grids,” can be arranged.

A grid is a block of content that can cross more than one column in a container. Grids float left by virtue of being held in .container_x, making them ideal for modular layouts. The width of each block is determined by which grid you apply to it: grid_1 is one column wide, grid_5 is five columns wide, etc.

Above, .container_12 holds three grids. Each grid, in turn, would hold different elements of the page’s content.

Above, .container_16 holds two blocks of 12 and 4 columns, respectively. Like .container_12, this 16-column-wide layout measures 960 pixels wide—but its columns are narrower.

Resizing the grids in which the content’s elements fit is simple: change the grid_x in each div.

The official 960.gs website showcases websites that were built on the framework, and it also provides page templates, links to a custom grid generator and the framework itself. Detailed instructions are included, too, because there’s more to learn. Grid margins and the ability to step into gutters between grids make the system even more flexible.

In spite of these benefits, embedding <div class="grid_x">…</div> in <div class="container_x">…</div> encourages coders to use many class attributes (class-itis) and divs (div-itis).

Solutions

Arguing against tables for layout is easy enough. But using three or more levels of nested divs doesn’t solve the problem—it just replaces one set of tags with another. Frameworks help but don’t always solve the dilemma. With a little forethought, many of these problems can be avoided.

Only Use Classes That You Actually Need

The simplest solution to excessive CSS code is to cut out what isn’t necessary. 960.gs was conceived as a wireframing tool, meant to be replaced when the website goes live. It includes more than 180 class definitions.

If your design is structured on, say, .container_12 and never uses more than .grid_5 and .grid_7, then remove the others from the CSS.

Apply class=”grid_x” to Appropriate Elements: Headings, Images, Links, Paragraphs

The .container_x and .grid_x classes aren’t restricted to div elements. The class attribute can be applied to any element except html, head, meta, param, script, title and style—so, practically anything in the body. If a pair of div tags enclose only one item, then they may be unnecessary.

Applying Grid Code to Non-Divs

Grant Grid Properties to Certain Elements

Being simple CSS, .grid_x has properties that would work with any other class name—or any element. By copying the properties to certain elements, extra classes become unnecessary.

.examples li { (properties of .grid_4) }

<ul class="examples">
  <li>…</li>
  <li>…</li>
  <li>…</li>
</ul>

Below, applying the grid to list items creates even columns, with minimal changes to the HTML.

CSS turns the above list into a multi-column group. If you need a normal list with bullet points, just discard the class="examples" attribute. Is this semantic? Certainly—as long as the content merits a list. The CSS merely changes how each bullet point is presented.

Another example:

.photos p { (properties of .grid_10) }
.photos img { (properties of .grid_6) }

<div class="container_16 photos">
  <img src="…" alt="photo" />
  <p>First caption</p>
  <img src="…" alt="photo" />
  <p>Another caption</p>
</div>

This automatically puts captions, enclosed in paragraph tags, adjacent to photos.

When tables are not appropriate, the tabular effect is easy to create with non-tabular HTML.

.datelist { (properties of .container_12) }
.datelist h3 { (properties of .grid_3) }
.datelist p { (properties of .grid_7) }
.datelist strong { (properties of .grid_1) }

<div class="datelist">

  <h3>subhead</h3>
  <p>…</p>
  <strong>3 p.m.</strong>
  <strong>Jan 1, 2010</strong>

  <h3>subhead</h3>
  <p>…</p>
  <strong>3 p.m.</strong>
  <strong>Jan 1, 2010</strong>

</div>

The example above is a schedule of events in which each “cell” in the table has a different tag to reflect its unique content, rather than having the catch-all <td> tag. (Ideal? Maybe not. The HTML doesn’t distinguish between groups of content.)

Applying .grid_x properties to other elements requires some planning, but it results in less-cluttered HTML and doesn’t interfere with 960.gs itself.

Use Classes in Parent Items, not Child Items

Div-itis and class-itis aren’t limited to CSS frameworks.

All of the examples in the last section share an interesting trait: only one class declaration in each. Wherever the same class attribute is used several times in a row in the HTML, change the parent instead of the children.

Unnecessary:

.item { (various properties) }

<ul>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
</ul>

Above, all six elements have a class. They’re redundant because the classes are identical. Here’s a better way:

.group-of-items li { (various properties) }

<ul class="group-of-items">
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
</ul>

The remedy here for class-itis is to assign a single class to the parent element. CSS selectors do the job, applying the styling to every <li> inside the .group-of-items class. This method can be used on any group of elements with a common parent. For example:

<div>
  <h1 class="title">…</h1>
  <h1 class="subhead">…</h1>
  <p class="publication-date">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
</div>

.title { (various properties) }
.subhead { (various properties) }
.publication-date { (various properties) }
.body-text { (various properties) }

Most of the paragraphs above are just simple paragraphs and yet have needless class attributes. We also have two headings, distinguished only by their classes—yet adjoining <h1> elements don’t make for a good content structure. Here is a better solution:

<div class="article">
  <h1>…</h1>
  <h2>…</h2>
  <p class="publication-date">…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
</div>

.article h1 { (various properties) }
.article h2 { (various properties) }
.article .publication-date { (various properties) }
.article p { (various properties) }

Now only two classes remain. We’ve kept the .publication-date class to distinguish it from the normal paragraphs below it. Because HTML doesn’t have a “date” tag, this class is necessary to show what the paragraph contains. The new .article class enables you to style that div and the elements in it in the CSS with minimal mark-up. The CSS in both examples has four definitions each, and yet we end up with much cleaner code in the second.

In general, identical elements with a common parent do not need extra attributes. Classes only help when there’s a difference between them. A rule of thumb: use classes only when you need to distinguish between otherwise identical types of content.

Simplify

The purpose of the 960 Grid System, and CSS frameworks in general, is to reduce the effort needed to lay out web pages. The benefit of CSS is that it reduces the amount of HTML necessary to display a page. But as a layout language, CSS isn’t perfect. Frameworks are merely tools that help people achieve solutions, not the solutions themselves. It’s up to designers and developers to combat class-itis and div-itis.

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

How do you say more with less? Share how you streamline code and your workflow in the comments below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: N4Ig7h

Firefox has always done an excellent good job of supporting both CSS and JavaScript in a standards-compliant manner without too many awkward bugs.

There are, however, a few CSS properties and selectors that aren’t supported by one or more of the versions released since version 3.0., which I will cover here.

This article will cover bugs, inconsistencies, and nonsupport. So, if you’re having trouble with a CSS property or selector in Firefox and it’s not listed here, then you’ll probably have to rethink your layout and reconsider what the culprit might be.

Since Firefox 2 is virtually non-existent, I won’t be considering that version specifically, but this information will generally apply to that version by default.

And I should note that the material for this post was taken primarily from the newly-updated SitePoint CSS reference, which is hands-down the best and most comprehensive CSS reference available anywhere.

The Outline Overflow Bug

In Firefox 3.x, when an element overflows the border of a parent that has the outline property set, the outline will stretch to fit the containing element, as shown in the screen capture below:

The correct implementation is shown in the next screen capture taken from Chrome:

As shown above, the outline should encompass the element that is being outlined, and should not be affected by any overflowing elements. To ensure there’s no confusion, note that this is a bug in the implementation of the outline property, not the border property.

Reference: SitePoint CSS Reference: outline Property

Tables with Collapsed Borders

In Firefox, when a table has its borders set to collapse using the border-collapse property, the table’s top and left margins in relation to nearby elements is 1 pixel off. This is shown in a zoomed-in screenshot in the image below, which displays the bottom border of a block-level element (red) touching the top border of a collapsed table (blue):

Here is the correct implementation of this property/value pair, as shown in Chrome:

As shown above, because the borders are “collapsed”, and because the table is not a block element, there should be a slight offset in the left margin, and the top margin should be even with the bottom border of the element above it.

Reference: SitePoint CSS Reference: border-collapse Property

Empty Cells in Table Rows

This is a property value that is not implemented properly by any browser, including Firefox. When a table row has no visible content and all its cells have their empty-cells property set to hide, the entire row should behave as if it were set to “display: none”, with no borders or backgrounds visible.

No browser handles this correctly, so the table row is still visible, as shown in the image below.

Reference: SitePoint CSS Reference: empty-cells Property

Word Spacing on Inline Elements

In Firefox 3.x, a negative value on the word-spacing property will be treated as zero on adjacent inline elements. The negative value should cause the inline elements to overlap one another, as would be the case with text, but this doesn’t happen. Instead, the elements are just given zero white space separation with no overlap.

The image below displays both the correct and incorrect implementations:

In the examples shown above, the three words “Fruits”, “Vegetables” and “Other Foods” are individually wrapped in <span> elements, while the paragraph that wraps them has its word-spacing property set to a negative value.

The second example (Firefox) fails to apply the negative word spacing, except between the last two words because those words are not individually wrapped by spans but are natural text elements.

As a side point, this bug occurs similarly in IE8, but not in previous versions of IE.

Reference: SitePoint CSS Reference: word-spacing Property

Text Decoration on Floating Descendants

When an element has a text-decoration value set, that value should not be inherited by floating descendants. In Firefox 3.x, floating descendants are given the same text-decoration values as their parent, even though this should not be the case.

In the image above, the first line is a screenshot from IE8, displaying a <span> element floated inside of an anchor. The text inside the <span> does not have a visible text decoration, which is the correct way to display it. In Firefox (shown in the second example), the text-decoration is incorrectly applied to the floating <span>.

You may have noticed this bug in Firefox when trying to remove the text-decoration from floated images inside of anchors.

Reference: SitePoint CSS Reference: text-decoration Property

pre-line & pre-wrap for the white-space property in FF 3.0

Using the white-space property in Firefox 3.5, you can specify whether multiple space characters should be collapsed down to a single space or not. By default, HTML documents will collapse multiple spaces down to a single space. In some instances, you can apply white-space: pre to prevent white space from being collapsed, which is similar to the use of the <pre> HTML tag. Subsequently, you may want to remove that setting using white-space: pre-line (to collapse white space).

Firefox 3.0 does not support this value, so the white space will be retained. Firefox 3.5 collapses the space correctly. The image below shows both examples:

Similarly, when a paragraph of text is set to white-space: pre-wrap, this should preserve white spaces between words, but should naturally include line breaks. Firefox 3.0 fails to implement this correctly, while later versions (and all other browsers) include the natural line breaks. Both examples are shown below.

Keep in mind that the outer element is given white-space: pre while an inner <span> is attempting to override the lack of line breaks using pre-wrap. On its own, pre-wrap would not have any effect.

Firefox 3.x also treats the some of the white-space values differently from other browsers when those values are applied to the <textarea> element. For example, applying white-space: nowrap should cause all typed text in a <textarea> to form one line, but Firefox 3.x does not do this.

Reference: SitePoint CSS Reference: white-space Property

Page Break Properties

CSS allows developers to specify where page breaks should or shouldn’t occur using the three properties page-break-before, page-break-inside, and page-break-after. Opera is the only browser that fully supports these properties, while other browsers offer partial support or no support.

The page-break-inside property specifies whether or not a page break can occur inside a single block-level element. Firefox does not provide support for this property. Using the syntax page-break-inside: avoid, you can prevent an element from being divided during printing. The image below, from a print preview in Opera 10, shows how this property can prevent an unordered list from being split over two pages:

By contrast, look at the image below, taken from the print preview option in Firefox 3.5:

Reference: SitePoint CSS Reference: Paged Media Properties

Orphans and Widows on Printable Pages

The orphans and widows CSS properties are supported only by Internet Explorer 8 and Opera since version 9. This property is used to specify the minimum number of lines from a single paragraph that can occur on a printed page, either at the bottom (orphans) or the top (widows). Depending on the number chosen, lines will be moved from one page to the next (or previous) in order to prevent a single line from being printed at the top or bottom of a page.

Even with the orphans property set to a value of “3″, as shown in the image below, Firefox’s print preview shows a single line at the bottom of one of the printable pages:

Similar to the page-break-inside property, Firefox also fails to support the values avoid, left, and right for both the page-break-before and page-break-after properties.

References: SitePoint CSS Reference: orphans Property | SitePoint CSS Reference: widows Property

The :first-line Pseudo-Element Bug

The :first-line pseudo-element allows the first line of any given text block to have different formatting from the rest of the text. For example, the first line of a paragraph of text can be changed to uppercase or to a different color. For this CSS element to work in a practical manner, it should allow for the possibility of nested block-level elements. For example, a <div> element that contains a <p> element should allow the :first-line pseudo-element to change the styling of the first line of text inside the <div>. In Firefox (and in many other browsers), this is not possible unless the pseudo-element specifically targets the child paragraph.

Internet Explorer 8, Chrome, and Safari implement this feature correctly, preventing nesting of block elements from breaking the styling, as shown in the image below:

In the paragraph above, the text is inside of a <p> element, which resides inside of a <div>. The <p> has the :first-line pseudo-element set to color: blue, which fails in Firefox because of the nesting of the paragraph inside the <div>.

Reference: SitePoint CSS Reference: first-line Pseudo-Element

CSS3 Support in Firefox 3.x

Firefox has gradually added better support for CSS3 since the release of version 3.0. Below is a description of how Firefox handles different features of CSS3. Some of these may still be in the working draft or candidate recommendation stage, therefore we can’t be dogmatic about what should and shouldn’t be supported until they have reached the recommendation stage.

• Firefox 3.0 doesn’t support the text-shadow property
• Firefox 3.x doesn’t support the box-shadow property, except when using the proprietary prefix -moz-
• Firefox 3.x doesn’t support the box-sizing property, except when using the proprietary prefix -moz-
• Firefox 3.x doesn’t support multiple columns unless the proprietary prefix -moz- is used
• Firefox 3.0 and 3.5 do not support CSS3 gradients and multiple backgrounds (both of these were recently added in 3.6)
• Firefox 3.0 doesn’t support the border-image property, but 3.5 supports it using the -moz- proprietary prefix
• Firefox 3.0 doesn’t support a number of CSS3 pseudo-classes (:nth-child, :nth-last-child, :nth-of-type, etc.)
• Firefox 3.0 doesn’t support CSS transforms
• Firefox 3.x doesn’t support CSS transitions
• Firefox 3.x doesn’t support CSS animations

Other CSS Features Not Supported

Some of the more significant bugs and incompatibilities were discussed above, but there are a few others worth noting.

• Firefox up to version 3.5 doesn’t support the value run-in for the display property
• Firefox doesn’t support the ::selection pseudo-element
• The @page at-rule is not supported by Firefox
• The @font-face at-rule is not supported by Firefox 3.0

Conclusion

After going through this material, you can clearly see that lack of support of CSS features in Firefox is minimal, and in many cases quite irrelevant since many of the properties discussed here are not very commonly used.

Nonetheless, I hope this will provide a decent reference for the most significant bugs and inconsistencies in Firefox. If you are having problems with a particular feature of CSS in Firefox that isn’t listed here, chances are you’re doing something wrong or may not fully understand certain CSS concepts and principles.

So, in that respect, this reference should work well as a reverse-reference, since those not listed here can be trusted to work fine if they are implemented correctly with proper syntax.

Of course, if there’s anything I’ve missed, or any errors, please comment and I’ll do my best to make any necessary corrections and additions.

Further References

• CSS improvements in Firefox 3
• Newly-supported CSS Features in Firefox 3.5

Firefox Image provided by Rakaz

This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: C6Dn0u