Add Zip to Your Site without Coding  

Wilkinson offers tips on adding free JavaScript subroutines to Web sites. She lists several Web sites that give away free scripts.

Wilkinson, Theresa A. Intercom (2000). Design>Web Design>DHTML

Adding Sticky Buttons to a Framed Site

Describes how to create a type of DHTML interactivity using Adobe GoLive.

Shadovitz, Deborah. Mac Design Magazine (2003). Design>Web Design>DHTML>Adobe GoLive

Adding Zip to Your Site Without Coding

I have been playing around with scripting for about six months now. I would by no means call myself a programmer yet, but I have successfully added many scripts to various Web sites. How did I do it without attending any programming classes or immersing myself with programming books? I used free scripts from Web sites. I have found many Web sites that offer scripts for just about anything you can imagine.

Leonard-Wilkinson, Theresa A. W-edge Design (2000). Design>Web Design>DHTML

Ajax

Asynchronous JavaScript And XML, or its acronym, Ajax (Pronounced A-jacks), is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page's interactivity, speed, and usability.

Wikipedia. Articles>Web Design>DHTML>Ajax

Ajax Mistakes

Ajax is an awesome technology that is driving a new generation of web apps, from maps.google.com to colr.org to backpackit.com. But Ajax is also a dangerous technology for web developers, its power introduces a huge amount of UI problems as well as server side state problems and server load problems.

Bosworth, Alex. Sourcelabs.com (2005). Articles>Web Design>DHTML>Ajax

Ajax Wireframing Approaches

Goes over a few techniques and approaches we use to create the foundation of every prototype--wireframes. In addition to serving as documentation for those working with the markup, wireframes are a great way to create screenshots and debug rendering problems that are happening during DOM manipulation. Whenever we find something looking funny during the development process, we always refer back to our wireframes to see if it’s a markup / presentation problem. If it renders right in the browser statically, then we know to look for the problem in the JavaScript or server side programming.

Hale, Kevin. Particletree (2006). Design>Web Design>DHTML>Ajax

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

Amazing DHTML: But is it Useful?

Dynamic HTML is not another HTML standard, but is a term used to describe techniques by which Web pages can be made dynamic using JavaScript, Cascading Style Sheets (CSS), and the Document Object Model (DOM). It works on the more recent versions of Internet Explorer and Netscape.

HyperWrite (2005). Design>Web Design>DHTML

Art and Culture

This site offers a unique approach to contextual navigation, and one that has gotten the attention of many reviewers. From the site: 'ArtandCulture.com is a dynamic destination that delivers unique access to the best arts and cultural content and related products available on the web today....focused on creating the context that makes information truly meaningful.' In this review, I'll focus on some of the interesting navigation strategies the site presents.

Danzico, Liz. Bobulate (2003). Design>Web Design>User Interface>DHTML

Avoiding Automatic Refresh

Describes an alternative to automatic page refresh in HTML. Automatic page refresh can confuse users with cognitive disabilities when a page reloads without the user's request. This article provides you with instructions on how to apply explicit manual control of page refreshing.

Microsoft (2003). Design>Web Design>Accessibility>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

A Better Image Rotator

About a year ago, I wrote an article, introducing a method for displaying a random image every time someone visits a web page. Administration was simple: just add or remove images from a folder on the server, and they would appear (or disappear, respectively) from the pool of random images being displayed on that page.

Benjamin, Dan. List Apart, A (2004). Design>Web Design>Graphic Design>DHTML

Brilliant Button Maker

A form-based interface to generate 80x15-pixel buttons, like those often used to identify RSS feeds.

Luca Zappa (2005). Resources>Web Design>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

Complex Dynamic Lists: Your Order Please

Help your site’s visitors reach their goals quickly with a dynamic menu that takes its cue from the Mac OS X Finder.

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

Creating Accessible JavaScript

JavaScript is available on the Web to allow programming type processes that are not allowed with static HTML. In most cases, JavaScript does not overtly affect accessibility. Most browsers and screen readers are capable of accessing JavaScript items. You should, however, teach that many people cannot or choose not to allow JavaScript within their Web browsers or assistive technologies. Important content or functionality should not rely on JavaScript alone. JavaScript should usually be used to supplement content.

WebAIM (2003). Design>Web Design>Accessibility>DHTML

Creating Disappearing Text or Images

In this tutorial, you'll see how to create text that's invisible as the page loads and appears only when a user rolls the mouse over a specific graphic, i.e., text appears on 'mouseover'and disappears when the mouse is no longer over the graphic.

Shadovitz, Deborah. Mac Design Magazine (2003). Design>Web Design>DHTML>Adobe GoLive

Creating Sticky Buttons in a Component

A more sophisticated method for denoting an active page or section of a site is to make your buttons 'sticky'–having a button remain 'stuck' in its clicked state even after it's been clicked. Two ways of setting up sticky or locking buttons are shown here.

Shadovitz, Deborah. Mac Design Magazine (2003). Design>Web Design>DHTML>Adobe GoLive

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

Cross-Browser DHTML

Prior to the 4.0 browsers, Internet Explorer and Netscape Navigator exposed very similar but very limited object models for manipulating the page. The primary difference was the lack of an images collection in Internet Explorer 3.x. With the 4.0 browsers, Netscape's and Microsoft's implementations diverged. Netscape's model evolved to allow a little more control over the page by allowing positioned elements to be manipulated. Microsoft, on the other hand, expanded to provide control to every element on the page. To further confuse matters, both companies called their new implementations Dynamic HTML. We have created DHTMLLib to help you design cross-browser DHTML pages without requiring you to understand the complete details of the different object models.

Isaacs, Scott. InsideHTML.com (2001). Design>Web Design>DHTML

Cross-Browser Scripting with importNode()

While building a browser slideshow object for a demonstration on dynamically pulling image information from a web server, I ran into difficulty with the DOM-compliant approach I had envisioned. A two-day journey into the world of XML DOM support for web browsers lay between me and a satisfactory solution.

Holdener, Anthony. List Apart, A (2007). Design>Web Design>DHTML>Web Browsers

Crossing Borders: JavaScript's Language Features

JavaScript is often ridiculed as the black sheep of programming languages. The development tools, a complicated and inconsistent document object model for HTML pages, and inconsistent implementation in browsers contributes to that sentiment. But JavaScript is much more than a toy. In this article, Bruce Tate explores JavaScript's language features.

Tate, Bruce. IBM (2006). Design>Web Design>DHTML>JavaScript

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