New Jquery Snippet Code for Designer and Developer

Jquery is most javascript framework used by developer and designer in the world. Jquery is very important to all web development and design. Its would be basic, fondation of web app, mobile app and more.

This is my jquery snippet collection that help me alot when coding jquery. Maybe its also help you.

1. Loading Image Faster with Jquery

$.preloadImages = function() {
       for(var i = 0; i<arguments.length; i++) {
               $("<img />").attr("src", arguments[i]);
       }
}

$(document).ready(function() {
       $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});

Its script will loading image first, the loading the page. The concept is simple, but its work.
Source

2. Image Resizing with Jquery

$(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 > 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 > maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("width", width * ratio);
			width = width * ratio;
		}
	});
	//$("#contentpage img").show();
	// IMAGE RESIZE
});

Its script will resizing image on the client side. Although, you better resizing image on the server side, in order client can be faster download.
Source

3. Select Conditional Jquery in Header

<!--[if lt IE 9]>
<script src="jquery-1.10.1.js" type="text/javascript"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<!--<![endif]-->

Source

4. Find All Internal Link with Jquery

var siteURL = "http://" + top.location.host.toString();

var $internalLinks = $("a[href^='"
         + siteURL
         + "'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");

Its script will parse and find internal link on a page with jquery. Simple and without plugin.
Source

5. Controlling Checkbox via Jquery

    // Check if Checkbox is checked:
    $('#checkboxfield').is(':checked')
     
    // check / uncheck the checkbox
    $('#checkboxfield').prop('checked', true);
     
    // do not use attr() !
    // since jquery 1.5 prop is available, attr() has flaws

Checked or uncheck checkbox element with jquery.
Source

6. Smoth Scrolling with Jquery

$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});

Source

7. Force input 0-9 with Jquery

    $('.class').keypress(function (key) {
    if (key.charCode < 48 || key.charCode > 57) {
    return false;
    }
    });

Source

8. Manage Cookie with Jquery

// writing coookie
$.cookie('name', 'value', { expires: 7 });
$.cookie('name', 'value', { expires: 7, path: '/' });

// read cookie
$.cookie('name'); // => "value"

//remove cookie
$.removeCookie('name'); // => true

One thought on “New Jquery Snippet Code for Designer and Developer

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.