’Tis the season for DOM Scripting

’Twas the night before Christmas and all through the Web not a site was stirring, not even 24 Ways. Drew’s excellent advent calendar for web geeks has drawn to a close. What’s left is a really useful collection of articles.

If 24 Ways is any indication, DOM Scripting and Ajax are hot, hot topics this season. I count nine JavaScript-based articles.

The very first article was Drew’s Easy Ajax with Prototype. Prototype is a very useful framework but sadly lacking in documentation. That’s why hands-on articles like this are so useful.

Ian joined the fray two days later with Improving Form Accessibility with DOM Scripting. Two days after that, there’s my DOM Scripting Your Way to Better Blockquotes. And two days after that, Simon discusses the use of eval with Ajax: Don’t be eval().

After that, we had to wait until December 12th for Michael Heilemann’s Introduction to Scriptaculous Effects, featuring some disturbingly obtrusive JavaScript. As mentioned in the comments, the inline event handlers are there just for demonstration purposes but I’d still be worried about the cut’n’paste brigade using this as is.

On the 15th, Pat Lauke gave us Splintered Striper, his take on the striped tables effect. On the 18th, Dustin debuted his Ajax-based style switcher with Introducing UDASS!

Advent wrapped up with two Ajax articles in a row. The penultimate article, Drew’s Edit-in-Place with Ajax, is a very impressive interface enhancement that’s bound to inspire a lot of people. Finally, Shaun gave us Have Your DOM and Script It Too, a really clever little Ajax hack that he picked up during the building of mint.

All in all, a great December’s worth of resources. Sometimes the comments were infuriatingly inane and nitpicky — probably due to the influx of Diggophiles visiting the site — but that’s the Web for ya.

I’d like to extend a big thank you to everyone who contributed and raise a glass to Drew for putting the whole thing together (for he’s a jolly good fellow). Cheers! And happy Christmas.

Here’s the full list of all the articles:

  1. Easy Ajax with Prototype
  2. An Explanation of Ems
  3. Improving Form Accessibility with DOM Scripting
  4. CSS Layout Starting Points
  5. DOM Scripting Your Way to Better Blockquotes
  6. Practical Microformats with hCard
  7. Don’t be eval()
  8. Centered Tabs with CSS
  9. Putting the World into “World Wide Web”
  10. Auto-Selecting Navigation
  11. The Attribute Selector for Fun and (no ad) Profit
  12. Introduction to Scriptaculous Effects
  13. Transitional vs. Strict Markup
  14. Broader Border Corners
  15. Splintered Striper
  16. “Z’s not dead baby, Z’s not dead”
  17. Avoiding CSS Hacks for Internet Explorer
  18. Introducing UDASSS!
  19. Tables with Style
  20. Naughty or Nice? CSS Background Images
  21. Swooshy Curly Quotes Without Images
  22. Debugging CSS with the DOM Inspector
  23. Edit-in-Place with Ajax
  24. Have Your DOM and Script It Too

Posted by Jeremy on Saturday, December 24th, 2005 at 7:03pm


Congrat! I need to get one!

# Posted by elsakawai on Friday, December 30th, 2005 at 8:37pm

I was one of the people who commented on the scriptaculous article over at 24ways, and I’m reading the awesome book as we speak. I’ve been trying to hook up scriptaculous with unobtrusive javascript, but I’m not quite there (and I don’t know quite enough about javascript to actually make the final connection about whatever stupid mistake I’m making).

Right now, I have this:

function rawr() { var miniabout = document.getElementById(‘miniabout’); var slider = document.getElementById(‘slideup’); var sliderLink = slider.getElementsByTagName(‘a’); sliderLink.onclick = function() { Effect.SlideUp(‘miniabout’, {duration:1.0}); return false; } }

with the intended function: when a user clicks on the link with id "slideup" the slideup effect is triggered on the div with the id "miniabout." I’m launching the whole thing using addLoadEvent, like you suggest in your book. It seems like this should work. What am I doing wrong?

I understand that you don’t have infinite time to answer stupid questions like this, but you know, it’s worth a shot.

# Posted by Alex on Friday, January 13th, 2006 at 1:37am

getElementsByTagName will return a list of elements, not a single element. Right now, your variable sliderLink is an array.

If you’re trying to attach an event to a link with the id "slideup", you don’t need the extra step with getElementsByTagName. Just attach the onclick event to the variable slider - which refers to document.getElementById("slideup").

# Posted by Jeremy Keith on Friday, January 13th, 2006 at 1:44am

Thanks. The book is really amazing, you rock on so many levels for having written it. And for keeping this blog (it’s a great resource) and for actually responding to people’s comments. Very cool. Incommunicably so…

Unfortunately, the script still isn’t working, but at least it’s a step closer to it. I’m starting to wonder about scriptaculous…

# Posted by Alex on Friday, January 13th, 2006 at 4:37am

Sorry. Comments are closed.

December 2005

Recommended Reading

XML Subscribe

Grab the RSS feed for this blog.

JavaScript API

Grab the RSS feed of comments for this entry.