Best jQuery jSON Plugins & Tutorials with Demo

    JSON Driven Zoomable Drill Down Bar Chart: DDChart

    JSON Driven Zoomable Drill Down Bar Chart: DDChart

    DDChart is a JSON data driven bar chart plugin that creates a classy bar chart with flash like animation effects.

    Its a small yet useful bar chart jQuery plugin that is packed with nice features including:

    • Zoom-in / zoom-out effect on bar charts during drilling up / down with flashy animations
    • Bars, legends, and fonts expand and contract to fit their container
    • On load chart recalculations to fit all containers
    • Automatic drill up breadcumb creation

    How to build a web widget using jQuery

    How to build a web widget using jQuery

    I created some web widgets for the London’s Design Museum and learned a few useful things in the process. Although all the necessary information can be found on the web, I couldn’t find a really comprehensive guide about doing this with jQuery so I decided to write this one. I’ll cover only techniques which are specific to web widgets so you should already be familiar with JavaScript, jQuery and web development if you want to follow easily.

    The interesting points will be:

    • ensure the widget’s code doesn’t accidentally mess up with the rest of the page,
    • dynamically load external CSS and JavaScript files,
    • bypass browsers’ single-origin policy using JSONP.

    Carbon Fiber Signup Form With PHP, jQuery and CSS3

    Carbon Fiber Signup Form With PHP, jQuery and CSS3

    A carbon fiber – style form, build using progressive enhancement. This means that we first ensure that the form works well without JavaScript and fancy CSS support (think of IE6 here) and later move on by layering over cool styling, AJAX and jQuery magic.

    Exposure – jQuery image gallery plugin

    Exposure - jQuery image gallery plugin

    Exposure is an image viewing plugin for the jQuery JavaScript library. It includes a thumbnail list with paging, shows captions, and has also incorporates full screen modal slideshow. It uses some of the core functionality of Exposure, like keyboard and click through navigation, and also includes a nice and smooth custom cross-fade transition effect.

    jQuery Tokeninput – Select multiple items from a predefined list

    jQuery Tokeninput - Select multiple items from a predefined list with autocompletion

    Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they type to find each item.
    Its functionality is similar to the text entry when filling in the recipients fieldwhen sending messages on facebook.

    Adding Weather to Your Site with jQuery and YQL

    Adding Weather to Your Site with jQuery and YQL

    If you’re working on a travel, news or other locally-oriented site, adding a display of the current weather conditions in the local area is the perfect touch. In the past, this was a relatively difficult task, involving server-side integration with weather APIs and more. Today, however, jQuery and YQL (a free web service offered by Yahoo) can be used to easily add a customized weather display to your site. In this article I’ll guide you through the process from start to finish.

    jQuery quickie: Unlimited Scroll using the Twitter API

    jQuery quickie: Unlimited Scroll using the Twitter API

    I’m currently working with Silverlight and implemented unlimited scroll. This is a great technique that could be used on loads of websites. Instead of the regular pagination, where the user has to click to see the next page, unlimited scroll automatically loads the next page when the user is at the bottom.

    I wanted to take this technique and port it to another jQuery example. So the quickie for today is Unlimited scroll using jQuery. I’ve using the Twitter API to make the example, so you’ll learn a little bit about JSON too…

    jqPlot – jQuery plotting and charting plugin

    jqPlot - jQuery plotting and charting plugin

    jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features.

    Pulling Your Flickr Feed with jQuery

    Pulling Your Flickr Feed with jQuery

    Feeds are the easiest way to view updated content, whether it’s through a feed reader or outputted onto a web site. There are many different types of feeds, such as RSS or Atom, and many different ways display them on your site, such as using MagpieRSS to parse an RSS feed in PHP. However, you can also display feeds on your site using JavaScript, so in this post I’m going to be talking about a feed format called JSON and how you can use JavaScript to parse it out and display it…..

    Chained AJAX Selects in jQuery

    Chained AJAX Selects in jQuery

    In today’s tutorial, we will build a set of chained select elements. Selecting an option in one of them will trigger an update on the page, showing you more choices to refine your selection. We will describe the options server side with PHP, so it is easy for you to hook today’s example to a database.