5 most wanted jQuery snippets for web developers

5 most wanted jQuery snippets for web developers

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(){

});

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

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

– Get mouse pointer position on your browser 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);
  });
});

– Disable Right button click:

When I had 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;
 });

});

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

});

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!

Total 0 Votes
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Comment

Back To Top