Bruno Abrantes

If you’re using jQuery along with another Javascript Framework (such as Prototype) which also implements the $ variable, you can give back control over it to whichever library first implemented it by using the following code (right after including jQuery):

jQuery.noConflict();

Now, instead of using $ to select jQuery objects, you will be able to use jQuery:

var el = jQuery("#myID");

However, typing jQuery every single time you want to select something gets old real quick, so you can use this trick when declaring noConflict():

var $j = jQuery.noConflict();

This reassigns the reference to the jQuery object to whichever variable you want. In this example, you can now use $j instead of jQuery as a selector. You’ll be (at least) 10 times more productive now!

Separating content from behaviour

When incorporating Javascript behaviour on your pages, you’ll probably want to take advantage of mouse events to trigger certain functions. The most obvious and common example is to display a small modal window when a user clicks a given link on the page. (…) more after the jump ›

It’s a very common question for people starting out with jQuery: How do I know if element X exists? There is no standard function for you to use, however, it’s really simple to write one yourself.

What you’ll probably try to do first is to perform a check on a jQuery object, like this:

//This won't work :(
if ( $("#myId") ) {
  //awesome code here
}

The reason this method doesn’t work is that when you use the $(), you’re asking for a jQuery object. You always get a jQuery object, even if it’s an empty one. Thus, the above code always returns true, and that’s just sad.

However, the object returned by jQuery will have an internal array filled with all the elements that do match your selector. You can access this internal list’s length using the .length property. This means that, if the length of your object is greater than zero, your element does indeed exist in the DOM. Putting that into code, we get:

//This works, yay!
if ( $("#myId").length > 0 ) {
  //awesome code here
}

Although the examples shown here only checked for the existence of an element with a certain ID attribute, you can obviously use this technique with any jQuery selector you wish.

One of the most frequent hurdles (and one which I’ve ran into myself) Web Designers face is how to correctly size text using CSS. The most straightforward way to do this is by using absolute px values, but this comes at a price: IE6 users won’t be able to resize the text, and will be stuck with whatever you decide is best. If one of your users has some type of vision impairment, congratulations, you’ve just made someone’s life a little harder. (…) more after the jump ›