It makes life easy to do sliders and the like:

But, it can do so much more. Most of the power comes from tying functions into the drag movements. A good example here is the font size widget that they show:

Continuing on from here, you can see rich examples such as this component that looks like a rich carousel-esque widget from the front of a news paper:

It calculates precise position of characters in <textarea> or <input> tag and places completion proposals popup under it. You can explicitly call popup window to assist/replace word (depends on caret position) with Ctrl+Space (buggy in Firefox and Opera) or Alt+Space (buggy in Opera). The project is based on Eclipse IDE's content assist architecture, it has some common class names and methods. The default implementation works with fixed words vocabulary, but developers can easily modify or extend some classes to match their needs.

The API is easy to use. For example:

Works even in IE6

Love that quote from the color picker over at RaphaelJS land. This plugin by Dmitry Baranovskiy gives you an easy color picker in short order:

Various backends support different feature sets:

You can use a core API like this...

... and a jQuery Queue Widget.

Alex MacCaw has released Machsend, a Yahoo! Browser Plus plugin that enables P2P file transfers from inside the browser.

It showcases what can be done with a BP plugin, leaving you wish cross browser functionality.

I guess it is kinda fun to hack the browser :)

John told us:

Canvas-rendering corrects GChart's most serious visual quality limitations (including the most often mentioned problem by its users: the banded-filled pie slice).

Coupled with its existing feature set and ease of GWT integration, the canvas-rendering option makes GChart an excellent choice for those who want to add basic charts to a GWT application without a lot of fuss.

To access these features, you'll need to plug an external canvas library into GChart (GWTCanvas in the gwt-incubator is reccommended) as described in detail in the setCanvasFactory method.

With the external canvas in place, the next step is to tell GChart you want a curve to be "continuously filled" by invoking setFillSpacing(0).

With each such continuously filled curve, GChart automatically exploits your external canvas library to improved the quality and speed of that curve's rendering. Specifically, banded-filled pie slices become solid filled, dotted connecting lines become continuously connected, and (the biggest stretch) bar charts become area charts. See the setFillSpacing method's javadocs for a detailed description of how each existing symbol type implements this new "continuously-filled", canvas-powered, rendering option.

Note that GChart's previous HTML-only rendering is still available, and is the default rendering mode if you don't bother to plug in an external canvas.

Check out the demo

It is trivial to use. Once you load up the script (requires Prototype 1.6+) you can:

where the four parameters are:

• Menu id (In the example: my-menu)
• Delay before closing the menu (In the example: 400 ms)
• The classname to add when hovering over menuitems (In the example: hover)
• Whether or not the menu should remove .active classnames when your visitor hovers over the menu (In the example: false)

Francisco Tolmasky presented on the latest goodies from 280North at JSConf. In the past we've given the 280North guys a bad time for talking about 280Slides and their other stuff using... Keynote. I don't know if he used Keynote at JSConf, but Francisco published the slides using the 280Slides web-based presentation viewer, which is also embeddable:

(We like the embedded viewer, but did they have to make it swallow common keystrokes? On Firefox OS X, once we embed this IFrame, APPLE-W makes the slide turn white. 10 points for a cool feature, -100 points for hijacking the browser in this context.)

The slides make for a good review of Cappuccino but just include brief mentions of the other interesting bits, such as the new Aristo theme designed by SOFA and the amazing Atlas.

Fortunately, there is a recent video of a talk by Francisco on March 30 to the CocoaHeads user group:

Enjoy!

Over at devthought, Guillermo Ranch has rewritten his clone of Facebook's "TextboxList" component:

It’s been some time since TextboxList got some attention. It is undoubtedly one of the my most popular JavaScript projects, along with the famous Fancy Menu (MorphList) and its slideshow sibling, BarackSlideshow.

TextboxList has been rewritten from scratch, and it’s more solid than ever. The first time around, elegance was not one of the goals. I focused on releasing the first open source script that reproduced the Facebook’s tokenizer.

Changes include:

* Compatible with MooTools 1.2.x
* New options, such as addOnEnter, which adds boxes upon pressing enter (useful for tags or categories widgets).
* More events, which gives the developer more power to extend it.
* Each element is now identified by an id, a plain value and a HTML value.
* Use of control, alt, meta keys no longer interfere with the elements keyboard navigation.
* Bugs with text selection fixed.
* Improved API, even more extensible.
* Plugins support

It also includes an autocomplete plug-in, which has its own feature list:

* Flexible. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere.
* Binary search for maximum performance
* Simpler CSS with comments for non-experienced developers.

Guillermo tells us that a Dojo version is in the works, and Ajaxian reader Thomas Aylott adds "This thing is seriously awesome." Check it out!

Nextpoint's e-discovery product deals with many very large documents. Indexing, imaging and PDF-ing of those documents can take a bit of time, which requires us to execute these tasks asynchronously. Background processing demands a solid way of notifying users when that process has completed. We're a Mac shop, and one of the first things most Mac users install is Growl. We thought that Growl's interface could really be successful on the web and provide a great way of notifying our users when this background processing has completed.

Read more about how Nextpoint is using Growl4Rails.

Growl4Rails is available as a Rails plugin on Github. It requires Prototype 1.6 and Scriptaculous 1.7, and it has been tested on FF, IE 6-8, Safari, Opera and Chrome.

Doug Bowmanepines about the job of doing just this, which is something he kicked off at Google, and we see the result in apps such as Sites and recently Gmail:

Doug does a really nice job at explaining the history of this work, and then detailing the issues at hand and various iterations of the work where he had some a-ha moments such as:

