CSS Rollover Buttons

There are many different button-rollover tutorials available on the web, some JavaScript and some CSS, but none of the ones I have seen yet match that of the Trifecta button. Let's start with what makes the CSS rollover Trifecta button different from the many other rollovers you may have already seen.

Angeletti, Mark. Search-This (2004). Design>Web Design>DHTML>CSS

Datasheet-Style Form

This worked example creates a compact form with multiple similar records, with the familiar appearance of a datasheet.

Hunt, Ben. Web Design From Scratch (2006). Design>Web Design>DHTML>Forms

Debugging JavaScript Using Venkman

Most people who do even a little bit of JavaScript programming, even those who are simply tweaking somebody else’s code, are familiar with the rudimentary JavaScript debugger in the recent versions of Internet Explorer. Click on the yellow warning icon in your browser, and you get a listing of various JavaScript errors in your code. It is simple, and for many people it is enough, but it’s not really the type of fully-fledged debugging environment with features programmers have come to expect in other development languages. If you find yourself doing a lot of JavaScript programming or tweaking and you are concerned with cross-browser support for your scripts, then Venkman is worth checking out.

Schengili-Roberts, Keith. WebRef (2003). Design>Web Design>Programming>DHTML

DHTML References

The reference material accessed through the following links will help you to create compelling Dynamic HTML (DHTML) Web pages.

Microsoft (2002). Resources>Web Design>DHTML

DOM Scripting, or How to Keep the Code Clean

In this tutorial I want to show up the differences between DOM-Scripting and the 'traditional' JavaScript technique using event-handlers embedded into the HTML-code. I’ll show a way to have accessible popups, and by showing how to do those, I’ll explain the propper use of DOM-scripting.

Opitz, Pascal. Content with Style (2005). Design>Web Design>DHTML

Don't Disable Right Click!

After working hard on a design, image or article you may want to protect it by using a JavaScript that disables right-click while optionally warning a visitor that the content is copyrighted.

Wise, Rosemarie. SitePoint (2002). Design>Web Design>DHTML

Drop-Down Menus, Horizontal Style

Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required!

Rigby, Nick. List Apart, A (2004). Design>Web Design>DHTML>CSS

Dynamic Drive

Dynamic Drive is a directory of free, original DHTML scripts and components to enhance your web site.

Dynamic Drive. Resources>Web Design>DHTML

Dynamic Forms with DHTML

This approach uses Dynamic HTML (DHTML), which has several benefits over using IFRAMES to make life a bit easier for the users of your site. First, DHTML allows for more flexible formatting than IFRAMEs permit. You can apply background images, borders, fonts, and all the other features you’ve learned to expect from HTML and Cascading Style Sheets to DHTML objects. In contrast, IFRAMES have almost no configurable features. Second, if someone fills out one form, switches to another, then switches back, there’s a good chance that the browser will lose the information that was initially entered. This problem doesn’t exist in the DHTML solution. Third, with DHTML you can do tricky things like clipping and moving the form around the page. You could do these things by combining IFRAMES and DHTML, but you might as well just use DHTML in the first place.

Apple Inc. (2006). Design>Web Design>Forms>DHTML

Dynamic HTML and XML: The XMLHttpRequest Object

As deployment of XML data and web services becomes more widespread, you may occasionally find it convenient to connect an HTML presentation directly to XML data for interim updates without reloading the page. Thanks to the little-known XMLHttpRequest object, an increasing range of web clients can retrieve and submit XML data directly, all in the background. To convert retrieved XML data into renderable HTML content, rely on the client-side Document Object Model (DOM) to read the XML document node tree and compose HTML elements that the user sees.

Apple Inc. (2006). Design>Web Design>DHTML>Ajax

Dynamic Properties in Dynamic HTML (DHTML)

While experimenting with DHTML you may have ended up with a situation where you'd wanted to possibly have an element that has a width that's always the same as another element's height. On the other hand, you may have wanted to center an element in the middle of the page no matter what the width of the page was. All this is possible with the DHTML methods you've learned previously, but you will find that these scripts end up being unnecessarily long or complicated. That's why Dynamic Properties were introduced in IE 5.0. Dynamic Properties, as the name may indicate, means the ability to assign non-static dynamic values to properties.

Gilbert-Baffoe, Nana. Intranet Journal. Design>Web Design>DHTML

Dynamic Tables With XSLT

How to use the powerful dynamic features of XSLT for sorting and displaying table-data.

Opitz, Pascal. Content with Style (2005). Design>Web Design>DHTML>XSL

Dynamically Conjuring Drop-Down Navigation

Got content? Got pages and pages of content? Wouldn’t it be nice if you could offer your readers a drop-down menu providing instant access to any page, without having to sit down and program the darned thing? By marrying a seemingly forgotten XHTML element to simple, drop-in JavaScript, Christian Heilmann shows how to do just that. There’s even a PHP backup for those whose browsers lack access to JavaScript. Turn on, tune in, drop-down.

