Allow me to be a bit narcistic for a moment – don’t worry it does not involve a podcast of me talking about web design stuff:

I just wanted to announce that I am quitting my current job on the 14th of April and from the 24th of April (2 days before my birthday) onwards I will work for Yahoo UK as a web developer.

I am quite happy to join a company that dabbles in the same market sizes I worked in the last few years but really does subscribe to ideals like web standards and User Centric Design. To illustrate my dedication to this cause it might be of interest that I took a slight paycut and will not have the fancy “Lead Developer” title any longer. I think having fun and getting satisfaction out of what you do is more important anyways.

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.