A LIST Apart: For People Who Make Websites

No. 258

Topics: Code: Scripting

Building dynamic websites using JavaScript / ECMAScript, the W3C DOM, and other scripting languages and technologies. JavaScript triggers, hybrid CSS dropdowns, body switchers, drop-down menus and navigation. Dynamic text replacement. Relative font sizes, accessible pop-up links. Debugging and testing. (49 articles)

Getting Started with Ruby on Rails

by Dan Benjamin

Issue 257April 22, 2008

Web designers have time-tested CSS tricks to use as a starting point, web standards to adhere to, and Photoshop workflows they can rely on. Like these tools, Rails provides standards, conventions, tools, and a foundation upon which developers can construct applications by writing customized code using pre-built Rails libraries.

Creating More Using Less Effort with Ruby on Rails

by Michael Slater

Issue 257April 22, 2008

One of the main reasons Ruby on Rails increases productivity is that it makes building new applications, adding features, and making tweaks much easier. The combination of the language (Ruby) and the framework (Rails) means you can do more with less code.

Take Control of Your Maps

by Paul Smith

Issue 256April 08, 2008

Rolling your own maps need not be an intimidating affair, provided you understand the problem and the tools to fix it.

Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

by Aaron Gustafson

Issue 251January 21, 2008

Two key factors, working in concert, have made the DOCTYPE unsustainable as a switch for standards mode.

Graceful E-Mail Obfuscation

by Roel Van Gils

Issue 248November 06, 2007

Most e-mail obfuscation techniques I’ve tried tend to be bothersome and time-consuming to implement because they have to be applied to each and every e-mail address that you want to protect. Most require you to use lengthy inline script elements and inline event handlers. They may also invalidate your markup.

If I Told You You Had a Beautiful Figure...

by Aaron Gustafson

Issue 246September 25, 2007

Lay out images consistently across your site using a liitle clever JavaScript.

Ruining the User Experience

by Aaron Gustafson

Issue 234March 27, 2007

Improve the user experience and meet your user’s needs with progressive enhancement.

Cross-Browser Scripting with importNode()

by Anthony Holdener

Issue 234March 27, 2007

Explore XML DOM support for web browsers and discover a new cross-browser scripting method.

Flash Embedding Cage Match

by Bobby van der Sluis

Issue 232February 06, 2007

Examine the most popular Flash embedding methods to see how good they really are.

Making Compact Forms More Accessible

by Mike Brittain

Issue 229December 19, 2006

Tightly designed forms can look great on paper, but they often ignore accessibility issues altogether.

User-Proofing Ajax

by Peter Quinsey

Issue 228December 05, 2006

When good web apps go bad, Peter Quinsey’s guidelines and techniques can help you and your users stay informed and productive.

Print to Preview

by Pete McVicar

Issue 226October 24, 2006

So how do we set the right expection about our print version? Why, we switch stylesheets of course!

Text-Resize Detection

by Lawrence Carvalho, Christian Heilmann

Issue 223September 12, 2006

Use JavaScript to detect your visitor’s initial font size setting and find out whenever your visitor increases or decreases the font size.

Automatic Magazine Layout

by Harvey Kane

Issue 219July 11, 2006

“Finding an attractive way of displaying any two, three, or four images together (regardless of shape and size) has always been difficult without manual resizing or cropping.”

Behavioral Separation

by Jeremy Keith

Issue 218June 20, 2006

Think separating presentation from structure is a good thing? Well, what’s good for CSS is good for JavaScript, too.

Community Creators, Secure Your Code! Part II

by Niklas Bivald

Issue 217May 23, 2006

”...you can sanitize your community site in several ways, depending on your needs and the level of your paranoia.”

Community Creators, Secure Your Code!

by Niklas Bivald

Issue 215April 18, 2006

Don’t be like MySpace. Protect your community site from malicious cross-site scripting attacks. Part one of a two-part series.

A More Accessible Map

by Seth Duffey

Issue 215April 18, 2006

Is there a way to display text-based data on a map, keeping it accessible, useful and visually attractive?

Getting Started with Ajax

by Aaron Gustafson

Issue 213March 07, 2006

“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.”

Web 3.0

by Jeffrey Zeldman

