It’s a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this. HTML: We’ll start...

The content of a tooltip is by default the title of the element, with the href or src attribute below it, if present. Set showURL: false to hide the href/src attribute. If the tooltip contains more then a few words, the showBody option can be used to format the tooltip while still degrading nicely. To...

Very light script to Nate over at web-graphics talks about a new feature with Nice Titles Script that highlights the items that are hovered over. It doesn’t need browser support. Try mousing over, or tabbing to, some of the links on this page: you’ll see the same effect. It’s all done...

In user interface design, a modal window (sometimes referred to as a modal dialog) is a window that blocks input to other windows. It has to be closed before the user can continue to operate the application and are frequently an element of Multiple Document Interface (MDI) applications or desktop applications...

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features and advantages: Installation * No plugins like Flash or Java required. * Popup blockers are no problem....

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers new features with Image Sets: group related images and navigate through them with ease, Visual Effects in fancy pants transitions and Backwards Compatibility. How...

The Draggable Tab widget allows great look of quick draggable tabs to be dragged with dropped between one or more modules. Features: Uses standard features Tabs can be dragged on top of each other to allow reordering within the same module as well as other modules A graphic (specified by CSS) is shown...

What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is...

If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make “filtering by category”...

In this tutorial I’ll be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications! Instructions * To move a widget just hold your mouse down over the top coloured...