5 Helpful jQuery Tricks

February 21st, 2012 Leave a comment 1 comment
Like the article?
5 helpful jquery tricks

It doesn’t matter if you are just starting out with jQuery or have been working with it for a while; you probably have some magic in your bag that you reuse in your projects. If you are a total jQuery novice, you might want to check out our jQuery Quick Tutorial first. This article continues our jQuery Optimization series with five fresh jQuery tips to help you have a few more tricks up your sleeve. If you need more than just tips, check out our jQuery training courses!

1. Resize Fonts on the Fly

There are many benefits to letting your user re-size the font of your site on the fly. Here is some jQuery to show you how to do it:

//check that the DOM is ready
$(document).ready(function() {
	//get the current font size
	var originalFontSize = $('html').css('font-size');

	//Increase the font size
	$(".increaseFont").click(function() {
		var currentFontSize = $('html').css('font-size');
		var currentFontSizeNumber = parseFloat(currentFontSize, 10);
		//increases the font- could be set to a value from 
		//the user as well
		var newFontSize = currentFontSizeNumber*1.2;
		$('html').css('font-size', newFontSize);
		return false;
	});

	//Decrease the Font Size
	$(".decreaseFont").click(function() {
		var currentFontSize = $('html').css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		//decreases font.  Could be set to a value from
		//the user as well
		var newFontSize = currentFontSizeNum*0.8;
		$('html').css('font-size', newFontSize);
		return false;
	});

	// Reset Font Size
	$(".resetFont").click(function(){
	$('html').css('font-size', originalFontSize);
  });
});

Set up some links with the increaseFont and decreaseFont CSS classes and give it a try or check out the demo.

2. Open Links in New Windows

If you are like me, you don’t like your markup to not validate. Well in XHTML 1.0 Strict you cannot use the target="blank" attribute on anchor tags. You may also want to open all external links in new windows to try to keep your visitor on your site. Here is a bit of jQuery that will allow you to hop over this problem and open all external links in new windows.

//check that the DOM is ready
$(document).ready(function() {
	//select all anchor tags that have http in the href
	//and apply the target=_blank
	$("a[href^='http']").attr('target','_blank');
});

Presto! All external links will now open in a new window, allowing your page to remain for the user to return to. If you use a lot of external document links such as PDF or DOC files you could create several of these rules to load these documents in a new window.

3. Swap Style Sheets

Right up there with allowing your user to change the font-size of your page, you may also want to allow the user to choose between pre-made “themes” for your site by swapping style sheets.

//check that the DOM is ready
$(document).ready(function() {
	$("a.cssSwap").click(function() { 
		//swap the link rel attribute with the value in the rel    
		$('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
	}); 
});

Check out the demo for the full idea on how this works.

4. Disable Right-Clicking

Whether you are wanting to disable right-click because you want to prevent user’s from stealing your information or you want to create your own right-click functionality, here is how we can do it:

//check that the DOM is ready
$(document).ready(function() {
	//catch the right-click context menu
	$(document).bind("contextmenu",function(e) {				 
		//warning prompt - optional
		alert("No right-clicking!");
					 
		//cancel the default context menu
		return false;
	});
});

jQuery makes it simple and easy to catch and deal with the right-click on your page.

5. Back to Top Link

A handy feature for your users is a Back to Top link that brings the user back to the top of a long page. This is a simple feature with JavaScript but with jQuery that we can add a little pizzaz by using the scroll effect.

$(document).ready(function() {
	//when the id="top" link is clicked
	$('#top').click(function() {
		//scoll the page back to the top
		$(document).scrollTo(0,500);
	}
});

Check out the demo to get the full effect. For sites that have long pages that require users to scroll, this is a must-have feature.

As you become savvier with jQuery I am sure you will find many more tricks like these to put in your bag. Keep working at it and who knows what you will discover!

Article Source Files

DescriptionNameSizeDownload method
5 jQuery Tricks Demo Source5-jquery-tricks-demo.zip71KBHTTP
Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!
  1. peter says:

    Nice – learn a few tricks, thanks for that.

    For the re-size, wouldn’t specifying ‘html’ not cause any other DOM with specific font-size css to take effect?

Comment