Today we are going to learn about 5 most wanted jQuery snippet that will help you in your next web application development. In my last tutorial you learned about how to create fade effect using jquery and also learn how to convert a JavaScript in to a jQuery plugins. Hope you enjoyed them. I’ve added download links of each snippet. So that, you can easily download them and test yourself. Let’s begin today’s post.
– Start writing jQuery shorthand scripts:
In development session, sometimes we need to compress our scripts to reduce size of script containing file. So, it’s the time to learn a smart way how to write shorthand code in jQuery. It not only save your code size but also make your code more clean and fresh 🙂
//Old Fashion
$(document).ready(function() {
//Write you own jQuery Scripts
});
//New Fashion
$(function(){
});Download Script
– What we need to do when CDN failed?
Most of developer uses Google CDN and it’s always a popular external source for loading jQuery files. But we need to take some caution, if CDN failed to deliver data when user trying to load our apps/website. In this situation following script will work really wll as a CDN backup.
if (typeof jQuery == 'undefined')
{
document.write(unescape("%3Cscript src='Scripts/jquery.1.7.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
$(function(){
// Write you jQuery code block in here.
});Download Script
– Limit check in checkbox:
Last day worked in a project and I need to limit number of check box clicked by user. It’s a very efficient code if you want to limit check in checkbox.
$(function(){
$("input:checkbox").click(function() {
var counter = $("input:checkbox:checked").length >= 4;
$("input:checkbox").not(":checked").attr("disabled",counter);
});
});Demo
– Get mouse pointer position on your broswer window:
You need to apply this concept when you are trying to develop any games that measure mouse pointer position. It’s a very interesting script also very effective and efficient.
$(function(){
$(this).mousemove(function(e){
$('#mouse_pointer_position').html("X Axis : " + e.pageX + " Y Axis : " + e.pageY);
});
});Demo
Download Script
– Disable Right button click:
When I’d worked in an examination management application this script helped me a lot because our application didn’t allowed to show source code in-front of user. That’s why I used right button disabled script. I’d tested in all browsers and in all of them it working really well. Have a look –
$(function(){
$(document).bind("contextmenu",function(e){
alert("Right click disabled!");
return false;
});
});Demo
Download Script
– How to detect which button you have clicked on mouse?
Sometimes we need to detect mouse click and which button you have clicked. If we want to set some action when user clicked on the right button then first of all we have to detect right button click and then add some action on that click. This script can detect left/right/middle scroll button click. It’s a great script for game developers.
$(function(){
$(document).mousedown(function(event){
switch (event.which) {
case 1:
alert('Left mouse button pressed');
break;
case 2:
alert('Middle mouse button pressed');
break;
case 3:
alert('Right mouse button pressed');
break;
default:
break;
}
});
});Demo
Download Script
Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!