The jQuery Mobile Icon Pack extends jQuery Mobile's default icon set with 173 crisp icons covering a wide range of categories including currency symbols, media control, social media, common application icons. You can preview either the original icon pack, or the brand new Font Awesome based icon pack using the buttons above. Download the icon pack using the button below.

jQuery Mobile is very easy to use. For anyone who knows jQuery, it's also very easy to manipulate. But with great power comes great responsibility. I've been working with JQM in a corporate and small business settings since it was in alpha 2 and these are some of the lessons I've learned. If you take these to heart, hopefully I can save you some of the same headaches.  Much of this is true about going mobile for anyone. jQuery Mobile was simply my chosen platform.  I stand by that choice.

Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.

started as a jQuery port of
impress.jscreated by Bartek Szopka
but with a different goal in mind. Why keep it behind a podium? Let's make websites!

Twitter Bootstrap jQuery Mobile Theme
A jQuery Mobile theme based on Twitter Bootstrap.

The title says it all. I thought it would be a fun project to build out a jQuery Mobile theme emulating everyone's favorite hotness, the Twitter Bootstrap UI library. It's not a perfect translation of course, but consider it a work in progress.

After extensively testing both of the primary scrolling options for jQuery Mobile I feel like the jQuery Mobile Scrollview is the best solution. It was very easy to install and configure, offered great support on iPhone and Android devices, and has more options and configurations available to customize your application. In addition, it may at some point be integrated into jQuery mobile as default functionality to serve as a bridge until position:fixed and overflow are full supported by the majority of active smartphones.

jQuery validation engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter.

Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.

Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website.  It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.

Uploadify was born out of the need for a multiple file upload utility for a CMS that was being developed.  After evaluating the other available options, RonnieSan decided the best option was to build a new plug-in and make it available to the development community.  In order to make the plug-in easy to implement and highly-customizable, the jQuery format was chosen.  After word got out, the popularity of the plug-in spawned the need for a dedicated site.  Travis Nickels volunteered his help to refine the Uploadify plug-in and make it what it is today.

jQuery File Upload is a plugin for the popular JavaScript framework that helps handling file uploads.

The plugin is based on open standards like HTML5-JavaScript and doesn't use Flash. For legacy browsers it falls back to an Ajaxed-like iframe-PHP solution.

If you’ve ever wanted to allow people on your website to upload files to Amazon S3, you’ll know the only real way to do this is with flash – as it allows the client to upload directly instead of funneling all traffic through your server. You could write your own script for this, however there’s already a nifty little prebuilt tool I’m sure you’ve already heard of called Uploadify which can not only do the job for you, it can do so with great flexability.

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML.

Why use Tempo?
Clear separation of concerns: no HTML in your JavaScript files
It makes AJAX content easier to work with
It's as friendly as a bunny rabbit (which are quite friendly)

Key Features
Works in Safari, Chrome, FireFox, Opera, and Internet Explorer 6+
Itty-bitty footprint, lightning-fast rendering!
No dependencies - Works with or without jQuery
Degrades gracefully if JavaScript is not enabled
Supports nested and conditional templates

A jQuery plugin for rendering rich, fast-performing photo galleries
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.


Features

Smart image preloading after the page is loaded
Thumbnail navigation (with pagination)
jQuery.history plugin integration to support bookmark-friendly URLs per-image
Slideshow (with optional auto-updating url bookmarks)
Keyboard navigation
Events that allow for adding your own custom transition effects
API for controlling the gallery with custom controls
Support for image captions
Flexible configuration
Graceful degradation when javascript is not available
Support for multiple galleries per page

Simple, it's just a skeleton of a jQuery plugin that you can download, clone, fork, whatever. I'm putting it on Github mainly for myself. It also includes an MIT license at the top of the skeleton.

In this article, I’ll describe some techniques to assist you in the debugging process when you are using jQuery in client-side Web development. Thankfully, we have much better tools and technologies than developers had even five years ago.

It all began with a simple web foray to Designing Monsters. Their simple, typographic design was beautiful. But why? Their combination of the beautiful League Gothic font, use of Lettering.JS, and some simple font scaling gave the page a wonderful consistent vertical alignment. Like the Million Dollar Homepage, I wanted to rebuild it — but I didn’t want to spend a lot of time manually adjusting font sizes. So I did what any programmer with the jQuery Golden Hammer would do, I turned my problem into a nail.


At it’s simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child <div>s to fit the width of the parent element. Gives the text that lovely vertical alignment.

Have you ever had a DOM element that you wanted lightboxed, but didn't want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you.

Lightbox_me is an essential tool for the jQuery developer's toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss.

SliderNav is a plugin that lets you add dynamic, sliding content using a vertical navigation bar (index). It's made mainly for alphabetical listings but can be used with anything, though longer words look a little awkward (see example 2).

jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS.

jScrollPane is crossbrowser, working on all browsers that support jquery and it also degrades gracefully. If a user's browser doesn't support jQuery or has JavaScript turned off then they will see the browsers default scrollbars. If the mouse wheel plugin is included in the page then the scroll panes will respond to mouse wheel events as well.

jScrollPane is built on top of the awesome jQuery library and optionally utilises the mouse wheel plugin and the jQEm plugin

This was written largely to help me make sense of using UI to create my own widgets, but I hope it may help others. "Widget" to me means a user-interface element, like a button or something more complicated like a popup date picker, but in jQuery UI terms it means a class, members of which are associated with HTML elements; things like Draggable and Sortable. In fact, not everything that I would have called a widget uses $.widget; the UI datepicker does not.

Today you will learn, how you can create a Flash-like effect with only using a few lines of jQuery and a transparent PNG as mask.

Not only will you be able to dynamically change the color of the logo, but also add patterns as you wish and even animate them later with a few lines of code. With this technique you will also be able to add transition effects and control any single part of the colors, patterns and animations.

There are loads of great jQuery plugins, some more useful than others. The two I’ve recently used quite heavily are Galleria and jCarousel. Both well known for their flexibility and the ease of customization. But what if you’d like to make them work together to build an image gallery?

jQuery Slider is easy to use and multifunctional jQuery plugin.

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

What is gMap?
gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons.

Horizontal sliding panels are great for many situations, but like everything else, they’re not always ideal. It depends on the project. To see what I mean by ‘horizontal sliding panel‘, go have a look at my other site Design-Newz, and click on the ‘want more‘ button that’s on the right above the navigation bar.

The Plan
So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I've always liked the way the menu on MooTools worked. So in this tutorial we'll recreate that same effect ... but we'll do it in jQuery!

A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user's interactions in a dynamic way that standards-based web sites haven't been able to replicate.

Lately that's been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It's high time to revisit the CSS Sprites technique from four years ago, and see if we can't interject a little bit of movement of our own.

The examples below demonstrate inline CSS Sprites2, the technique we'll be covering in this article:

Home About Services Contact
Home About Services Contact
Home About Services Contact
Enter the jQuery
So here's the first caveat: we're going to lean on jQuery to make this happen. jQuery is a maturing JavaScript library that does the same neat stuff as all the other JavaScript libraries, and it has an additional advantage that lends itself particularly well to extending CSS Sprites: jQuery allows us to select elements on a page using a CSS-like syntax that we already know.

Några enkla saker att tänka på när man ska använda jQuery i Drupal.

En smart och bra färgväljare i javascript för webbsidor.