User Interface Widgets

There are a lot of little things (widgets) that people develop for user interfaces. I list them here.

Yahoo! UI Library (#)

If you are looking for a library that has a set of UI widgets (like sliders, drag and drop, tree menus, calendars, Ajax Enabled etc.) along with the necessary JavaScript and CSS files, look no further!

The Yahoo! User Interface Library is released as open source under a BSD license, has a blog, and the companion Design Pattern Library is worth a visit if you plan on using these widgets.

Styled Checkboxes (#)

Radio buttons, check boxes... Looks interesting, although the last bunch don't appear to work for me in Firefox 1.0 Win XP, and there is some image reloading going on in IE, this is something to keep in mind...

Lightbox Gone Wild! (#)

The folks at Particletree show us how to build a lightbox - a.k.a. implement a modal window - with Javascript and CSS. This excellent walk through covers not only the implementation of their code but how it works. CC licensed.

Suckerfish HoverLightbox (#)

Take two good ideas, put'em together and if done well you could make something pretty good - well Jon over at Monday By Noon has gone one better: combining 3 good ideas!

Enter Suckerfish HoverLightbox, a hybrid of the Suckerfish Dropdowns, the Hoverbox Image Gallery and Lightbox JS.

I wonder if something like this would work on iStockPhoto, click on one if these images and have a lightbox with the relevant details show up instead of having to move forwards and backwards.

ThickBox - One box to rule them all. (#)

Thickbox, lighter than Lightbox (20k for the code), simple to use, and very flexible. Allows you to include images or even webpages in a modal window with the simple addition of a class to anchor tags or image tags.

Cross Browser DHTML Modal Dialogs For Web Apps (#)

Another set of code for a modal window widget, however this one comes with a decent little description of how it works and why they are used.

See also the subModal derivative, which uses some code from Lightbox Gone Wild and the JS code has been packed and is 1/3 the size of the JS used in the original submodal code.

15 Things you can do with Yahoo! UI (#)

Dustin Diaz of Yahoo! dives into the Yahoo! User Interface library and show us how to build some of the widgets many have come to expect from a JavaScript library. Demos include lightbox, drag and drop, blind (yoyo?) and pagination.

slayeroffice - web experiments gone horribly awry (#)

If you are in need of some user interface widgets, this site could have what you are after. A whole whack of javascript tools (strangely without a proper home of their own, like say '/code/') can be found in the sidebar under DOM/Javascript.

Some of my favorites: Gradient Progress Bar, Image Navigator and the various slideshows. Bits of code and proofs of concept that may come in handy one day...

JavaScript focusing library (#)

Wow, I was just thinking the other day how something like this could help to keep some elements of our new admin system in better focus, hopefully improving the UI. Namely long, content oriented textareas where other form elements get noisy. Using this library, one could, in effect, create something similar to Khoi's Blockwriter in an admin panel.

This JavaScript library will allow the easy implementation of focus to arbitrary elements on a given page. The best way to get this is to hit the demo page. Nice work!

Prototype Modal Window Class (#)

One of the many modal window scripts, this appears to be quite complete and is based on prototype.

CSS Photo-Caption Zoom (#)

This is an interesting bit of CSS that allows you to insert an image into an article that expands and shows a hidden caption on hover. It can add borders, captions and links to the hovered image.

Control.Modal : Unobtrusive CSS Modal Windows and Lightboxes for Prototype (#)

There are certainly a lot of modal window scripts available, but this appears to be the easiest prototype based script that I have come across.

It has pretty much all of the options covered: it sets up modal windows that can handle Ajax calls, iframes, (two different) lightbox versions and more stuff plus it has a whole array of options that can be set as well as some callbacks and responders.

The Lightbox Effect without Lightbox (#)

PJ Hyett offers up another version of the lightbox widget that is being used for modal windows around the intarweb.

Ajax tabs (#)

A take on tabs, this one works whereby a clicked link on a page "opens" a new tab which has content loaded via Ajax. Tabs can be closed, and at the moment can't be dragged dropped and resorted, but I'm certain that's only a matter of time.

DOMTab - Navigation tabs with CSS and DOMscripting (#)

An unobtrusive script that will turn a set of links and appropriately marked up content into an inter-page tabbed interface if JavaScript is available, or present it as a menu with jump links if JavaScript is not available.

CSS Navigation Techniques (#)

A collection of CSS based tabs and other methods for navigation, with screenshots of each type and links to the tutorials for how to build them. Tabs, dropdowns, trees, the original tamed lists and a few other styles.

SWFUpload beta (#)

A flash based widget for uploading files without having to click any submit buttons.

This method has a few extra goodies, like the ability to only display chosen filetypes in dialog and to control-click multiple files in a single dialogue for uploading. It also has some basic upload error handling built in, which is handy. It has been released under the MIT License.

Select Something New (#)

A little tutorial on how to use Javascript and CSS to reformat and restyle <select> dropdown menus. This is the first in a 3 part series.

Check out the Resource categories for older content

The latest from my personal website,

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..