Main

jQuery UI launches

Sep 17 by Andre

John Resig and team have officially launched their long-awaited jQuery UI library early this morning. jQuery UI provides "higher-order" effects like magnification and drag-and-drop. It also provides themeable widgets (tabs, accordions, sortable tables, calendars, etc). Here are the key links:

My impression so far is that this initial release is a little rough. Like any ambitious cross-browser effort, it will go an iteration or two, gaining polish and stability.

A final note: if you're used to check in on the jQuery group for news, note that there's a separate group for UI: http://groups.google.com/group/jquery-ui.

Continue reading "jQuery UI launches"»

jQuery and yui-ext

Feb 19 by Andre

As a self-professed JavaScript geek, I love jQuery. The library just keeps getting better, and the community that John Resig has built is incredible. John's announcement today -- that jQuery is teaming up with yui-ext -- is great news. If you haven't seen Jack Slocum's yui-ext library, go check out the demos for some inspiring examples.

Continue reading "jQuery and yui-ext"»

An Experiment with Visual and Semantic Relationships

Nov 16 by Andre

I am very interested in online collaboration tools. This experiment is an early offshoot of some tools and techniques I am developing:

A visual 'map' as a collaborative workspace. In this case, the goal is to build a visual representation of the Web 2.0 space, including entities (people, concepts, companies) and relationships among those entities.

Feel free to participate! Just three things you need to do:

  • Drag things around . . .
  • Right click! (control-click on Mac)
  • Select "relationships" from the right-click popup

Try it out at http://web20.earthcode.com

Continue reading "An Experiment with Visual and Semantic Relationships"»

jQuery plugin goodness

Jul 24 by Andre
There is a lot of good plugin development going on for jQuery. Here are two which have come up on the list lately:

HighlightFade by Blair Mitchelmore is a very thorough jQuery implementation of the "yellow fade" technique. Options include the type of fade (linear, sinusoidal, exponential), the duration, and a function to call on completion. The plugin weighs in at 3.5K (uncompressed, so it could be made smaller), and should handle all your yellow-fading needs.

tablesorter by Christian Bach is browser-side table sorter (click on a column heading to sort the table accordingly). It's fast (in the demo, sorts 400 rows in about .3 seconds), and it auto-detects the column type to provide the appropriate kind of sorting. For example, it automatically recognizes date vs. text vs. URL contents, and sorts accordingly. For URLs, it disregards the http/https/ftp/file prefix for sorting purposes, which is more likely to give you the sort you actually want. You can also define your own auto-detects, which usually involves 5-10 lines of code. The plugin is about 10.5K uncompressed.

Did you know there are lots more jQuery plugins listed on the wiki at http://proj.jquery.com/plugins? Note that the URL to the wiki will change when jQuery goes 1.0.

Continue reading "jQuery plugin goodness"»

I'm contributing to the jQuery blog

Jul 23 by Andre
I am going to be contributing to the official jQuery blog from time to time -- starting with my next post on jQuery plugins. Most posts that I put on the jQuery blog will also appear here.

As you probably know, I've been a fan of jQuery for some time, and have been using it on some of my Rails projects instead of Prototype.js. I'm happy to be working with John Resig and the rest of the jQuey community to get the word out on this great library.

Continue reading "I'm contributing to the jQuery blog"»

Presentation af SF Ruby meetup

Jul 11 by Andre
If you were there for my presentation at the San Francisco Ruby meetup this evening -- thanks for coming! I was impressed by the turnout and the thoughtful questions everyone was asking.

The final slide was some resources from the talk you may find useful:
  • SF Wireless: http://wifi.earthcode.com
  • jQuery tutorial: http://15daysofjquery.com
  • jQuery CSS selectors: http://jquery.com/docs/CSS/
  • jQuery interface library: http://eyecon.ro/interface
  • jQuery interactive documentation: http://visualjquery.com
  • JSLog: http://earthcode.com/blog/2005/12/jslog.html
  • Rails & geocoding: http://earthcode.com/blog/2006/04/rails_geocoding_and_google_map.html
I'll be putting up a detailed tutorial on the Google Maps Zoom Control soon.

Continue reading "Presentation af SF Ruby meetup"»

Lightbox for Modal Dialogs Redux

Jul 10 by Andre

Since I last posted on Lightbox for modal dialogs in May, some additional relevant projects have sprung up. This is a roundup of more Lightbox-type modal dialog options. As you go about choosing the perfect script for your needs, Here are some questions to keep in mind:

  1. What's your content? Do you need to just display images? Or arbitrary HTML? Many scripts support both, and some are tailored around displaying images very easily.
  2. Is your content remote? You may need to retrieve your content from the server, or the content may already be rendered on the page in a hidden div. I actually find the second case the more common one -- the dialog content is already loaded on the page, and I just want to reveal it in a modal window.
  3. What are your bandwidth requirements? These scripts vary quite a bit in size. If you're building an internal application you can get away with a bulkier script, but otherwise you might want to look for one of the leaner ones.
  4. How important is look-and-feel? Some of these scripts offer a slick and customizable look, and others are more spartan. I appreciate the nice looking options, but usually end up using the scripts with less flourish. Your needs may be different.
  5. What JS Library are you using? Prototype? Moo.fx? Dojo? jQuery? Your choice may narrow the field for modal scripts, since you typically will not include another whole JS library just for the modal dialog functionality.

Continue reading "Lightbox for Modal Dialogs Redux"»

Unobtrusive tabs, Drag & Drop, and more

May 18 by Andre

You may know from my previous posts that I've been moving away from Prototype/Scriptaculous and toward jQuery for JS/AJAX programming, primarily for jQuery's powerful selectors, code-shrinking chaining model, and light weight.

jQuery also has an active development community, working off of a plugin architecture which allows incremental inclusion of only the modules you need. The community is coming out with some awesome plugins, which will further shrink the functional gap between jQuery and Prototype/Scriptaculous. Below are three exceptional ones from the jQuery mailing list:

Draggable, sortable lists
All the major functions are here: dragging, sorting, target outlines, drop zone highlighting, drag-time ghosting.
Selectables
Define a rectangle by clicking and dragging, and select the elements which fall within the rectangle -- just like selecting icons on your desktop or a group of photos in Picassa.
Accessible, unobtrusive tabs
Render a nice tabbed structure with one line of Javascript. The markup on which the plugin operates is very natural -- the tabs are rendered from a list of anchor tags, exactly how you would (for example) markup a table of contents.

Continue reading "Unobtrusive tabs, Drag & Drop, and more"»

Lightbox for modal dialogs

Apr 25 by Andre
I'm working on a project which incorporates some AJAXy modal-dialog-like popups. Which prompted me to look into the lightbox-type projects there that would fit the bill. These are the three main projects I found:

Continue reading "Lightbox for modal dialogs"»