Top 8 jQuery Tips and Tricks

Share this article

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;
	});
});

<a class="increaseFont">+</a> |
<a class="decreaseFont">-</a> |
<a class="resetFont">=</a*gt;
<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

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);
}

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>

<a id="top" style="cursor:hand;cursor:pointer">
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'));
});
<link rel="stylesheet" href="default.css" type="text/css"/>

<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a>
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a>
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

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);
});
[/javascript]
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:

[code language="javascript"]
$("ul li").click(function(){
  //get the url from href attribute and launch the url
  window.location=$(this).find("a").attr("href"); return false;
});
<ul>
    <li><a href="home">home</a></li>
    <li><a href="home">about</a></li>
    <li><a href="home">contac<8. COLUMNS OF EQUAL HEIGHT
This is quite useful especially when you want the columns have the same height.

THE CODE:

[code language="javascript"]
$(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);
}
<div class="col" style="border:1px solid">Column One<br />
With Two Line<br />
And the height is different<br /><br />
</div>
<div class="col" style="border:1px solid">Column Two<br /><br /></div>
Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQuery
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week