jQuery

Facebook Twitter

jHERE - Maps Made Easy. List of Useful jQuery Plugins. Best jQuery Plugins all in one place.

List of Useful jQuery Plugins

BBQ: Back Button & Query Library Source: Leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. In addition, jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods. ColorBox: Lightbox Source: A light-weight, customizable lightbox plugin Color Picker Source: Selection: A simple component to select color in the same way you select color in Adobe Photoshop Cookie. MobilyMap Demo.

Mobile

Progressive <canvas> pie charts. Peity (sounds like deity) is a simple jQuery plugin that converts an element's content into a simple <svg> mini pie 2/5 donut 5,2,3 line 5,3,9,6,5,9,7,3,5,2 or bar chart 5,3,9,6,5,9,7,3,5,2 and is compatible with any browser that supports <svg>: Chrome, Firefox, IE9+, Opera, Safari.

progressive <canvas> pie charts

Download version 3.1.1 Uncompressed 8.6Kb. 20 Complete scripts to download. I’ve put together a nice little collection of scripts over the past year or so, and have decided as it’s approaching summer in the UK (sorry winter in Australia!)

20 Complete scripts to download

To do a download bundle of 20 assorted scripts where you can get the lot in one click for free! Although donations are also much appreciated. Check out the list below for all the details of the package. Beautiful Background Image Navigation with jQuery. In this tutorial we are going to create a beautiful navigation that has a background image slide effect.

Beautiful Background Image Navigation with jQuery

The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in […] View demoDownload source In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. On top of that we will have sub-menus that appear with their semi-transparent background sliding in. Note: There is a new version which let’s you customize things better:Sliding Background Image Menu with jQuery We will be using the amazing Background-Position Animation Plugin by Alexander Farkas.

The photos that we will be using are from Pat’s beautiful B&W collection on Flickr. We tried to make this one cross-browser compatible and voilà! The Markup The CSS. Spritely.net. Professor Cloud. Cloud Zoom is a popular fly-out jQuery image zoom plugin used on many high profile retail sites.

Professor Cloud

Continuous improvement, regular updates and technical support make it a favoured choice for busy developers who need a mature and reliable jQuery image zoom solution for their clients. Works with jQuery versions 1.4.3 - Latest, 2.0.3 Works with fluid/responsive layouts (e.g. Bootstrap) Works with modal plugins like Fancy Box* for big pop-up images *Fancy box is available separately here. 7 Things I Wish I Had Known About jQuery.

This article is mostly aimed at people who are just starting to learn jQuery.

7 Things I Wish I Had Known About jQuery

I assume you know the following: Base knowledge of JavaScriptWhat jQuery isHow to include jQuery in a web pageBasic knowledge of how to use the $ function (for example: $(‘#test .testing’))Basic understanding of the chainable eventsKnow what $(document).ready(function () { }); does (sometimes seen as $(function () {} ); or $().ready(function() {});)Know intermediate HTML and CSS (lists, padding, colors, borders and margin) If you don’t know anything about how to use jQuery you should read this. This is not meant to be an introduction to jQuery. This is meant for people who have tried jQuery and may have been frustrated because they weren’t sure how to do something correctly. 1: Some Background Info Objects and Methods I know when I started learning jQuery, I wasn’t too familiar with objects and methods.

Think of it this way: Use the following code as an example: var testText = $('div#test').text(); Chainability The CSS. jQuery.ScrollTo. Notice I've pretty much stopped updating this blog, but the plugin development is still on-going.

jQuery.ScrollTo

You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: $('div.pane').scrollTo(); If you need to scroll the window (screen), then use: $.scrollTo(); Using jQuery The Sexy Way: 7 Great Techniques For a Slick Layout. Whatever content you have to present, you can present them in a more interactive & more responsive ways.

Using jQuery The Sexy Way: 7 Great Techniques For a Slick Layout

In this article we’d like to present 7 Impressive techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website. 1. Nivo Slider Nivo Slider is a lightweight (7kb compressed) jQuery plugin for creating good-looking image sliders with 9 unique transition effects.