Your SlideShare is downloading. ×
Jquery examples
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Jquery examples

1,586

Published on

This is a collection of code examples for jquery

This is a collection of code examples for jquery

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,586
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×