Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
63 views

Jquery Snippets By: Programmers Help

This document provides jQuery code snippets for common tasks like printing pages, disabling right clicks, scrolling to the top of pages, working with cookies, replacing text, preloading images, resizing images, clearing forms, preventing multiple form submits, testing password strength, fixing PNGs in IE6, parsing JSON, alternating row colors, making divs clickable, checking if images loaded, opening popups, partial page refreshes, disabling all links, and disabling scrolling. The snippets range from 1-5 lines of code and demonstrate how to accomplish various user interface tasks and effects using jQuery.

Uploaded by

programmerdude
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
63 views

Jquery Snippets By: Programmers Help

This document provides jQuery code snippets for common tasks like printing pages, disabling right clicks, scrolling to the top of pages, working with cookies, replacing text, preloading images, resizing images, clearing forms, preventing multiple form submits, testing password strength, fixing PNGs in IE6, parsing JSON, alternating row colors, making divs clickable, checking if images loaded, opening popups, partial page refreshes, disabling all links, and disabling scrolling. The snippets range from 1-5 lines of code and demonstrate how to accomplish various user interface tasks and effects using jQuery.

Uploaded by

programmerdude
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 11

jQuery Snippets

By
Programmers help

Programmers help

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...................................................................................... 8
png fix for IE6..................................................................................................... 8
Parsing json with jQuery..................................................................................... 9
Alternating Row Colors..................................................................................... 10
Make entire div clickable..................................................................................10
check if an image has loaded...........................................................................10
Opening pop-ups.............................................................................................. 11
Partial Page Refresh......................................................................................... 11
Disable all links................................................................................................. 11
Disable Scrolling............................................................................................... 11

Programmers help

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

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

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

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

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

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="scale")');
});

Programmers help

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-jquerysnippet/06/05/2012/

Programmers help

Alternating Row Colors


//jquery
$('div:odd').css("background-color", "#F4F4F8");
$('div:even').css("background-color", "#EFF1F1");
// example
<div>Row
<div>Row
<div>Row
<div>Row

1</div>
2</div>
3</div>
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

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

You might also like