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.

I am not affiliated with those guys, just heard about them via flow once, but I really really like the job post they have on their site:

Desperation of the most charming kind

Sounds like a fun place to be.

I just got informed via email that The XHTML compliant scroller at ibloomstudios looks spookily like a slightly edited version of my own DOMnews script .

I don’t want to point fingers and Nick claims in the comments that he did the script himself.

Am I paranoid?

• DOMNews source
• XHTML compliant scroller source (hope it is OK to show that source here)

Update: Nick has taken the article off-line, agreeing that the code is similar. He had claimed in the article beforehand that the code was taken from a horizontal scroller without giving the source or credit though. Now it might be interesting to know where that horizontal scroller is, as Nick doesn’t know any longer. Anyone?

Just when I thought I am going research crazy I stumbled upon the AJAX/DHTML library scorecard at musingsfrommars.org.

The article reviews a lot and I mean a lot of DHTML/AJAX/JS libraries and categorises them into grades how cross-browser they are. If you want to pick a library to use instead of rolling your own solutions and you don’t want to leave a certain number of visitors standing in the rain, check this scorecard beforehand.

Great job!

The only annoying thing is the page itself. I’d have liked to print the lot out, but it won’t do that on Firefox.

Evolt.org, has announced a redesign contest. Quoting Martin Burns:

Hi folks
Ever looked at the evolt site and thought “I could do better than that”?
Ever thought “All very nice, but it’s a bit 1999”?
Ever thought “It’s not using half the potential that Drupal (plus
modules) gives it”?
Ever thought “Wish we could be as gorgeous as $insertsitehere”?
Well, now’s your chance. Evolt.org is proud to announce a grand
Design Contest, to
redesign www.evolt.org. If your entry wins, it becomes the new design – simple, eh?
Background, rules and so on at the 2006 WEO Design Contest
but the key things are:
1) The site’s staying in Drupal
2) Ease of implementation is as important as beauty of design
3) Entries in by end April

Give us a hand and have a go!