I finally reached the AJAX chapter in my book and had to dabble with it for the first time (yes I know I should have done it earlier, but I work behind a proxy in the office that doesn’t let any outgoing requests through).

The first outcome is FeedNav, a RSS feed displayer: Have a look and I’d be happy about feedback here on the blog.

• Check and get FeedNav - an AJAX RSS displayer

I just published a new longer article (40 pages) trying to explain the differences between DHTML and DOM scripting. The article explains what DHTML, the DOM and DOM scripting is and shows how to create a web page with dynamic elements like tabs, a slide show and a big product shot in both ways.

• Check From DHTML to DOM scripting now

The DHTML explanation is annotated with explanations why some of the techniques are a bad idea and the DOM scripting version explains why some of the assets are good ideas. As a summary:

DHTML issues:

1. Script dependence - Users without JavaScript get stuck or get elements that only work with JavaScript but don’t do anything for them.
2. Mixing presentation and functionality - If you want to change the look of the effect you need to hack around the JavaScript.
3. Assuming functionality without testing for it - what it says
4. Keeping maintenance JavaScript based - Maintainers are expected to change the script when they want to change the effect, and search through the whole script.
5. Mixing HTML and JavaScript - what it says
6. Blaming the user - Users get messages like “you cannot use this as your browser doesn’t support it, update your browser” instead of just not getting the functionality if it is not 100% necessary.
7. Taking over the document - one onload to rule them all

DOM scripting assets:

1. Progressive Enhancement - check if things are available, then apply those dependent on them
2. Ease of maintenance - keep the maintenance as easy as possible via dynamic CSS classes and properties at the beginning of the script
3. Separation of Presentation and Behaviour - add dynamic classes instead of changing the style collection
4. Separation of Structure and Behaviour - use dynamic event handlers and generated elements instead of onclick and NOSCRIPT
5. Using modern event handling - more than one onload please
6. Avoiding clashes with other scripts - avoid global variables and encapsulate functions as methods in an object

Of course, you can disagree :-)

I was just mildly shocked that my book is already on Amazon.com while I am still writing chapter 6 of 9!

So I guess it is time to cut down on the posting here and other things like bathing, eating and sleeping to ensure I get it ready in time to beat the next Harry Potter in the sales ranks (or something like that).

As part of my book, I am right now writing the “common uses of JavaScript” Chapter, and this morning a request by Michel Bozgounov on the CSS-d list tickled my fancy.

He wanted an easy way to show slightly larger images when clicking on very small thumbs inside a page. While his solution would force visitors to load all the images (including the large ones), I quickly put together a solution that only loads the larger images in the same list when JS is available.

• Check out Minislides - inline slide shows with DOM and CSS

This is only a beta and a freebie. The full version with explanations is part of the book and I cannot give it out (yet) as it will be part of the whole copyright and all that Jazz.

Enjoy, and hopefully you find it useful.

Following feature requests in the comments below via I updated DOMtab once again. You can now link to tabs via the URL and get previous and next links!

DOMtab is a JavaScript that turns a list pointing to different content sections (like an FAQ) into a tabbed interface. Users without JavaScript will still get all the functionality, except they will have to scroll the page. DOMtab automatically removes any “back to top” links when the tabbed interface can be achieved.

• The look and feel is completely styleable
• You can use as many tabbed menus in a page as you wish to use.
• Creation of a link that shows all the sections - for example to print out the page.
• Automatic highlighting of tabs via anchors in the url (this also allows to use forms in the tabs - just add the anchor name to the action) new
• Previous and next links for navigating through the tabs - in case you want to have a step by step approach new

Go and check DOMtab version 3.1415927 now