jQuery


jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.


Monday, February 16th, 2009

xLazyLoader: Lazy loader callback framework

Category: JavaScript, jQuery, Library

Oleg Slobodskoi, guru behind jimdo.com, has open sourced xLazyLoader a jQuery plugin that lets you asynchronously load resources such as JavaScript, CSS, and images. Quite useful if you want to head of and load some CSS to do something custom and you need the callback. Example < View plain text > javascript $.xLazyLoader({     Read the rest…

Posted by Dion Almaer at 6:55 am
Comment here

+++--
3.6 rating from 50 votes

Friday, January 30th, 2009

w00t! Feeling Chatty

Category: Aptana, JavaScript, jQuery, Showcase

Live Ajax chat is one of those Comet 101 kind of examples (as RSS readers were to Ajax back in the day!). We saw a couple of items from this meme recently. First, jChat, a showcase chat application using Jaxer: Jaxer ships with a number of basic samples, but I’ve seen quite a few people Read the rest…

Posted by Dion Almaer at 5:16 am
8 Comments

+++--
3.3 rating from 31 votes

Thursday, January 29th, 2009

Rotate images with Canvas jQuery plugin

Category: Canvas, jQuery

Pawel Witkowski released an interesting jQuery plugin called Wilq32.RotateImage that lets you rotate images simply: < View plain text > javascript // just do it 5 degrees $(‘#image2’).rotate({angle:5});   // animate the rotation var rot=$(‘#image3’).rotate({maxAngle:25,minAngle:-55,   bind: [     {"mouseover":function(){rot.rotateAnimation(85);}},     {"mouseout":function(){rot.rotateAnimation(-35);}}   ] }); You can also do this type of thing Read the rest…

Posted by Dion Almaer at 4:20 am
3 Comments

++---
2.7 rating from 6 votes

Tuesday, January 20th, 2009

Sexy Page Curls

Category: Component, jQuery

I thought that sexy curls were not related to technology, but Elliott Kember packaged a nice and easy page curl plugin using jQuery. All you need to do is: < View plain text > HTML <script type="text/javascript" src="turn/turn.js"></script> <link rel="stylesheet" type="text/css" href="turn/turn.css">   <script> $(document).ready(function(){     $( ‘#target’ ).fold(); }); </script>

Posted by Dion Almaer at 7:08 am
6 Comments

+++--
3.7 rating from 60 votes

Friday, January 16th, 2009

Filament Group Goodness Using jQuery UI

Category: jQuery

We’ve featured the work of the Filament Group in the past and here they are again leveraging jQuery UI RC5 to really enhance some of their controls. Date Range Picker The Date Range Picker goes beyond the normal date picker control by Allowing presets such ‘Specific Date’, ‘All Dates Before’, ‘All Dates After’, ‘Date Range’ Read the rest…

Posted by Rey Bango at 12:39 pm
29 Comments

+++--
3.7 rating from 75 votes

Wednesday, January 14th, 2009

Happy Birthday jQuery! v1.3 is Released

Category: jQuery

Disclosure: I’m a member of the jQuery Project team Back on January 14, 2006, a brash, young and talented developer named John Resig put out a personal project to the OSS world and hoped it could benefit *someone*. Little did he know that 3 years later, his side project would become one of the most Read the rest…

Posted by Rey Bango at 10:19 am
20 Comments

++++-
4.4 rating from 104 votes

Friday, January 9th, 2009

Beautiful Code Documentation

Category: jQuery, Library

Atul Varma (who I have the absolute pleasure to work with now) has created code documentation that actually looks beautiful. Typography matters. You can check it out via his Ubiquity documentation example that shows you side by side documentation with the actual source code itself. This context is terrific. He does this all dynamically, and Read the rest…

Posted by Dion Almaer at 9:11 am
8 Comments

+++--
3.5 rating from 59 votes

Thursday, January 8th, 2009

jQuery pageSlide: throwing content around

Category: Component, Examples, jQuery

Scott Robbin (Songza co-founder) has created a very cool jQuery plugin for pageSlide, an interaction based off of Aza’s prototypes for Firefox Mobile and Ubiquity mouse gestures. The plugin wraps body content into a container and shifts it off of the page whenever a click event is fired, revealing a secondary interaction pane. This plugin Read the rest…

Posted by Dion Almaer at 9:10 am
7 Comments

+++--
3.7 rating from 70 votes

Monday, December 22nd, 2008

jQuery 1.3 beta: Sizzling and feature testing

Category: jQuery

jQuery 1.3 beta 1 has been released with John and the team asking for testing help. This is a big release as a lot has been changed: Sizzle has been integrated No more browser testing: For example, no more if ( jQuery.browser.msie && !jQuery.isXMLDoc(this) ) { which is replaced with if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this) Read the rest…

Posted by Dion Almaer at 1:39 pm
27 Comments

+++--
3.8 rating from 64 votes

jQuery Gestures

Category: JavaScript, jQuery, Library

Adrien Friggeri has taken the music player ui and spent some time to create a really nice gestures library that allows you to add mouse gestures to a web page, supports complex (i.e. sequences of) gestures and provides visual feedback through the use of a canvas element. Example code looks like this: < View plain Read the rest…

Posted by Dion Almaer at 8:28 am
10 Comments

+++--
3.9 rating from 39 votes

Wednesday, December 17th, 2008

Music Player UI

Category: jQuery, Showcase, UI

Yensdesign has a nice little example of a music player UI that uses mouse gestures and key handling to give a clean experience. Songza did a great job here, and I still use it to find songs for the kids.

Posted by Dion Almaer at 6:31 am
3 Comments

+++--
3.3 rating from 28 votes

Monday, December 15th, 2008

The Cloud Player: Web-based iTunes using jQuery

Category: Examples, jQuery, Sound

Eric Wahlforss, the founder of SoundCloud, wrote in to tell us about “The Cloud Player“, a iTunes / Songbird clone written entirely in Ajax: we just released an open-source itunes-clone built in jquery (and app engine, soundmanager 2, soundcloud api), complete with smart playlists, drag’n’drop, keyboard shortcuts, load-as-you-scroll playlists, playlist sharing, waveform display of tracks, Read the rest…

Posted by Ben Galbraith at 1:11 pm
11 Comments

+++--
3.5 rating from 45 votes

Extending jQuery selectors with JavaScript

Category: jQuery

< View plain text > javascript // Flag images upon load: $(‘img’).load(function(){     $(this).data(‘loaded’,true); });   // Extend expr: $.extend($.expr[‘:’],{     loaded: function(a) {         return $(a).data(‘loaded’);     } });   // Example of usage: alert( ‘Images loaded so far: ‘ + $(‘img:loaded’).size() ); This code is one example Read the rest…

Posted by Dion Almaer at 6:15 am
2 Comments

+++--
3.8 rating from 50 votes

Friday, December 5th, 2008

JSOS: jQuery based desktop

Category: jQuery, Showcase

There have been plenty of JavaScript desktop in the browsers of the years (ah WebOS!). James Luterek has posted about the latest jQuery based desktop environment. I started creating an operating system like user interface in JavaScript. I had intended to use it for the admin sections of my content management system(that runs this website), Read the rest…

Posted by Dion Almaer at 2:16 pm
14 Comments

++---
2.5 rating from 101 votes

Wednesday, December 3rd, 2008

A great example of sharing; Sizzle Engine in Dojo Foundation

Category: CSS, Dojo, JavaScript, jQuery, Library, Prototype

Voting has started in Dojo land to take in John Resig’s Sizzle next-gem CSS selector engine. This is incredibly exciting, as it shows how Ajax libraries are working together more and more. Instead of reinventing the wheel in different ways for each project, is it possible to find some core pieces that can be nicely Read the rest…

Posted by Dion Almaer at 12:58 am
11 Comments

++++-
4.2 rating from 66 votes

Friday, November 28th, 2008

s3slider: fading gracefully

Category: jQuery

s3slider is a simple jQuery plugin that smoothly lets you fade through a set of images. You include the script and then: < View plain text > HTML // setup the images <div id="s3slider">    <ul id="s3sliderContent">       <li class="s3sliderImage">           <img src="#" />           Read the rest…

Posted by Dion Almaer at 4:15 am
4 Comments

+++--
3.5 rating from 23 votes