Alter Table Row Background Colors Using JavaScript

Many sites that present tabular data use alternating background colors to increase the readability of that data. And as I developed a site, I realised I wanted to do that, too. The problem? In my case the table was not generated by a server side application or script of which you can find numerous examples on the Web.

Svanberg, Kennet. SitePoint (2005). Design>Web Design>CSS>DHTML

A Backward-Compatible Style Sheet Switcher

You asked for it, you’ve got it: an Open Source alternate Style Sheet switcher that even works in Netscape Navigator 4.

Ludwin, Daniel. List Apart, A (2002). Design>Web Design>CSS>DHTML

Cascading Stylesheets and Dynamic HTML  

Have you been frustrated by the limitations of HTML as you have struggled to present information attractively on a Web page? Have you used common work-around methods such as setting up complex tables for text layout and creating special text effects with a graphics package? Cascading Style Sheets offers a way to produce desired layout effects through HTML. If we are programmatically inclined, we can use Dynamic HTML to increase interactivity. We will demonstrate methods for using Cascading Style Sheets and Dynamic HTML to design Web pages and point out design limitations we still need to be aware of.

Randolph, Elaine F. and Jeff Randolph. STC Proceedings (1998). Design>Web Design>CSS>DHTML

Cross Browser Animation

Dynamic HTML (DHTML) provides a new range of ways to animate a page. DHTML can animate both text and images and animations can move throughout the browser window, instead of being anchored in one spot. Unfortunately, DHTML can be tricky because of differences between browsers. This article will cover the basics of cross-browser animation. You’ll learn how to animate text and images. Plus you’ll see how to move HTML elements around the screen. After you’ve finished reading this article, you should be able to add cross-browser compatible DHTML animations to your web pages.

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

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

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

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

Hybrid CSS Dropdowns

Hybrid CSS dropdowns allow access to all pages, keep the user aware of where she is within the site, and are clean and light to boot.

Shepherd, Eric. List Apart, A (2005). Design>Web Design>DHTML>CSS

Mo' Betta Rollovers

For years we’ve been preloading our on–state images to assist the browser in its rollover presentation. Preloading increases the weight of the initial download, but adds to usability by decreasing the wait time for an on–state image to appear. Decreases, but may not eliminate. Even when preloaded, some browsers present momentary pauses prior to rendering the image. Besides being annoying, this momentary pause can cause problems when a visitor mouses over an element in passing or too rapidly. If the mouse movement is too fast, the browser does not have time to render the image and, worst–case scenario, can present you with a broken image icon.

Murtaugh, Tim. List Apart, A (2002). Design>Web Design>CSS>DHTML

Modifying Styles

With the release of W3 compliant browsers however, we now have the ability to change styles on the fly from JavaScript, using the W3C DOM. Unfortunately, due to a distinction between the way that embedded and remote stylesheet properties are exposed as opposed to the way that inline STYLE properties are exposed, this can be tricky.

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

Rough Guide to the Document Object Model (DOM)

In two parts, this series introduces the Document Object Model, explaining its benefits, and exploring its implementation.

Icarus. SitePoint (2003). Design>Web Design>CSS>DHTML

SELECT Something New, Part 1

So you've built a beautiful, standards-compliant site utilizing the latest and greatest CSS techniques. You've mastered control of styling every element, but in the back of your mind, a little voice is nagging you about how ugly your SELECTs are. Well, today we're going to explore a way to silence that little voice and truly complete our designs. With a little DOM scripting and some creative CSS, you too can make your SELECTs beautiful… and you won't have to sacrifice accessibility, usability or graceful degradation.

Gustafson, Aaron. Easy! Designs LLC (2005). Design>Web Design>CSS>DHTML

Sliding Doors of CSS

Image-driven, visually compelling user interfaces. Text-based, semantic markup. Now you can have both! Douglas Bowman’s sliding doors method of CSS design offers sophisticated graphics that squash and stretch while delivering meaningful XHTML text. Have your cake and eat it, too!

Bowman, Douglas. List Apart, A (2003). Design>Web Design>CSS>DHTML