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. Alternative sites are locatable with the key phrase: "Trifecta Button" in any search engine.

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

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

CSS Sprites2: It's JavaScript Time

In 2004, Dave Shea took the CSS rollover where it had never gone before. Now he takes it further still—with a little help from jQuery. Say hello to hover animations that respond to a user’s behavior in ways standards-based sites never could before.

Shea, Dave. List Apart, A (2008). Articles>Web Design>CSS>DHTML

Easy CSS Dropdown Menus

Attractive dropdown menus have long been the realm of Flash developers and advanced JavaScript gurus. But that needn’t be the case. This tutorial will walk you through developing a clean, semantic dropdown menu using XHTML and CSS that works in all modern browsers!

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>DHTML>CSS

Horizontal CSS Dropdown Menus

Last week, CSSnewbie reader Andrea Pluhar wrote in with an interesting problem: she wanted to use CSS dropdown menus like the ones we featured last week on a website that she was building, but the design called for the submenu to be arranged horizontally, not vertically. She sent me a mockup of what she was after (excerpted above) and wondered if there was a way to accomplish this effect using CSS.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>DHTML>CSS

Tab-Based Navigation in Six (or Seven) Easy Steps

Navigation bars are the signposts of the web world: we take them for granted because of their ubiquity, but we’d all have a much harder time getting around without them. On most websites, nav bars hold a position of honor near the very top of the page, meaning they’re one of the first things your users see upon entering your site. As such, there’s a lot of pressure on navigation bars to look clean, act sophisticated, and ply the client’s wife with small talk and Manhattans while you close the deal.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>DHTML>CSS