Lets first take a look at the XML file we are going to Parse. The XML document is saved as cd_catalog.xml.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?xml version="1.0" encoding="utf-8" ?>
<CATALOG>
  <CD type="physcial">
    <TITLE>Maggie May</TITLE>
    <ARTIST>Rod Stewart</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>Pickwick</COMPANY>
    <PRICE>8.50</PRICE>
    <YEAR>1990</YEAR>
  </CD>
  <CD type="physical">
    <TITLE>When a man loves a woman</TITLE>
    <ARTIST>Percy Sledge</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Atlantic</COMPANY>
    <PRICE>8.70</PRICE>
    <YEAR>1987</YEAR>
  </CD>
  <CD type="digital">
    <TITLE>Big Willie style</TITLE>
    <ARTIST>Will Smith</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1997</YEAR>
  </CD>
</CATALOG>

As you see this is a simple XML document of a CD Catalog. If you have never seen an XML document before I suggest you read up on it. Now lets look at the jQuery Code we will use to extract the data. I am going to post the full code and then explain what each line does. If you don’t care what each line does then feel free to copy and paste and augment the code. Anyway here is the code.

1
2
3
4
5
6
7
8
9
10
11
12

$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "cd_catalog.xml",
    dataType: "xml",
    success: function(xml){
                  $(xml).find("CD").each(function(){
                        $("#CD").append($(this).find("ARTIST").text() + "<br />");
                  });
               }
  });
});

The output of the jQuery code would look something like this:

1
2
3

Rod Stewart<br />
Percy Sledge<br />
Will Smith<br />

