This is a collection of code examples for jquery

1. jQuery Snippets
By
Programmers help
Programmers help

2. Contents
Contents................................................................................................................................................2
Print Page..........................................................................................................................................3
Disabling Right Click...........................................................................................................................3
Scroll to Top.......................................................................................................................................3
jQuery Cookies...................................................................................................................................4
Replace text in a string......................................................................................................................5
Preloading Images.............................................................................................................................5
Image Resizing...............................................................................................................................6
Clear Form Data.................................................................................................................................7
Prevent Multiple Submit....................................................................................................................7
Test Password Strength.....................................................................................................................9
png fix for IE6.....................................................................................................................................9
Parsing json with jQuery..................................................................................................................10
Alternating Row Colors....................................................................................................................11
Make entire div clickable.................................................................................................................11
check if an image has loaded...........................................................................................................11
Opening pop-ups.............................................................................................................................12
Partial Page Refresh.........................................................................................................................12
Disable all links................................................................................................................................12
Disable Scrolling...............................................................................................................................12
Programmers help

3. Print Page
<!-- jQuery: Print Page -->
$('a.printPage').click(function(){
window.print();
return false;
});
<!-- HTML: Print Page -->
<div>
<a class="printPage" href="#">Print</a>
</div>
Disabling Right Click
<!-- jQuery: Disabling Right Click -->
$(document).bind("contextmenu",function(e){
e.preventDefault();
});
Scroll to Top
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Programmers help

4. jQuery Cookies
//get cookie
function getCookie( name ) {
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ';', len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}
//set cookie
function setCookie( name, value, expires, path, domain, secure ) {
var today = new Date();
today.setTime( today.getTime() );
if ( expires ) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
document.cookie = name+'='+escape( value ) +
( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
( ( path ) ? ';path=' + path : '' ) +
( ( domain ) ? ';domain=' + domain : '' ) +
( ( secure ) ? ';secure' : '' );
}
//delete cookie
function deleteCookie( name, path, domain ) {
if ( getCookie( name ) ) document.cookie = name + '=' +
( ( path ) ? ';path=' + path : '') +
( ( domain ) ? ';domain=' + domain : '' ) +
';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}
Programmers help

5. Replace text in a string
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample page</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".element span").text(function(index, text) {
return text.replace('Getphp', 'programmershelp');
});
});
</script>
</head>
<body>
<div class="element">
<span>I like Getphp</span>
</div>
</body>
</html>
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", " image2.png");
Programmers help

6. Image Resizing
$(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
});
Programmers help

7. 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;
});
};
Prevent Multiple Submit
$(document).ready(function() {
$('form').submit(function() {
if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
jQuery.data(this, "disabledOnSubmit", { submited: true });
$('input[type=submit], input[type=button]', this).each(function() {
$(this).attr("disabled", "disabled");
});
return true;
}
else
{
return false;
}
});
Programmers help

8. });
Programmers help

9. Test Password Strength
$('#pass').keyup(function(e)
{
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?
=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#passstrength').html('More Characters');
} else if (strongRegex.test($(this).val())) {
$('#passstrength').className = 'ok';
$('#passstrength').html('Strong!');
} else if (mediumRegex.test($(this).val())) {
$('#passstrength').className = 'alert';
$('#passstrength').html('Medium!');
} else {
$('#passstrength').className = 'error';
$('#passstrength').html('Weak!');
}
return true;
});
png fix for IE6
ust add a .pngfix class to anything you want fixed or put in some other jQuery selector.
$('.pngfix').each( function() {
$(this).attr('writing-mode', 'tb-rl');
$(this).css('background-image', 'none');
$(this).css( 'filter',
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="sc
ale")');
});
Programmers help

10. Parsing json with jQuery
function parseJson(){
//Start by calling the json object, I will be using a
//file from my own site for the tutorial
//Then we declare a callback function to process the data
$.getJSON('hcj.json',getPosts);
//The process function, I am going to get the title,
//url and excerpt for 5 latest posts
function getPosts(data){
//Start a for loop with a limit of 5
for(var i = 0; i < 5; i++){
//Build a template string of
//the post title, url and excerpt
var strPost = '<h2>'
+ data.posts[i].title
+ '</h2>'
+ '<p>'
+ data.posts[i].excerpt
+ '</p>'
+ '<a href="'
+ data.posts[i].url
+ '" title="Read '
+ data.posts[i].title
+ '">Read ></a>';
//Append the body with the string
$('body').append(strPost);
}
}
}
//Fire off the function in your document ready
$(document).ready(function(){
parseJson();
});
Source: http://hankchizljaw.co.uk/tutorials/parse-json-with-jquery-snippet/06/05/2012/
Programmers help

11. Alternating Row Colors
//jquery
$('div:odd').css("background-color", "#F4F4F8");
$('div:even').css("background-color", "#EFF1F1");
// example
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>
Make entire div clickable
<div class="myDiv">
Text in here as an example.
<a href="http://google.com">link</a>
</div>
The following lines of jQuery will make the entire div clickable:
$(".myDiv").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
check if an image has loaded
$(‘#imageID’).attr(‘src’, ‘imagefile.jpg’).load(function()
{
Alert(‘image load successful’);
});
Programmers help

12. Opening pop-ups
jQuery(‘a.popup’).live(‘click’, function()
{
newwindow=window.open($(this).attr(‘href’),‘’,’height=100,width=100’);
if(window.focus)
{
newwindow.focus()
}
return false;
});
Partial Page Refresh
Used commonly on banners
setInterval(function()
{
$(“#block”).load(location.href+”#block>*”,””);
}, 2000);
Disable all links
<script type="text/javascript">
$("a").click(function() { return false; });
</script>
Disable Scrolling
// Prevent Scrolling
$(document).bind("touchmove",function(event){
event.preventDefault();
});
Programmers help