My 3.0 attempt relied on treating the buttons and everything inside them as inline elements. The top/bottom borders still needed to be rendered separately from the left/right borders to get 1px-notched corners. The left/right borders were rendered on the outer element. The top/bottom borders were rendered on the inner element. Because borders don’t compound and add to the width or height of an inline element, we get the 1px notches in each corner. I ran into a lot of frustration with this inline approach until I remembered display: inline-block. That seemed to solve everything at once.

And how he got rid of the gradient image and instead uses CSS:

A really nice read. It works pretty well for me. The only real issue that I saw was that the drop down in Gmail for "More Actions" can be greyed out when you don't have something selected. The type is subtle so at first I wondered why hover/click weren't doing anything.

Oh, hey, would be nice to open source this kind of stuff good Google UX guys ;)

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:

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 allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

PLAIN TEXT

HTML:

1.  
2. <script type="text/javascript">
3.     $(document).ready(function() {
4.         $('a.pageslide').pageSlide({
5.             width: "300px"
6.         });
7.     });
8. </script>
9.  

For some reason I enjoy thinking of my desktop as a virtual area that I can shift around.... so this can suite me well.

Sébastein Gruhier has released a new address component that integrated a map with the address that you are filling. The UX is interesting as when you first get typing it doesn't really narrow down the address so you are seeing maps of bizarre places.

As well as a basic version, you can also tie in auto complete.

Features include:

• Javascript framework-agnostic. You can use it as is or with any great frameworks like Prototype, JQuery …
• Mapping system independent. The current implementation is based on Google Map using a Google Map proxy object.
• Interactive map display location while you arex typing an address.
• Center map on user location (based on its IP) if mapping system allows it.
• Fully customizable.
• Fully documented with pdoc.
• Works on Safari, Firefox, IE 6/7, Chrome and Opera.
• ...

Joseph Woods of PHPCow sent us a note about SmartMarkUP, a "universal markup editor":

SmartMarkUP is a lightweight and powerful JavaScript library that allows you to turn any textarea into a fancy markup editor. HTML, CSS, XML, Wiki syntax, BBCode or any other desired markup language can be implemented and/or adjusted to your preferences and business needs. SmartMarkUP doesn't depend on any other JavaScript library and can be integrated with any already existing JavaScript library or code.

Although SmartMarkUP is stand-alone, they've created a jQuery plug-in wrapper for it. The documentation is quite extensive and includes detailed notes on how to use the editor to edit your own markup.

While the editor has buttons and such to make it easier to manipulate the markup (a la WordPress' own code editor) the editor itself doesn't have any kind of syntax highlighting or auto-indent / auto-complete features.

Still, it's a pretty neat little package:

* SmartMarkUP is completely free and open source
* SmartMarkUP is a small script, compressed version weights only 10kb
* SmartMarkUP is completely skin-able you can fit it's design with your applications easily
* SmartMarkUP can be used from any other script
* SmartMarkUP is self contained and doesn't depend on any third party scripts. You can use it with Prototype, jQuery, Mootools or any other JavaScript libraries.
* SmartMarkUP doesn't requires changing of already existing markup or code infrastructure.
* SmartMarkUP degrades gracefully, that means your application will continue working in browsers with disabled JavaScript.

What do you think?

Several months ago, we covered jsTree, a promising new tree component built on top of jQuery. It's since gained its own website and is nearing a 1.0 release. There have been a few changes since we last wrote about it:

* A lot of focus on the JSON data source

* Native async support (meaning correct data loading, event handling, etc).

* In the last public version there is a simple instance manager.

* The instance manager enabled full multitree support - node dragging between trees, with language cleanup (if languages differ), and also and most important - the receiving tree's dragrules are respected.

* There have been a lot of bugfixes, optimizations, enhancements.

It's coming along nicely since the initial story; give it another look and pass on bug reports and feedback to Ivan at his blog prior to the 1.0 release.

Brad Lassey has been hacking on Fennec (the Mozilla mobile browser) as well as Firefox itself to integrate with camera phones and Webcams alike:

I wrapped a video tag, image and a few buttons in xbl and bound it to <input type=”camera” />. When a user hits a website using this tag, he or she currently will see a live video preview and a “take photo” button. When the user clicks the button, the photo is grabbed from the camera and shown to the user in the image element. The image element and video element are in a deck element so only one is shown at a time. After the photo is taken, there is a button that reads “Take another photo,” in case the user doesn’t like the one they just took. Once the user is satisfied, this element works like any other form element and the file can be uploaded to a web service.

After talking to a few people this should actually be bound to <input type=”file” accept=”image/png”/>. Also, it needs some UI design both for what it looks like in content and for a configuration dialog. Finally, we’ll need to think about security and make sure no one can snap a photo of you when you’re not looking your best.

I kinda like having an input type="camera" myself, to be more explicit. It would be cool if you can get access to the image as data (e.g. the value is data:......). I love it.

The NoGray Time Picker is a component that lets you add a time picker that is visual. The clock shows up, and you move the hands to wherever you need to be. All via a simple:

Or a more complex version that tracks the changes:

After all that though, is it easier than asking to put in the time?

You pulse away with something like:

Over the past several years, Stuart Langridge’s sorttable Javascript library has found widespread use. It’s easy to see why. Just add class=sortable to a table tag and its column headers automatically support click to sort. Pretty slick.

But sometimes sorting just isn’t enough. What if you want to focus on just one or two of the columns in a table? In a client-side application you could drag the columns you care about next to each other. Why not in a web application?

Enter dragtable. Like sorttable, it teaches HTML tables a new trick through a simple class attribute.

Once you have the JavaScript in place, you can simply add a class="draggable", and you can even work with both via class="draggable sortable"

Take a peak at a test bed, and the open source project.