Handy and Useful jQuery Snippets for Develop

jQuery  is a cross browser  JavaScript library  that helps  developers  and designers built and design powerful and  responsive  web  programs and  applications.  It have actually made the coders  write less and do more with it.  jQuery  is helpful in designing  page layout,  adding application features and it also provides capabilities for developers to create plug-ins on top of the  JavaScript library.

Handy and Useful jQuery Snippets for Developers

1. Preloading Images

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

jQuery.preLoadImages("image1.gif", "/path/to/image2.png");
    

Source

2. Hover on/off

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

Source

3. Smooth Scrolling to an anchor

      $(document).ready(function() {
	$("a.topLink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 500,
			easing: "swing"
		});
		return false;
	});
});
    

Source

4. Fade in/out on hover

      $(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
    });
});
    

Source

5.  Preventing anchor tags from loading

      $("a").on("click", function(e){
  e.preventDefault();
});
    

Source

6. Scroll to Top

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

Source

7.  Facebook  like Image Gallery

      var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("
    

      ").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});
    

Source

8. Auto Populating Select Boxes Using jQuery and Ajax

      $(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '
' + j[i].optionDisplay + '

';
}
$("select#ctlPerson").html(options);
})
})
})
    

Source 

9. Auto Replace Broken Images

      // Safe Snippet
$("img").error(function () {
	$(this).unbind("error").attr("src", "missing_image.gif");
});

// Persistent Snipper
$("img").error(function () {
	$(this).attr("src", "missing_image.gif");
});
    

Source

10. Clear Form Data

      function clearForm(form) {
  // iterate over all of the inputs for the form
  // element that was passed in
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};
    

Source