Don't Miss
Home / Web Development / jQuery / 11 jQuery Code Snippets for Developers
11 jQuery Code Snippets for Developers

11 jQuery Code Snippets for Developers

jQuery has been successfully been used in web development to compliment HTML coding and simplify any client-side scripting. jQuery has become a leading choice for developers who use it with several JavaScript available libraries. While there are several jQuery code snippets that have caught the attention of the developers, in this article, we will focus on 11 basic and widely used code snippets.

Print Page Option:

The Print Page Option is a jQuery plugin that eases a developer’s arduous task of providing options for the print page. The code snippet is as follows:

<!-- jQuery: Print Page -->
$('a.printPage').click(function(){
           window.print();
           return false;
}); 
<!-- HTML: Print Page -->
<div>
   <a class="printPage" href="#">Print</a>
</div>

2. Preloading Images:

As the name suggests, Preloading Images is a jQuery plugin that helps developers preload images into webistes without having to write long codes. The code looks something like this –

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }

3. Hover On/Off:

This jQuery plugin can be used to bind two handlers to the matched elements which can be executed when the mouse pointer enters and leaves the prescribed elements. Let’s take a look at the code snippet –

$("a").hover(
  function () {
    // code on hover over
  },
  function () {
    // code on away from hover
  }
);

4. Helping Input Field/Swap Input Field:

When a website provides comment’s section or forms that have to be filled by the user, you can sometimes come across some Input Text field where some default text is shown but which disappears when the user clicks on it to enter a value. This can be easily done with the help of the following code snippet –

<!-- jQuery: Helping Input Field -->
$('input[type=text]').focus(function(){    
           var $this = $(this);
           var title = $this.attr('title');
           if($this.val() == title)
           {
               $this.val('');
           }
}).blur(function() {
           var $this = $(this);
           var title = $this.attr('title');
           if($this.val() == '')
           {
               $this.val(title);
           }
});
<!-- HTML: Swap Input Field -->
<div>
       
</div>

5. Make Everything Mobile Friendly:

It has become absolutely necessary to websites to be responsive and mobile friendly. Luckily there is a jQuery code that can be used for this purpose. Let’s take a look –

var scr = document.createElement('script');
scr.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');
document.body.appendChild(scr);

scr.onload = function(){

6. Scroll to Top:

‘Scroll to top’ has become a common phenomenon in websites where with the help of a simple link or button, users can go to the top of the page.

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

7. Select/Deselect All Options:

Using this jQuery code, developers can easily create checkboxes for selecting and deselecting options in the web page.

<!-- jQuery: Select/Deselect All -->
$('.SelectAll').live('click', function(){
$(this).closest('.divAll').find('input[type=checkbox]').attr('checked', true);
return false; });
$('.DeselectAll').live('click', function(){
$(this).closest('.divAll').find('input[type=checkbox]').attr('checked', false);
return false; });
<!-- HTML: Select/Deselect All -->
<div class="divAll">  <a href="#" class="SelectAll">Select All</a>   
<a href="#" class="DeselectAll">Deselect All</a>  <br />  \
<label for="Lahore">Lahore</label>  
<label for="Karachi">Karachi</label>  
<label for="Islamabad">Islamabad</label> </div>

8. Image Resizing:

jQuery also has a code plugin for image resizing. Now you do not need to worry about the image size and resolution when uploading the same into the website.

$(window).bind("load", function() {
	// IMAGE RESIZE
	$('#product_cat_list img').each(function() {
		var maxWidth = 120;
		var maxHeight = 120;
		var ratio = 0;
		var width = $(this).width();
		var height = $(this).height();

		if(width &gt; maxWidth){
			ratio = maxWidth / width;
			$(this).css("width", maxWidth);
			$(this).css("height", height * ratio);
			height = height * ratio;
		}
		var width = $(this).width();
		var height = $(this).height();
		if(height &gt; maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("width", width * ratio);
			width = width * ratio;
		}
	});
	//$("#contentpage img").show();
	// IMAGE RESIZE
}); 

9. Ajax Template:

jQuery is very commonly used for passing form data using AJAX. To make the process simpler, you can also use the following code –

$.ajax({
  type: 'POST',
  url: 'backend.php',
  data: "q="+myform.serialize(),
  success: function(data){
    // on success use return data here
  },
  error: function(xhr, type, exception) { 
    // if ajax fails display error alert
    alert("ajax error response type "+type);
  }
});

10. Disabling Right Click:

Many websites prefer disabling the right click and to do so rightfully, here’s the jQuery code –

<!-- jQuery: Disabling Right Click -->
$(document).bind("contextmenu",function(e){
       e.preventDefault();

   }); 

11. Emulate Facebook by Preloading Previous & Next Photo Gallery Images:

Facebook has become an integral part of the Internet and website do not want to lag behind in emulating Facebook. Here’s what jQuery code does for preloading previous and next photo gallery images –

var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});

About Alisa Vitti

This post written by Alisa Vitti, She is a HTML Developer and working with one of the most reputed PSD to CSS and PSD to WordPress conversion service provider company called MarkupBox.
  • Kyle

    I will be not sure wherever you are helping your details, although great subject matter. My spouse and i would need to spend time finding out a great deal more or maybe comprehending much more. Thank you for excellent info I became seeking this data in my quest.

    • http://www.designdistrictauction.com/ admin

      Hi Kyle,

      Thanks for your appreciations

Scroll To Top
© COPYRIGHT 2012 DesignDistrictAuction