8 great jQuery tricks

Who doesn't like jQuery? This fast and easy javascript library became very popular in 2008. In this article, I have compiled a list of eight very useful jQuery techniques, tips, and tricks.

Links target = blank

Do you use the attribute target = blank for links? If so, you should know that XHTML 1.0 Strict does not allow this. Using jQuery to create links that open new windows can be a good solution to the problem:

$( 'a[rel$=" external "]' ).click( function (){
this .target = "_blank" ;
});

/*
:
<a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a>
*/

* This source code was highlighted with Source Code Highlighter .

Translator's note: in the original, the author uses "@rel", which is currently outdated, but may well work on earlier versions of jQuery. In addition, in the comments there is a description of the solution on standards through window.open.

Counting the total number of items

This is what I call a very simple, but very useful advice: this code will return the number of selected elements:

$( 'element' ).size();

* This source code was highlighted with Source Code Highlighter .

Translator's note: in addition, you can use length, instead of size ().

Preload images

When you use images with JavaScript, it is good practice to load them before using them. This code does all the work:

jQuery.preloadImages = function ()
{
for ( var i = 0; i<arguments.length; i++)
{
jQuery( "<img>" ).attr( "src" , arguments[i]);
}
};

//
$.preloadImages( "image1.gif" , "/path/to/image2.png" , "some/image3.jpg" );

* This source code was highlighted with Source Code Highlighter .

')

Browser Definition

Although it is better to use conditional comments for connecting css to define a browser, it is very easy to do the same through jQuery, which can be useful.

//A. Safari
if ( $.browser.safari ) $( "#menu li a" ).css( "padding" , "1em 1.2em" );

//B. IE6
if ($.browser.msie && $.browser.version > 6 ) $( "#menu li a" ).css( "padding" , "1em 1.8em" );

//C. IE6
if ($.browser.msie && $.browser.version <= 6 ) $( "#menu li a" ).css( "padding" , "1em 1.8em" );

//D. Firefox 2
if ($.browser.mozilla && $.browser.version >= "1.8" ) $( "#menu li a" ).css( "padding" , "1em 1.8em" );

* This source code was highlighted with Source Code Highlighter .

Translator's note: in jQuery 1.3 and higher, $ .browser is deprecated and not recommended for use, instead, it is recommended to use $ .support.

Deleting a word in the text

Have you ever wanted to be able to delete words in a text? Note the following code, which can be easily modified to replace the word with another.

var el = $( '#id' );
el.html(el.html().replace(/word/ig, "" ));

* This source code was highlighted with Source Code Highlighter .

Columns of the same height

This technique is very much in demand: how to use two css-columns and make them the same height? Fortunately, Rob from cssnewbie knows the solution:

function equalHeight(group) {
tallest = 0;
group.each( function () {
thisHeight = $( this ).height();
if (thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}

/*
:
$(document).ready(function() {
equalHeight($(".recent-article"));
equalHeight($(".footer-col"));
});
*/

* This source code was highlighted with Source Code Highlighter .

Source: Equal Height Columns with jQuery

Change font size

Changing the font size is a feature commonly used on many modern web sites. See how to implement it with jQuery:

$( document ).ready( function (){
//
var originalFontSize = $( 'html' ).css( 'font-size' );
$( ".resetFont" ).click( function (){
$( 'html' ).css( 'font-size' , originalFontSize);
});
//
$( ".increaseFont" ).click( function (){
var currentFontSize = $( 'html' ).css( 'font-size' );
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$( 'html' ).css( 'font-size' , newFontSize);
return false ;
});
//
$( ".decreaseFont" ).click( function (){
var currentFontSize = $( 'html' ).css( 'font-size' );
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$( 'html' ).css( 'font-size' , newFontSize);
return false ;
});
});

* This source code was highlighted with Source Code Highlighter .

Source: Text Resizing With jQuery

Prevent call the context menu with the mouse

There are many ways to prevent the context menu from being opened via JavaScript, but jQuery makes it much easier to do this:

$( document ).ready( function (){
$( document ).bind( "contextmenu" , function (e){
return false ;
});
});

* This source code was highlighted with Source Code Highlighter .

Source: Fast Tip: jQuery