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