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 :-)

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.

This is nothing groundbreaking, but a thing I realised when checking some of my older scripts.

When it comes to hiding a lot of elements via JavaScript and CSS we tend to loop through and apply a class to hide them:

HTML:

<div id="sections">
<div>
<h2>Section 1</h2>
[... content ...]</div>
<div>
<h2>Section 2</h2>
[... content ...]</div>
<div>
<h2>Section 3</h2>
[... content ...]</div>
</div>

CSS:

.hide{
  position:absolute;
  left:-999em;
  height:1px;
  overflow:none;
}

JavaScript:

var s=document.getElementById('sections');
if(!s){return;}
var divs=s.getElementsByTagName('div');
for (var i=1;i
var& s = document.getElementById('sections');
if (!s){ return; }
var divs = s.getElementsByTagName('div');
for (var i = 1;i < divs.length;i++) {
  divs[i].className='hide';
}

We can avoid this loop by using the contextual selector in CSS in conjunction with one dynamic class:

#sections.dynamic div{
  position:absolute;
  left:-999em;
  height:1px;
  overflow:none;
}

We need the dynamic class to avoid us using CSS to hide things and JavaScript to show them, which is just not safe as either of the two might not be available. Instead of the loop all we need to do is assign the class to the parent node:

JavaScript:

var s=document.getElementById('sections');
if(!s){return;}
s.className='dynamic';

In the script that should show one of the elements we apply a class that overrides the initial hiding:

#sections.dynamic div.show{
  position:relative;
  left:0;
  height:auto;
  overflow:auto;
}

This does not only mean that we spare us the looping, we also keep all the look and feel in the CSS.

Glenn Jones of Mapsurface.com just sent me my login details for this cool tracking tool.

Try it now by pressing ALT+X on your keyboard (seems not to work in Opera though).

What I love about it:

• The slick interface
• The validity – it stays in the head of the document as two includes and doesn’t do any document.write nasties in the body
• The on-demand nature – you might not want to wait for my tracker to run

What I think needs to change:

• You should be able to password – protect the stats

If that were the case, I’d try and approach a lot of clients with this goody.

Following a comment I put on the amazing redesign of Veerle’s Blog, she answered that she needed to use two links – one for a text and one for an icon to make the icon clickable.

It can be done in one link in various ways (embedding an image for example) ,but the coolest seems to be to use a background image in CSS, and add enough padding to show it as a background. This also allows you to easily create a rollover state with CSS and an appropriate picture.

Check the example page

The code:

articles RSS

And the CSS trick:

p.rss a:link,

p.rss a:visited{

padding-right:28px;

line-height:17px;

font-size:.85em;

text-decoration:none;

color:#9b9c93;

height:25px;

float:left;

background:url(rssani.gif) top right no-repeat transparent ;

}

	
p.rss a:hover,

p.rss a:focus,

p.rss a:active{

background-position:100% -91px;

}