10 XML with jQuery Tutorial and Plugins

Sam Deering

Today we are giving you a roundup of what we think the top jQuery parsing XML tutorials/plugins that you may find useful if you work with XML. Enjoy!

Related Posts:

1. XML Driven Vertical News Scroller Script Using jQuery vScroller

Adding scrolling content to your website or blog makes much sense – it allows you display latest news, promotions, product updates, announcements, upcoming events, calendar items and much more in a limited space.

XML Driven Vertical News Scroller


2. XML Banner Fader in jQuery

More jQuery animation! This one puts a fading set of banners on your page. It uses simple XML to tell the JavaScript what banners to pull in, and the URLs you want the banners to link to. This is ideal for linking to top featured stories.

XML Banner Fader


3. XML-to-JSON Convertor and Remapper with jQuery

A jQuery plugin for converting data from XML to JSON format. However its real power lies in its ability to also remap data to a different structure.

XML-to-JSON Convertor and Remapper

Source + Demo

4. Uber-customsiable Video Carousel with jQuery

An XML file controls all behavioral and visual aspects of the carousel, though default settings can be overridden at the point of instantiation.

Video Carousel

Source + Demo

5. MapIt-Lite a Customizable Google Map in jQuery

A customizable Google map designed to make work with your locations a breeze.
> One click map locator
> Easy to use XML file
> Customizable jQuery themes
> Clean, simple, organized map locators
> Support and much more…



6. jQuery Multi-level Photo Map

A multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location of the places where each one has a set of images, and the second level shows each single image and its location.

Multi-level Photo Map


7. HTML5 File Uploads with jQuery

Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.

HTML5 File Uploads


8. XML Tree with jQuery

XMLTree is a utility for visualizing and traversing XML in tree format. Callback functions can be specified to fire as you traverse the tree, to which are automatically passed the node you clicked, and its XPath.

XML Tree

Source + Demo

9. JavaScript Turn HTML Tables into Advanced Editable Components: EditableGrid

It is an open source JavaScript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.


Source + Demo

10. BIGrid a Fixed Rows & Fixed Columns table in jQuery

Designed to present your data, especially in the reports for enterprises. The idea comes from the BI system I produced months ago. It would be able to edit data easily, drill down to details easily and AJAX enabled.


Source + Demo