JavaScript
Article

Top 8 jQuery Tips and Tricks

By Sam Deering

Here are some cool tips and tricks for jQuery. There are a lot of things that can be done with this wise javascript library like resizing of fonts, disabling right clicks and more. You can also do custom coding of jQuery and do amazing scripts just like this list that I have.

1. FONT RESIZING

This will allow users to increase or decrease the font size from web page. You must specify what ID or CLASSES of HTML elements that you want the font to be adjustable.

THE CODE:

$(document).ready(function(){
	//ID, class and tag element that font size is adjustable in this array
	//Put in html or body if you want the font of the entire page adjustable
	var section = new Array('span','.section2');
	section = section.join(',');
	// Reset Font Size
	var originalFontSize = $(section).css('font-size');
	$(".resetFont").click(function(){
		$(section).css('font-size', originalFontSize);
	});

	// Increase Font Size
	$(".increaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*1.2;
		$(section).css('font-size', newFontSize);
		return false;
	});

	// Decrease Font Size
	$(".decreaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*0.8;
		$(section).css('font-size', newFontSize);
		return false;
	});
});

+ |
- |
=
Font size can be changed in this section
This won't be affected
This one is adjustable too!

2. BACK TO TOP BUTTON OR LINK

This is a very nice way of going back to the top of the page by using jQuery scrolling effects on links or button.

THE CODE:

$('#top').click(function() {
	$(document).scrollTo(0,500);
}




Back to top

3. DETECT RIGHT CLICK

It’s important to consider doing right clicks on a website. Because sometimes we might want to disable a right click function on a website. So here’s how we’re going to detect the right click of a mouse using jQuery.

THE CODE:

$(document).bind("contextmenu",function(e){
	//you can enter your code here, e.g a menu list

	//cancel the default context menu
	return false;
});

4. OPENING IN A NEW WINDOW

As you might know, Target attribute of ‘a’ tag in html doesn’t pass the W3C validation so you will get some validation errors here. What this jQuery code will do is to replace Target attribute by something that can pass W3C validation. So here goes REL and some jQuery codes.

THE CODE:

$('a[rel=external]').attr('target','_blank');
Queness in new window

5. SWITCHING TO DIFFERENT CSS STYLES

If you want to have multiple style sheets for your website, this one is for you.

THE CODE:

$("a.cssSwitcher").click(function() {
	//swicth the LINK REL attribute with the value in A REL attribute
	$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});


Default Theme
Red Theme
Blue Theme

6. GET X AND Y AXIS OF YOUR MOUSE POINTER

This code will just get the coordinates of your mouse pointer.

THE CODE:

$().mousemove(function(e){
    //display the x and y axis values inside the P element
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

7. MAKE WHOLE LI CLICKABLE

A very useful trick when you’re using UL list to make a navigational menu. When you click on the LI area (outside of the link) it will amazingly search for the url in the anchor tag and then execute it.

THE CODE:

$("ul li").click(function(){
  //get the url from href attribute and launch the url
  window.location=$(this).find("a").attr("href"); return false;
});

8. COLUMNS OF EQUAL HEIGHT

This is quite useful especially when you want the columns have the same height.

THE CODE:

$(document).ready(function() {
    setHeight('.col');
});

//global variable, this will store the highest height value
var maxHeight = 0;

function setHeight(col) {
    //Get all the element with class = col
    col = $(col);

    //Loop all the col
    col.each(function() {

        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });

    //Set the height
    col.height(maxHeight);
}
Column One
With Two Line
And the height is different

Column Two

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.