So now that you see the code let me explain. First you must call the $.Ajax Get Request in order to actually get the XML file. (On a side note you may also use jQuery’s $.get function to retrieve the XML document.) Click here if you don’t understand the $.Ajax Get Request. When you successfully get the cd_catalog.xml file you must call a function to process the XML. Then on Line 7 in the jQuery code $(xml).find(“CD”).each(function() is how you actually process the XML data. First you must use the .find to search all “CD” tags in the XML document then use the .each to loop through every “CD” tag that is in the XML document. Now that we are looping through the all “CD” tags, we can output the Artist Name by using the following code on line 8 $(“#CD”).append($(this).find(“ARTIST”).text() + “br/”);. We must first Append data to the div with the ID CD in the HTML document. The data that we will append to the div is as follows: $(this).find(“ARTIST”).text(). What we do here is find the tag “ARTIST” within the “CD” Node and get the text within the “ARTIST” tag. As you see its pretty simple to Parse an XML document with jQuery. But there is one more topic I want to cover and that is XML tag Attributes.

In the XML document above you can see that in the “CD” tag we have an attribute called “type”. To access an attribute you can use the code below after line 7 in the above jQuery code.

1

        $(this).attr("type")

And that is it for this tutorial. I hope it will help you on your quest to become a jQuery guru. If you have any questions please don’t hesitate to comment below.

• Simple javascript Accordian – The Simple JavaScript accordion script is my favorite. It is very small script at about 1kb and it requires no frameworks. It works in all browsers and it is very easy to integrate.
  
• jQuery Accordion Plugin - This jQuery Plugin creates an Accordion that allows for nested lists, definition lists, and nested divs. The plugin requiresjQuery and the dimensions plugin.
  
• jQuery Horizontal Accordion – This is another jQuery Plugin but the accordion is horizontal. It is very similar to the XBOX 360 interface. This plugin requires you use the interface plugin.
  
• MooTools Accordion – This MooTools Accordion script is very nice script that is very easy to implement. There is no additional plugins that you need to get this script to work. The one problem with this is that there is no support for this script. But you can easily figure out how to integrate by viewing the source code.
  
• Horizontal JavaScript Accordion – This script requires no JavaScript frameworks and is just 1kb. It has been tested in all major browsers. This is a great an easy script to implement.
  
• Accordion v2.0 – This accordion script is built with Prototype and Scriptaculous. This script handles both horizontal and vertical accordions. It can even have an accordion inside an accordion. You should check this out.
  
• EXT Accordion Widget – This Accordion uses the EXT JavaScript Library. Whats really cool about this accordion is that you can drag and drop the accordion slides into new positions.
  
• Spry Accordion – The Spry Accordion comes with tons of different options and effects. It is very easy to implement with Dreamweaver but if you don’t have dreamweaver it is still pretty straight forward. If you don’t have dreamweaver then you can download Spry here.
  

If you know of any other Accordion scripts that are not here please comment. Thank you for your continued support.

ActionScript

• ActionScript Cheat Sheet – Covers everything from ActionScript 2.0 to ActionScript 3.0 and Even Adobe AIR.

Ajax/JavaScript Frameworks

• Prototype Cheat Sheet – Detailed methods and properties of each of the modules within the Prototype JavaScript library.
• Scriptaculous Cheat Sheet – List of the Effects.
• MooTools Cheat Sheet – Details of the MooTools Library.
• jQuery Cheat Sheet – Details of the jQuery Library version 1.2.x.
• YUI Cheat Sheet – This cheat sheet is straight from Yahoo and the download link is at the bottom of the page or you can download the zip file here.

ASP

• ASP/VBScript Cheat Sheet – Everything you want or need to know about ASP and VBScript.

CSS

• CSS level 1 – Includes Fonts, Backgrounds, Text, Box, and Units
• CSS level 2 – Includes Box Model, Print, Fonts, Visual Effects, Pseudo Classes and Elements.
• CSS 2 Quick Reference Guide – Shows you examples on how to use a wide variety of classes
• CSS Cheat Sheet – Lists all selectors (as of CSS 2.1) and properties.
• CSS Property Index – Lists all CSS Properties Alphabetically
• CSS Shorthand Guide – A fairly detailed guide of CSS Shorthand properties

C# and VB.NET

• C# and VB.NET Comparison Cheat Sheet – Cheat sheet that highlights some key syntactical differences between C# and VB.NET.
• C# Basic Reference Sheet – A Brief Cheat sheet to give you the basics of C#.
• VB.NET Basic Reference Sheet – A Brief Cheat sheet to give you the basics of VB.NET.

C++

• C++ Cheat Sheet – This Cheat Sheet shows a list of C++ Containers
• C++ Quick Reference Sheet – Is a Basic Cheat Sheet that doesn’t go that in depth.

JavaScript

• JavaScript Cheat Sheet – The JavaScript cheat sheet is designed to act as a reminder and reference sheet, listing methods and functions of JavaScript.
• JavaScript Quick Reference – Consists of the JavaScript and Browser Objects Quick Reference.
• Regular Expressions for JavaSript – Excerpts of the VisiBone JavaScript references

SQL

• SQL Cheat Sheet – A very Basic SQL Cheat sheet but gives you all the necessary data.
• SQL Server Cheat Sheet – Cheat Sheet to Microsoft’s SQL Server.
• MySQL Cheat Sheet – A quick reference guide for MySQL, including functions (both in MySQL and PHP), data types, and sample queries.

PHP

• PHP Cheat Sheet – This is an in depth cheat sheet for PHP.
• PHP Reference Sheet – This Sheet gives you basic functions for PHP but useful.

If you have any more to add to this list than please comment below. Also if you would like other languages added please comment below

• Yetii – Yetii is an extremely light weight tab script. It is built with no framework and is very easy to install. You can even have a tab nested within another tab.
  
• Advanced Tabs - Advanced Tabs is an EXT JS plugin that allows you to add tabs, tab resizing, and tab scrolling. The code has some very cool features.
  
• Sliding Tabs – Sliding Tabs is a mootools 1.11 plugin that shows the content slide over when you click on the tab or arrow button. It is a really neat effect.
  
• DOMTab – DOMtab is JavaScript that turns a list into a tabular content. It is very lightweight and is easy to implement. It degrades very nicely if your visitor doesn’t allow javascript. DOMtab does have some problems with divs inside the tab content but it is a great script.
  
• Coda-Slider – Coda-Slider is a jQuery Plugin that slides the content over when you click on the tab or the arrow button. It is a cool effect and is fairly easy to install on your site.
  
• Scriptaculous Tabs – Scriptaculous tabs requires the use of obviously scriptaculous and prototype. The script allows you to create interactive tabs for your site and the content box stretches as the more content you put into it.
  
• Ajax Tabs – Ajax Tabs is an easy to implement Dynamic CSS Tab. The user can add and remove tabs (and content) without refreshing the page. It is a very cool concept but just needs some work to make it even better.
  
• MooTabs – MooTabs is a tiny(3kb) class for MooTools. It’s main purpose is to help out with the creation of simple tab navigation. The newest addition to MooTabs is that it now retrieves the content via ajax. It is very easy to install and if you have MooTools than I suggest you check it out.
  
• TabView – TabView is built on Yahoo! UI library and is a good Tab navigation script. It is pretty easy to implement and will allow you to create the same effect that is on Yahoo! homepage.
  
• JavaScript Tabifier – JavaScript Tabifier converts your lists into a tabbed navigation. It is built with no framework and gracefully degrades if JavaScript is not present. With JavaScript Tabifier you can have a tab within a tab and you can use a cookie to remember which tab was selected so it remains selected when you return to the page.
  

If you have any you would like to add or have used some of the above scripts please comment below.

• Password Strength Meter like Google – This script is built with no framework. It works based on a point value that as you use different variations of letters, numbers and symbols your password will be stronger. This script is completely free to use on any project you wish.
  
• Password Meter – Password Meter is built on top of the EXT JavaScript library. It has a very nice animated meter that goes up as you type. It does all of the normal checking of the different variations of upper/lower case letters, numbers and symbols.
  
• Password Strength Meter – This Password Strength Meter is based on a point system. Its main goal is to help the end user with a stronger password. It is very detailed and it might be over detailed but it is one of the best I’ve seen. It is also written with no framework.
  
• ColdFusion Password Strength – This Password Strength meter works fairly well. When you first type in the password field it tells you what you need to make a strong password. Since I haven’t seen another ColdFusion Password Strength scripts I think this would be a nice add for ColdFusion Developers.
  
• Prototype/Scriptaculous Password Strength Meter – This script is written with prototype and scriptaculous. It is a very strong password strength script works very similar to all the others. It uses a point system to calculate the strength of your password.
  
• JQuery Password Strength Meter – Password Strength Meter is a jQuery plug-in that provides a smart algorithm to detect a passwords strength. The Password strength works on a point structure that if you pass a certain test than more points will be added and in turn your password will be more secure.
  
• Another JQuery Password Strength Meter – JQuery password strength meter is a small plugin to jQuery that provides an easy way to show the strength of a user’s (intended) password. It is very easy to implement and I think you should check it out.
  

If you have any more scripts please comment below.

• fValidator – is built over MooTools v1.1 and it supports Multiple forms per page supported. fValidator is compatible and tested in Internet Explorer, Firefox (and its mozilla friends), Opera and Safari
• FormCheck – Works with these types of fields input (text, radio, checkbox),textarea, select. FormCheck is built with MooTools v1.1
  

jQuery Framework

• jQuery Plugin: Validation – is Built with the jQuery 1.2.2+. It works with all the standard form inputs.
• Simple jQuery form validation – This form validator is pretty easy to implement and is built with jQuery. Since the link doesn’t have a download you can download it here http://www.willjessup.com/sandbox/jquery/form_validator/val.js
  
  

Prototype Framework

• LiveValidation – First I want to let you know that this has two versions a prototype version and a standalone version. The Prototype version works great with prototype. LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It is tested and works in most modern browsers.
• JSValidate – JSValidate is a form validator that uses prototype and scriptaculous to bring you a very easy Javascript form validator. The only drawback is that its still in its beta versions.
• Field validation with Prototype – A robust Javascript form validation library built with prototype and scriptaculous. It has a number of tests built-in but is extensible to include your custom validation checks.
  

Spry Framework

• Validation Widget – This Validator works fairly well. It is very easy to implement with Dreamweaver CS3. If you are not using Dreamweaver than you can download their Javascript elements. The only problem I have with this is that every input element has its own external Javascript and CSS.

No Framework

• Clean Form Validation – Clean Form Validation is a very simple Javascript form validation and it is very easy to implement.
• Validate.js – Validate.js is able to validate all sorts of data. It is different from the rest of this list because of it has more ways to validate data, some of which could come in handy.
• LiveValidation – The standalone version works just as well as the prototype version. LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful.
  

If you have any to add to this list then please comment below.

After looking for awhile for a script that will crop your image in the browser I decided to put a list together. I found various types of scripts that will accomplish this. The list below is a list of image cropping scripts.

1. cfImageCropper – This script is written in Coldfusion. The Demo of this script works very well and the code is very simple to implement.
2. jsCropper – This javascript image cropping script is based on the Prototype JavaScript framework and script.aculo.us. jsCropper is one of my favorite copping script. It is very easy to use and its a great unobtrusive script. jsCropper has tons of great features you should check it out.
3. mooImageCrop – mooImageCrop is based on the mootools framework and php. It is very easy to implement.
4. Image Crop – This is a great script written in Javascript and PHP. It requires the install of ImageMagick server component.
5. Ajax Image Editor – Is a very powerful image editor script that allows you to crop, resize, and rotate the image. It is fairly easy to implement and it isn’t written with any frameworks.
6. Flash Image Crop – Is a very nice flash image crop tool written in Actionscript and PHP. The only problem I have with this script is that you have to use the space bar to accept the cropped area and not the enter key. But overall it works very well.
7. Flash Based Cropping tool – This tool is also written in Actionscript and PHP is a very nice script. You can also resize the image with this script.
8. MooCrop -MooCrop is an Image Cropping utility that uses mootools javascript framework.  MooCrop works very fast and you can even edit the color of the mask.

As more cropping tools become available I will be adding to this list. If you have more to add now then please comment below.

1. jqac – Is jQuery plugin for autocomplete. jqac is very easy to implement and has a scrollable suggests list. It also allows for multiple suggests support and is tested in all major browsers.
2. AutoComplete (for Prototype) – This is a script built for the prototype framework and it allows multiple column support. It also is a very nice style built with it.
3. YUI Autocomplete – This script is built with the Yahoo! UI Library. The AutoComplete features navigation of the suggestion box via up/down arrow keys. It is very easy to configure with the Yahoo! UI Library.
4. AJAX autocomplete – Is built with Easy Ajax framework by Jim Roos. It features the the up and down navigation and is fairly easy to implement.
5. Another AutoComplete (prototype) - This prototype framework autocomplete also uses scriptaculous. It has a nice fade in effect when the suggest box appears. It is easy to implement and works with XML data.
6. AutoComplete (mootools) - A MooTools Autocomplete widget that creates a unobtrusive and customizable suggestion box from variable data sources. It also has nice fade in effect.
7. dhtmlxCombo – Is a different from the rest of these. dhtmlxCombo can be used in four modes: an editable select box, a read-only select box, a filter drop down box, and an autocomplete. It also allows for you to add icons to your drop down boxes.
8. AutoSuggest – This AutoSuggest script uses no frameworks. The script allows you to navigate either with the up or down arrows or just click. The script size is under 10k, it even has a fade in effect, and a great 2.0 style.
9. Spry Auto Suggest – This Auto Suggest script is written with Adobe’s spry framework. It has works with all sorts of data formats and languages. It supports keyboard navigation and also allows for multiple suggestions.
10. ASP.Net AutoComplete – This script allows you to add AutoComplete to ASP.Net without using a webservice. This is a great way to add Autocomplete feature to ASP.net

If you would like to add more to this list then please comment below.

1. tEditable – In place editing for tables using the jQuery Framework. It works by allowing you to that edit cells in a table and posted to a server using Ajax.
2. Ajax.InPlaceSelect – This script allows you to change the certain text with a drop down list. It is written with the scriptaculous framework and is very similar to Ajax.In Place Editor.
3. Ajax.In Place Editor – Allows you to edit text either in a single line or multi line format. It is written with the scriptaculous framework.
4. Flicker-Like edit in place – This script removes the use of outdated form interfaces. It will allow you to edit the date in place in real time. It is written with no framework just Ajax. Since its name is Flicker-like you can image that it is very similar to flicker.
5. Jeditable – Edit In Place Plugin For jQuery. This is different from tEditable because it works by allowing you to edit a block of text.
6. inlineEdit2 – Is a lightweight, easy solution at 2KB uncompressed. It is written with mooTools. It allows you to edit the text very easily just by clicking on the text and hit enter when done. This Script doesn’t show a text box when editing.
7. Seamless inline text editing -Written for ASP.Net. It works like the rest of them by clicking on the text and it will become editable.
8. Yahoo UI  Edit in Place – This edit in place uses the Yahoo UI Library.   The effect is very similar to Flicker.  But also allows you to edit lists.
9.  Edit in place – Is written without any framework and written by Tool-Man.org.  This script allows you to edit HTML on the page.  This script also allows you to sort, edit lists, and has a slide show sorter.
10. EditInPlace.org – Is written with the Prototype Framework and allows you to edit text and even have an empty text field that you can edit and save.  It also has edit in place drop down list.

If you have any other edit in place script please tell me about them so I can add them to this list.

1. LightBox 2: In Lightbox 2 you are able to group images together to form a slideshow and it has some fancy transitions. Lightbox 2 only allows the use of Images. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library.
2. ThickBox 3.1: ThickBox is very similar to Lightbox but it allows the use Text content in the box, inline frames, and a login module. ThickBox was built using the super lightweight jQuery library. ThickBox doesn’t have Transitions.
3. MultiBox: Is like lightbox but it supports flash, video, mp3s, and html. MultiBox is built with MooTools.
4. GreyBox: GreyBox can be used to display websites, images and other content. Since this script is written without the use of frameworks it is very lightweight. It’s only 22 KB! This is my favorite script because I don’t like using frameworks in my sites.
5. SexyBox: SexyBox is also written without a framework and what I’ve seen it allows the use of text. I’m not sure if SexyBox can work with images since I have not used it.
6. ShadowBox.js: Shadowbox supports all of the most popular web media formats including images, QuickTime, Windows Media Player, Flash, Flash video, HTML, and even external web pages. Shadowbox supports a host of options that make it highly configurable. I highly recommend this script. It is one of the best.
7. LightView: LightView also supports all of the most popular web media formats including images, QuickTime, Windows Media Player, Flash, Flash video, and HTML. The Difference is LightView uses Prototype and Scriptaculous.
8. GMapsOverlay: GMapsOverlay is very unique from the rest of these. It only works with Google maps but it allows you to set the location on the map. It is built on MooTools.

If you have any more please add them in the comment box.  Thanks!