Issue 210January 16, 2006

Web 2.0 is a fresh-faced starlet on the intertwingled longtail to the disruptive experience of tomorrow. Web 3.0 thinks you are so 2005.

Introducing the CSS3 Multi-Column Module

by Cédric Savarese

Issue 204September 26, 2005

The module’s intent is to allow content to flow into multiple columns inside an element. It offers new CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.

Improving Link Display for Print

by Aaron Gustafson

Issue 203September 19, 2005

It seemed my zeal for linkage had come into conflict with my desire to improve print usability.

JavaScript Logging

by David F. Miller

Issue 202September 05, 2005

Debugging got you down? Weep no more. David F. Miller introduces fvlogger, a script library that brings simple logging functionality to JavaScript and the browser and makes your life easier and more fun.

Complex Dynamic Lists: Your Order Please

by Christian Heilmann

Issue 200May 24, 2005

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

Hybrid CSS Dropdowns

by Eric Shepherd

Issue 197March 30, 2005

Yup. It’s yet another CSS dropdown article — but one that resolves many problems associated with common dropdown methods and degrades beautifully. 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. It’s a tasty little vitamin pill, so quit sighing and try it.

JavaScript Triggers

by Peter-Paul Koch

Issue 194February 01, 2005

Now that you’ve separated your website’s (XHTML) structure from its (CSS) presentation, wouldn’t it be great to similarly abstract the behavioral (JavaScript) layer from the others? ALA prodigal Peter-Paul Koch shows how to use JavaScript Triggers to do just that.

The Way It’s Supposed to Work

by Erin Kissane

Issue 192January 18, 2005

Groundbreaking accessibility information. Project management and information architecture theory from old-school experts. Plug-and-play solutions to universal design and development problems. Experimental CSS/DOM hacks that use non-semantic elements to do funky design tricks. One of these things is not like the others…which is why we’re introducing a tiny new feature to the magazine.

Invasion of the Body Switchers

by Andy Clarke, James Edwards

Issue 189November 19, 2004

Wouldn’t it be great if we could update the classic ALA style switcher to accommodate multiple users and devices, including some that aren’t even traditional browsers, all from a single JavaScript and CSS file? Well, now we can! Enter the Body Switcher.

A Better Image Rotator

by Dan Benjamin

Issue 186August 10, 2004

The first image rotator made it easy to generate a random image on a web page, even if you had never worked with PHP before. The new, more powerful (but still dead easy) version uses a simple configuration file to create custom links, alt tags, titles, and even CSS styles for each image. Plus it handles differently sized images without a hiccup. Enjoy!

Enhance Usability by Highlighting Search Terms

by Matt Riggott, Brian Suda

Issue 186August 10, 2004

Google’s cache offers users a copy of your website with their search terms highlighted. You can do the same thing and make it easier for users to find what they’re looking for — whether they’re coming from an external search engine or your own site search — by making their search terms easy to spot.

Dynamically Conjuring Drop-Down Navigation

by Christian Heilmann

Issue 183June 15, 2004

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.

Dynamic Text Replacement

by Stewart Rosenberger

Issue 183June 15, 2004

Let your server do the walking! Whether you’re replacing one headline or a thousand, Stewart Rosenberger’s Dynamic Text Replacement automatically swaps XHTML text with an image of that text, consistently displayed in any font you own. The markup is clean, semantic, and accessible. No CSS hacks are required, and you needn’t open Photoshop or any other image editor. Read about it today; use it on personal and commercial web projects tomorrow.

Let Them Eat Cake

by Aaron Gustafson

Issue 177April 16, 2004

A growing debate pits accessibility against usability. From our point of view, it’s like pitting peanut butter against jelly. This article helps you create a page that is both usable and accessible, saving readers the trouble of scrolling with a little help from JavaScript and the Document Object Model.

Power To The People: Relative Font Sizes

by Bojan Mihelac

Issue 176April 09, 2004

Relative font sizes may make websites more accessible — but they’re not much help unless the person using the site can find a way to actually change text size. Return control to your audience using this simple, drop-in solution.

The Table Ruler

by Christian Heilmann

Issue 175March 26, 2004

