The team at Giva Labs were looking for a method to show off a complex hierarchical tree of options within their software applications and while there are many options in terms of UI controls, they needed something that would be intuitive and offer both mouse and keyboard entry. The requirements were challenging:
Menus must resize and position themselves to stay in the viewport. Options should not show up off screen where users would need to scroll to select them.
Quick keyboard entry. Many users prefer keyboard entry for speed of data entry, so efficient keyboard entry is a must.
Must be able to handle very large complex (deep) data trees, but work equally as well with very small sets of data.
Creates a multi-column hierarchical select UI component
Binds a text input field or div element to a list element (included nested lists)
Menus are automatically split into columns as needed
Menus are positioned to always stay on the screen
Autocomplete keyboard entry (only valid options are allowed)
Menu automatically scrolls into viewport when opened
Although originally designed for internal usage, Giva generously released this jQuery plugin under the Apache License. They’ve also documented the extension clearly and provide excellent examples on how to implement the control.
Just the other day I was chatting with a colleague about how to go about pre-loading images before rendering a cool JavaScript-driven animation; Scott Jehl from the Filament Group wrote in to tell us about a jQuery plug-in that they use for just that purpose:
We recently put out a super handy jQuery plugin for pre-caching all images referenced in linked/imported CSS files.
It's particularly useful for apps with overlays, yet-to-be embedded content, etc. It sure beats maintaining arrays of image paths or making complex CSS sprites.
The script iterates through each rule in each stylesheet attached to the current page and if the rule's value contains an image URL, it loads the image, thus ensuring it's available in the cache when used in the document.
Joining with the Web 2.0 "go-meta" business model that's so popular these days, iWidgets provides a service that lets you build widgets once and deploy them to various popular widget APIs and platforms.
At the heart of iWidgets is a "PowerPoint-like" widget builder that takes strong design cues from Yahoo! Pipes, but as Peter Yared (CEO of iWidgets) says:
then again Pipes looks a lot like Prograph (the original dataflow programming company, where I worked from 1992-1995)
The site transforms the widget you build into:
a native FBML or GoogleGadget/OpenSocial, which are two completely different architectures (serverside vs. clientside), and then call the destination-specific API's for things like persistence whenever possible.
The builder was constructed using jQuery and like Pipes renders the connection lines using <canvas>. Peter shared some of the back story behind building the application:
I wrote the initial builder in [another framework] and found it obtuse. After spending literally a week trying to turn the date picker into a color picker, I threw in the towel. A friend of mine turned me on to jQuery and I fell in love with how clean and fast it was, the way it separates the HTML from JavaScript is beautiful. So I rewrote the builder we had at the time in jQuery in a two week coding session! Soon after that I got funding from Opus Capital, and when I looked to hire people, I found 3 out of 4 of our engineers through the jQuery mailing list. It's funny how things like that work out; I ended up finding total rockstars because they were playing with a cool new library.
Peter also shared some details on the overall development process:
It took us 10 months to build the site, we have had one guy (Richard Hensel) full time on the builder UI with another guy (Jeremy Stanton) on it about 1/3 time, with the rest of his time on the overall site doing the wizards and getting things like the %#$# back button to work. Then there are two guys working on the backend, one on FBML and the other on Gadget/OpenSocial, and we just added a junior AJAX guy. We contribute back where we can, for example Jeremy contributed to the Selectable in jQuery UI. The iWidgets site itself is completely AJAX, data from the server is sent as JSON, and page fragments are rendered with Wicket. We persist the widgets you build as JSON and then transform them on the server into native Facebook, MySpace, iGoogle, etc.
The team has some future plans building on top of an already very cool site:
We have a bunch of features we are rolling out, such as calling JSON and piping the results into different components, repeating table, paging, cut/copy/paste, z-order control, live dataflows in the builder, a background process at amazon that sends out notifications like "joe just shot 2 over par at pebble beach" to newsfeeds to drive virality, more platforms such as the iPhone, etc.
I wonder if this should somehow integrate with Yahoo Widgets, Apple's Dashboard, and other desktop widget platforms... maybe emit a bundle you can download and install into these services?
Our Signal takes Digg, Reddit, Delicious, and Hacker News and creates a full page cloud visualization using jQuery.
The size of the box reflects the popularity, and the color lets you know the acceleration of that popularity. If the color is warm, it is on the rise, and vice versa for cool colors.
I like seeing alternative visualizations, but I have to admit I am not a huge fan of tag cloud style views. You?
The latest Refcard, jQuery Selectors written by authors Bear Bibeault and Yehuda Katz, has been released and is now available for download in PDF format (DZone registration required!)
jQuery selectors are one of the most important aspects of the jQuery library. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively.
The Refcard covers jQuery topics such as the types of jQuery selectors, basic CSS selectors, custom jQuery selectors, matched set methods and more. It also includes very useful "Hot Tips", such as how you can create unions of queries, and beginner mistakes.
Paul Bakaus & the jQuery UI Team has released a major update jQuery UI 1.5.
There seem to be three major pieces to the news:
API Refactoring
What we came up with, was an API that removed 95% of our exposed methods, and kept only one single overloaded method per plugin. For example:
$(â€divâ€).draggable() creates a draggable
$(â€divâ€).draggable(â€destroyâ€) destroys it
$(â€divâ€).draggable(â€methodâ€) calls another method on the plugin.
The new API also makes all callbacks behave similarly, exposes the default options for each plugin and intelligently cleans up plugins using remove(). We also made it possible to update plugin options on the fly, and added smaller updates that make UI feel like one suite.
In order to make this happen, we removed the jquery.dimensions.js (which can now be found in jQuery core), the ui.mouse.js and the *.ext.js dependancies, introduced a ui.core.js (which includes many useful helpers) and created the jQuery UI widget factory which makes creating a new plugin for UI amazingly simple while making it very difficult to break the API.
Effects: Internalizing Enchant
One of the great things in being able to take a step back is that it offers a totally different perspective on what a full-featured UI solution should offer. While jQuery UI v1.0 was currently offering a nice suite of UI controls, users were in need of solid effects like those offered in libraries such as script.aculo.us and jQuery UI’s former inspiration, Interface. Unfortunately, Interface was no longer being updated which left a bit of a hole in terms of effects; hence a new project called “Enchant†was born. Originally planned to be released as a complementary library to jQuery and jQuery UI, we realized that it made perfect sense to merge Enchant with jQuery UI allowing users easy access to advanced effects and UI controls from one solution.
We’re proud to announce that Enchant is now a part of jQuery UI and jQuery users now have a unified solution for their effects and UI needs. The jQuery UI effects can be used standalone or together with UI and have a separate core which extends the jQuery core to introduce advanced easing, class transitions (morphing) and color animations. All effects are tightly integrated into the main API and can be used as standalone ( $(..).effect() ) or directly from within jQuery methods you already know ( hide()/show() ).
Overall, we already have more than 15 ready-to-use effects for you to use in your projects, not only those provided by script.aculo.us (blind,bounce,drop,fold,slide …), but also fresh, new effects (transfer, explode. clip, scale) that make jQuery UI a great library enhancing your applications!
As promised in one of the last blog posts, it comes with a complete documentation and a combined demo page to let you see them in action.
Create your own Themes, with help
ThemeRoller is an application itself that allows you to create themes on the fly and save them out. The Filament Group did the work and blogged about how.
The jQuery team also wanted to give a shout out to Liferay, "who invested countless hours into the development of the new UI website, and with whom we worked closely together to stabilize jQuery UI for all kinds of enterprise situations."
A new release of jQuery is out -- 1.2.6, skipping directly from 1.2.3. Most noteworthy are the performance improvements (you can check out the detailed performance data via this Google Spreadsheet). The headlines on improvements:
Event handling: 103%
CSS selectors: 13%
.offset: 21%
.css: 25%
Lots of other fixes, but the most important, IMHO, is the inclusion of Brandon Aaron's Dimension's plugin -- cross browser support for find element dimensions, offsets and positioning -- in the jQuery core. Check out the release notes here.
The effect of "sliding panels" has become extremely popular for categorizing & displaying large amounts of data on a single page. One of the most notable implementations of this effect was done by Panic to display all of the features and benefits of their Coda web development IDE. Since then, many implementations of this effect have been built and most are now referred to as "Coda sliders" since they provide very similar scrolling capabilities.
Although Panic didn't really invent the effect, the sliding panels on the Coda is great implementation of this effect.
This article will pick apart the pieces required to create the effect, and how to better it.
Remy's tutorial aimed for several goals:
Degrades perfectly without JavaScript enabled
Sliding panels effect without hogging browser CPU
Next and previous buttons added using JavaScript because they hold no use without JavaScript
Hitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigation
Any link on the page that refers back to a panel should trigger the effect and highlight the right navigation - this should happen without any extra work
The tutorial is very detailed walking you through the markup of the page, use of several jQuery plugins, setting up the navigation, and handling the events for the slider. Along with that, Remy created a screencast, available in both Quicktime and Flash formats, that explain how everything is put together.
Dov Katz pointed us to Josh Bochner's labor of love, http://www.jigadig.com/. It's an Ajax-heavy jQuery-powered auction site aggregator. What really got our attention is the search results page, which among other things lets you view full item descriptions in-line without having to jump to a different page, infinitely scroll, and easily "pin" interesting items for later perusal. Nice job Josh, and definitely worth a look.
Ever wanted to create your own isometric pixel picture, but didn't know what the word isometric meant? Well, now you can fulfil your wildest dreams with Cubescape!
That is the headline for Cubescape, a site that released a new jQuery based front end that lets you drop the cubes!
Perfect for a Friday, go ahead and get dropping on this very clean interface.
shortcut links to preset date ranges, for example, "Past 30 days" or "Current YTD,"
links to "All dates before..." and "All dates after..." to simplify selecting a range of values where the data set is very large or the high or low end value is an unknown, and
only showing the number of calendars needed for choosing a particular range (i.e., you only need one calendar to choose "All dates before...", but you'll need two to select a custom range).
Use of progressive enhancement for graceful degradation /li>
John Resig got in front of the camera, and the projector, as he gives us his thoughts on the state, and future of Ajax.
He starts out by discussing jQuery Core, and the features in the near term (1.2.4), short term (1.3) and beyond. He then delves into the UI side of the house with jQuery UI 1.5. He segues from jQuery to the future of browsers and JavaScript in general.
A new release of jQuery is out -- 1.2.6, skipping directly from 1.2.3. Most noteworthy are the performance improvements (you can check out the detailed performance data via this 