Heilmann, Christian. List Apart, A (2004). Design>Web Design>User Interface>DHTML

Editable Ajax Grid

Cross-browser JavaScript grid control for displaying tabular data in DHTML based table. Comprehensive features include fast-loading (enabled by AJAX), client-side sorting, columns resizing, multiple cell control types and keyboard navigation.

Scand (2006). Design>Web Design>DHTML>Ajax

Editable HTML Content

One of the little known features of DHTML, at least within Internet Explorer 5.5 or above, is an attribute known as contentEditable. This attribute can be used to make areas of text within a Web page editable by the user. This is very different from a form element, such as a text box, as contentEditable can make a table cell, or a standard paragraph editable.

HyperWrite (2005). Articles>Web Design>Interaction Design>DHTML

Form Validation

Any sort of interactive site is going to have form inputs — a place where your users input who they are, what they want to buy, where they live, and so forth. This data is passed to whatever handles your back end — a Perl CGI script, a PHP engine, a database like Oracle, or some other technology you’ve invested in. Whatever system is back there, you can bet that it doesn’t appreciate having its time wasted with bogus information, and chances are the user doesn’t appreciate it either. If the data the user submits to the CGI contains an error, there will be a noticeable lag — typically several seconds — before the information travels over the Internet to the server, is examined on the server, and then returns to the user along with an irritating error message. If you run a little preliminary validation of the user’s form input before the form is submitted, there will be no wait time. Client-side validation is instantaneous because it doesn’t have to transmit any data. JavaScript catches any erroneous data the user enters before it goes anywhere.

Apple Inc. (2006). Design>Web Design>Forms>DHTML

Forms and JavaScript Living Together in Harmony

Most developers don't surf the web with JavaScript turned off on purpose. Fortunately, there are rarely instances where this lack of respect for the non-JavaScript users is necessary.

Howden, Jeff. evolt (2003). Design>Web Design>User Centered Design>DHTML

Getting Started with Ajax

The start of 2005 saw the rise of a relatively new technology, dubbed 'Ajax' by Jesse James Garrett of Adaptive Path. Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files. Ajax’s most appealing characteristic, however, is its 'asynchronous' nature, which means it can do all of this without having to refresh the page. This allows you to update portions of a page based upon user events and provides one of the cornerstones of Rich Internet Applications (RIA) referred to in discussions of 'Web 2.0.'

Gustafson, Aaron. List Apart, A (2006). Design>Web Design>DHTML>Ajax

Heading Navigation Greasemonkey User Script

This is a Greasemonkey user script to enable heading navigation in Firefox. Headings can either be navigated by the heading level, for example, all h2 elements, or by any level.

Juicy Studio (2006). Design>Web Design>DHTML>JavaScript

Help is a Pop-Up Menu

Efficient layout is a key to a good website. When you've got a lot of links one option that can help is a pop-up menu. You can use a ULR popup menu in its generic form or you can use CSS to customize its look. This tutorial shows a simplified use.

Mac Design Magazine (2005). Design>Web Design>Interactive>DHTML

Hide/Show Layer

This script uses dynamic HTML (DHTML) to pop open a box with info in it when you click on a link. In my demo I’ve used this to pop up contextual help about filling in a form. It could also be used, for example, to give pop-up definitions for terms in an article. In both cases, it makes sense to give the information in context, modelessly. Likewise, this solution avoids the problems of statelessness and latency.

Apple Inc. (2006). Design>Web Design>Forms>DHTML

Hierarchical Menus with the Underrated style.display Object

One of the most common DHTML requests I get is for a Windows Explorer-style hierarchical menu, where there's a list of topics or 'folders' that a user can click on to reveal subtopics, or 'files,' within that folder. It's a common desktop metaphor that seems ever more necessary on the Web, especially as we see navigation bars incorporating larger and more complex content while still trying to fit on the screen. Hierarchical menus are a solution to the common problem of having too many links in too small a space.

Pena, Bill. O'Reilly and Associates (2002). Design>Web Design>User Interface>DHTML

How HTML, CSS and JavaScript Work Together in Web Pages

The three main technologies used to create modern web pages (HTML, CSS and JavaScript) each do different jobs. HTML should be used only for structuring content. Cascading Style Sheets should be used for applying all visual styles. JavaScript should be used for (almost) all interactive functionality, and should always be referenced in separate files, never written into HTML.

Hunt, Ben. Web Design From Scratch (2006). Design>Web Design>CSS>DHTML

How to Validate Forms with JavaScript

Discover why and how you should use unobtrusive JavaScript to validate forms.

McCarthy, Paul. Webcredible (2007). Design>Web Design>DHTML>JavaScript