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. (64 articles)
Creating Intrinsic Ratios for Video
by Thierry Koblentz
Issue 284May 26, 2009
Have you ever wanted to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video and some padding property magic, you can. Thierry Koblentz shows us how.
Advanced Debugging With JavaScript
by Hallvord R.M. Steen , Chris Mills
Issue 277February 3, 2009
JavaScript debuggers help find and squash errors in code. To become an advanced debugger, you’ll need to know about the tools available to you, the typical JavaScript debugging workflow, and code requirements for effective debugging. In this article, using a sample web application, Steen and Mills share advanced techniques for diagnosing and treating bugs.
Progressive Enhancement with JavaScript
by Aaron Gustafson
Issue 271November 4, 2008
Our introductory series on progressive enhancement and the ways it can be implemented concludes with a look at the mindset needed to implement PE in JavaScript, and a survey of best practices for doing so.
Progressive Enhancement with CSS
by Aaron Gustafson
Issue 270October 21, 2008
Organize multiple style sheets to simplify the creation of environmentally appropriate visual experiences. Support older browsers while keeping your CSS hack-free. Use generated content to provide visual enhancements, and seize the power of advanced selectors to create wondrous (or amusing) effects. Part two of a series.
Understanding Progressive Enhancement
by Aaron Gustafson
Issue 269October 7, 2008
Steven Champeon turned web development upside down, and created an instant best practice of standards-based design, when he introduced the notion of designing for content and experience instead of browsers. In part one of a series, ALA’s Gustafson refreshes us on the principles of progressive enhancement. Upcoming installments will translate the philosophy into sophisticated, future-focused design and code.
Test-Driven Progressive Enhancement
by Scott Jehl
Issue 268September 23, 2008
Starting with semantic HTML, and layering enhancements using JavaScript and CSS, is supposed to create good experiences for all. Alas, enhancements still find their way to aging browsers and under-featured mobile devices that don't parse them properly. What's a developer to do? Scott Jehl makes the case for capabilities testing.
CSS Sprites2 - It’s JavaScript Time
by Dave Shea
Issue 266August 26, 2008
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.
Getting Out of Binding Situations in JavaScript
by Christophe Porteneuve
Issue 262July 1, 2008
Every wonder who you really are? Congratulations! You have a lot in common with JavaScript. Learn once and for all how to train your JavaScript to remember who it is and what it's doing.
Getting Started with Ruby on Rails
by Dan Benjamin
Issue 257April 22, 2008
The "how" of Ruby on Rails: Hivelogic's Dan Benjamin prepares non-Rails developers, designers, and other creative professionals for their first foray into Rails. Learn what Ruby on Rails is (and isn't), and where it fits into the spectrum of web development and design. See through the myths surrounding this powerful young platform, and learn how to approach working with it.
Creating More Using Less Effort with Ruby on Rails
by Michael Slater
Issue 257April 22, 2008
The "why" of Ruby on Rails comes down to productivity, says Michael Slater. Web applications that share three characteristics—they're database-driven, they're new, and they have needs not well met by a typical CMS—can be built much more quickly with Ruby on Rails than with PHP, .NET, or Java, once the investment required to learn Rails has been made. Does your web app fall within the RoR "sweet spot?"
Take Control of Your Maps
by Paul Smith
Issue 256April 8, 2008
It is now possible to replicate Google Maps’ functionality with open source software and produce high-quality mapping applications tailored to your design goals. Paul Smith shows how.
Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8
by Aaron Gustafson
Issue 251January 21, 2008
For seven years, the @DOCTYPE@ switch has stood designers and developers in good stead as a toggle between standards mode and quirks mode. But when IE7, with its greatly improved support for standards, "broke the web," it revealed the flaw in our toggle. The quest was on to find a more reliable ensurer of forward compatibility. Is version targeting the answer?
Graceful E-Mail Obfuscation
by Roel Van Gils
Issue 248November 6, 2007
Hide e-mail addresses from spam bots while revealing them to readers as real, clickable links. This transparent and fully automated solution guarantees that all addresses on your site will be safe—even the ones that show up in blog comments!
If I Told You You Had a Beautiful Figure…
by Aaron Gustafson
Issue 246September 25, 2007
Laying out images consistently within a design is difficult, especially when you hand the keys over to someone else to fill in the content. ALA Staffer Aaron Gustafson demonstrates how a little clever JavaScript goes a long way toward resolving inconsistencies in image layout.
Cross-Browser Scripting with importNode()
by Anthony Holdener
Issue 234March 27, 2007
Anthony Holdener explores the world of XML DOM support for web browsers and presents a new technique for cross-browser scripting.
Ruining the User Experience
by Aaron Gustafson
Issue 234March 27, 2007
Anticipating your users' needs is the key to making a good impression; it's the little things that matter most. ALA technical editor Aaron Gustafson explains why progressive enhancement means good service.
Flash Embedding Cage Match
by Bobby van der Sluis
Issue 232February 6, 2007
Ever had to embed Flash into a web page and just been plain confounded about the best way to do it? Be confused no more! Bobby van der Sluis cuts through the arguments and opinions about the many techniques available.
Making Compact Forms More Accessible
by Mike Brittain
Issue 229December 19, 2006
Space constraints can put the squeeze on accessibility and usability. Mike Brittain shares his method for making itty-bitty forms more accessible and easier to use.
User-Proofing Ajax
by Peter Quinsey
Issue 228December 5, 2006
Ajax offers the ability to avoid both needless browser behavior like page reloads and useful browser behavior like error handling. When good web apps go bad, Peter Quinsey's guidelines and techniques can help you and your users stay informed and productive.
Text-Resize Detection
by Christian Heilmann, Lawrence Carvalho
Issue 223September 12, 2006
Chris Heilmann and Lawrence Carvalho serve up a way to detect your visitors' text size settings using JavaScript.
Print to Preview
by Pete McVicar
Issue 226October 24, 2006
Going from the browser to the printer has always been a bit of a guessing game. In this article, Pete McVicar shows us a method for providing users with a reliable print preview.
Automatic Magazine Layout
by Harvey Kane
Issue 219July 11, 2006
You can't always count on having a professional designer around to resize and position your images for you, but you'd rather your page layout didn't look like it was created by orangutans. Harvey Kane builds a script that makes your life easier.
Behavioral Separation
by Jeremy Keith
Issue 218June 20, 2006
Breaking up is hard to do. But in web design, separation can be a good thing. As Jeremy Keith explains, content, style, and behavior all deserve their own space.
Community Creators, Secure Your Code! Part II
by Niklas Bivald
Issue 217May 23, 2006
In part two of his two-part series on protecting your community site from malicious cross-site scripting attacks, Niklas Bivald rolls up his trousers and wades into the JavaScript.
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
Nifty web maps powered by Google and Yahoo! APIs are all the rage. And rage is what a visually impaired user may feel when trying to use them. Is there a way to make beautiful web maps accessible? In a word, yes.
Getting Started with Ajax
by Aaron Gustafson
Issue 213March 7, 2006
In this excerpt from O'Reilly's Web Design in a Nutshell, 3rd Edition, ALA's production editor would like to take you aside for a little chat about the birds and the bees. Or maybe about Ajax.
Introducing the CSS3 Multi-Column Module
by Cédric Savarese
Issue 204September 26, 2005
Cédric Savarese would like you to meet the CSS3 multi-column module. It may not have extensive browser support yet, but this semantically sound method of dividing content into columns may be more relevant than you think.
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.
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 1, 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.
Enhance Usability by Highlighting Search Terms
by Brian Suda, Matt Riggott
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.
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!
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 9, 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 5, 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.
JavaScript Image Gallery
by Jeremy Keith
Issue 170February 6, 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.
Exploring Footers
by Bobby van der Sluis
Issue 170February 6, 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.
Improving Link Display for Print
by Aaron Gustafson
Issue 203September 19, 2005
Some time ago, Eric Meyer showed you how to add URIs to the printed version of your pages using print styles. Sometimes, though, too many inline URIs can make pages hard to read. Aaron Gustafson comes to the rescue with a JavaScript add-on that'll have you loving your linkage again.
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 7, 2003
Teach your smart little menus to do the DHTML dropdown dance without sacrificing semantics, accessibility, or standards compliance or writing clunky code.
JavaScript Logging
by David F. Miller
Issue 202September 5, 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.
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 160x160 PDA screen as it does on a 1024x768 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 8, 2002
Design smarter, faster, better rollovers with CSS.
A Backward Compatible Style Switcher
by Daniel Ludwin
Issue 136February 8, 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 2, 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.
Meet the DOM
by J. David Eisenberg
Issue 60April 21, 2000
We’ve read about it. We’ve waited for it. Now we can actually start to use it. In this gentle introduction to the W3C Document Object Model, new ALA contributor Eisenberg shows how to make friends with the DOM, and use its power to manipulate dynamic HTML elements on the web.
*Can’t find what you’re looking for? View all topics and subtopics »
