A look at the creative use of jQuery to bring out attractively useful web applications. This is a handpicked collection of the best jQuery web applications that I havecome across. Add a style statement and great functionality combo with these amazing jQuery web apps.

1. Simplest jQuery Spotlight Effect Tutorial



This tutorial will guide you how to build a spotlight effect with caption. I have seen someone use this technique before, I think that is cool, so I decided to spice thing up a little bit by adding a caption into it.



2. BlogSlideShow jQuery Plugin



BlogSlideShow is a free open-code JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3 or HTML5-related ones. All what you need is to provide links on your images. Likely you already have images on blog pages linked. Just add rel attribute containing blogslideshow to them.



3. Fun With Canvas Create a Bar Graphing Plugin

In this two-part series, we will combine the versatile canvas element with the robust jQuery library to create a bar graphing plugin. In this first part, we are going to code the core logic of the plugin as a standalone version.



4. jQuery ptTimeSelect

ptTimeSelect is a jQuery plugin that provides a UI for a user to define and set a time on a user form.



5. Create Sliding Checkbox Actions Menu With jQuery

In this tutorial we will create an actions menu with jQuery that appears when checkboxes are selected. This can be a very helpful UI property since we do not force the user to scroll to the place where the actions are ? they just appear whenever the user needs them.



6. How To Build a Widget to Display your Buzzing

A couple months ago, Google released a new Twitter-like service, called Buzz. We can use this service to display our latest buzzes on any site. So, in this tutorial, I will guide you through the process of building your own Buzz widget.



7. Magic Scroller

A practical and easy to implement plugin, this vertical scroll show elements with an elegant style using slice effect, creating a diferent perspective.



8. Text Over Image With jQuery

This post will show you how much jQuery is helpful to give a trendy face of the presentation of your images. There are some developers who want only to put fixed text messages above the images. But there are others who like to add some spices to their images look. This plugin creates an animated text effect when the user hovers over an image and will disappear when the mouse is out of the image.



9. WriteMaps

WriteMaps is a free web-based tool that allows you to create, edit, and share sitemaps online. As a WriteMaps user, you and your team will be able to build and access your sitemaps from anywhere, without having to rely on proprietary desktop apps and static files.



10. Genfavicon

Genfavicon jQuery web application lets you create wonderful favicons for your websites in a jiffy.



11. How to Create a Theme-Switcher in 200 Seconds

Have you ever seen sites that offer some kind of color-switcher within the header section? Want to know how easy it is to replicate? I will show you in 200 seconds, using jQuery.



12. Simple Draggable Element Persistence with jQuery

At some point you may need to create a draggable element within your web application. This is great functionality, however you may want or find that you need the element to stay in place after being dragged around. In this tutorial I will show you how to easily drag an element and make it stick, even after a page reload, by grabbing and storing its X and Y coordinates.



13. Drag to Share

We have all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it. It is brilliant and intuitive, and in this article I am going to show you how we can replicate this behavior with jQuery and jQuery UI.



14. How to Create a Simple iTunes-like Slider

When space is at a premium, making use of sliders is the optimal way to present information. Today, we will take a look at how to create a slider similar to the one used in the iTunes store.



15. Awesome Mobile Image Gallery Web App

With more and more users browsing the web with a mobile device, it is time to begin with mobile web development. In this tutorial we are going to develop a simple mobile image gallery using the amazing jQTouch jQuery plugin for mobile web development. jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, iPod Touch, G1, and Pre. Our little application is going to show some albums in a list view which will reveal a wall of thum



16. How to Create a Drop-down Nav Menu with HTML5 CSS3 and jQuery

In this tutorial, we will take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We will also use jQuery to handle the effects and add the finishing touches for us.



17. Apple-like Retina Effect With jQuery

Apple has long applied a winning strategy in marketing ? create well designed products, have a dedicated fan base, and let the hype build up before every product release. This is also the case with the latest version of their iPhone. But what I found interesting is the term they coined ? Retina display and the promo image accompanying it. What made me wonder is if it was possible to turn this static image into a fully functional Retina effect with only jQuery and CSS. This is exactly what we are



18. Building a 5 Star Rating System with jQuery AJAX and PHP

In this tutorial, you will learn how to build a rating system with AJAX, PHP, and jQuery. Votes will be recorded and updated in real-time with the magic of AJAX, and we will also leverage the power of PHP so that you do not even need a database.



19. Beautiful Slide Out Navigation Revised

After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone! Like Stefan Matei pointed out, it might be quite cute but we don?t want the user to hover over all options first, in order to see what menu items exit. So, I thought about labeling the menu items and making them stick out, so the user can always see what the navigation entails. Being in a horizontal position makes everything readable and when



20. Creating a Rotating Billboard System with jQuery and CSS

Currently we are in the hey, lets do that flash thing in jQuery-mood and so we came up with another idea: a rotating billboard system. In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one, the other ad appear. We will decrease the width of each disappearing slice and increase the width of each appearing slice. This will give the effect of rotating slices, just li

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>