Archives for: November 2008, 12

jQuery Spy - streaming updates

by Jack K

OK, here's something I've always thought was cool and am seeking a project to use it on:

http://leftlogic.com/lounge/articles/jquery_spy2/

Basically, it shows a set of self-updating data with "older" items fading out of view as time goes by. Not sure what I mean? Check out one of the examples:

http://leftlogic.com/jquery/spy.html

Recently FriendFeed deployed something like this. Here's Robert Scobles, usually pretty active:

http://friendfeed.com/scobleizer/friends/realtime

No fade-out there, but you get the idea. And hey, they use jQuery, too!


Visual jQuery 1.2.6 - yay!

by Jack K

I used to use this all the time back in the jQuery 1.1 days.... then it kinda languished, but now it's back (thanks Remy and Yehuda!). This is a really nice looking, easy to drill into document for jQuery functions:

http://www.visualjquery.com/

If you're drilling down to find what you need, it helps if you know where to look, but if you're not, there's a very fast "filter" at the top that can help. I'd venture to guess it stemmed from this:

http://remysharp.com/jquery-api/

which I remember digging a few months ago. Here's the blog entry for that. It's got an Adobe AIR version, too:

http://remysharp.com/2008/07/04/jquery-api-update-offline-and-anywhere/

Handy stuff. Thanks guys!

jquery ActsAsTreeTable plugin: turn a table into a tree

by Jack K

This jQuery plugin lets you turn a table of data into an expandable/collapsible tree, allowing you to have a tree that has multiple columns of data:

http://ludo.cubicphuse.nl/jquery-plugins/acts_as_tree_table/doc/index.html

The examples show a typical use case scenario for something like a file browser. We're using it for an expand/collapse tree for an ajax-oriented product editor, where the tree table shows a hierarchy of products and categories and the user expands the tree to get to the levels/products that they want to work with.

By using a multi-column tree, the user gets a nice little subset of info for each product (SKU, amount available, etc) to help them decide whether to click on it and go into full edit mode (in another div on the screen) for the product.

Getting the CSS right is a little quirky: the expand/collapse icons keep wanting to appear outside the table, but we'll figure it out. There's a table row id/class naming convention that has to be adhered to so that the data knows parent/child relationships, which makes sense.

UPDATE 11/24: There's a new version of this plugin available:

http://blog.cubicphuse.nl/2008/11/12/jquery-treetable-2-0. This version adds options for drag and drop and gives the plugin a new name: jQuery treeTable 2.0.