Make your site easier to use by giving your visitors a virtual “ruler” to guide and track their progress down long data tables. With a pinch of JavaScript and a dash of the DOM, your table rows will light up as your visitors hover over them.

Accessible Pop-up Links

by Caio Chassot

Issue 174March 19, 2004

Sometimes we have to use pop-ups — so we might as well do them right. This article will show you how to make them more accessible and reliable while simplifying their implementation.

Zebra Tables

by David F. Miller

Issue 173March 05, 2004

While misused tables are becoming increasingly rare, the table retains a legitimate role in data formatting. A little CSS and JavaScript magic can make tables better at what they do best: displaying tabular data.

Exploring Footers

by Bobby van der Sluis

Issue 170February 06, 2004

With old-school table layout methods, vertical positioning is a piece of cake. With CSS layout, it’s a piece of something else. New ALA contributing writer Bobby van der Sluis shows how to regain control of footers and other vertically positioned layout elements via CSS, JavaScript, and the DOM.

JavaScript Image Gallery

by Jeremy Keith

Issue 170February 06, 2004

Making an online gallery of pictures should be a quick process. The gap between snapping some pictures and publishing them on the web ought to be a short one. Here’s a quick and easy way of making a one-page gallery that uses JavaScript to load images and their captions on the fly.

The Perfect 404

by Ian Lloyd

Issue 168January 16, 2004

No matter how carefully you design and structure your site, visitors will sometimes request missing, moved, or non-existent pages. A well tempered 404 error page will plunge these visitors back into the flow of your site. Ian Lloyd shares strategies for crafting the perfect 404.

JavaScript Image Replacement

by Christian Heilmann

Issue 164November 21, 2003

Perhaps it’s time to consider the ups and downs of a JavaScript-based alternative to the Fahrner Image Replacement technique. This version uses plain vanilla XHTML with no special IDs or CSS tricks.

Suckerfish Dropdowns

by Patrick Griffiths, Dan Webb

Issue 162November 07, 2003

Teach your smart little menus to do the DHTML dropdown dance without sacrificing semantics, accessibility, or standards compliance or writing clunky code.

Cross-Browser Variable Opacity with PNG: A Real Solution

by Michael Lovitt

Issue 156December 21, 2002

Think you’re stuck with wimpy GIFs and their rigid binary transparency? Well, think again, Sunshine. Michael Lovitt shows how to overcome flaky browser support for PNG so you can take advantage of this graphic format’s lossless compression, alpha transparency, and variable opacity.

Flexible Layouts with CSS Positioning

by Dug Falby

Issue 155November 15, 2002

Want to spend less time on CSS hacking and more time on design? Need your site to look as good on a 160×160 PDA screen as it does on a 1024×768 PC monitor? In Flexible Layouts with CSS Positioning, designer Dug Falby shares two techniques for practical grid-building.

Win the SPAM Arms Race

by Dan Benjamin

Issue 145May 24, 2002

SPAM is evil, moronic, and pervasive, but help is on the way. All it takes is a bit of JavaScript, a smidgen of PHP, and the ten minutes it takes to read this short, sweet tutorial. Reduce dreck mail with Dan Benjamin’s easy-to-implement address encoder.

CSS Design: Mo’ Betta Rollovers

by Tim Murtaugh

Issue 140March 08, 2002

Design smarter, faster, better rollovers with CSS.

A Backward Compatible Style Switcher

by Daniel Ludwin

Issue 136February 08, 2002

You asked for it, you’ve got it: an Open Source alternate style sheet switcher that actually works in Netscape 4. No, really. Daniel Ludwin shows how it’s done.

Alternative Style: Working With Alternate Style Sheets

by Paul Sowden

Issue 126November 02, 2001

Build a standards-compliant Style switcher: After explaining the basics of alternate style sheets, Sowden shows how to make them work in IE, Mozilla, and other modern browsers with just a few lines of JavaScript. Use style switchers to make your site more accessible, to facilitate user customization, or to develop creative effects.

DOM Design Tricks II

by J. David Eisenberg

Issue 73July 21, 2000

Part 2 of this exclusive ALA series shows how to use the DOM’s events and nodes to create nifty interactive menus and more. Design cool stuff while learning about emerging standards.

*Can’t find what you’re looking for? View all topics and subtopics »