Neatly Sliced

Usually JavaScript libraries include a getElementsByClassName function. However, if you’re building your own personal library, you may want to include your own version. Robert Nyman has built and amended over the past 2.5 years a function for this very method: The Ultimate getElementsByClassName!

The parameters passed in are the element of origin (e.g., document), the tags to search (e.g., “div” or “*”), and the class name or names that you wish to aggregate.

The last revision was May 2007, but the method is so tiny and has undergone several revs. I have added it to my personal library and it works well. I haven’t tested performance, but it’s gone through so many revs that it must be worthwhile to have lasted this long. I know, to make an assumption that something is good because it has lasted is somewhat flawed logic, but from the JS that I know, it looks clean.

JS gurus, tell me, is it hot or not? Downloadable Ultimate getElementsByClassName.

I have previously used the following to check if an element belongs to a certain CSS class:

This method fails when an element bears two or more classes (which I have been using more frequently). A better method is to use JavaScript regular expressions methods to find whether the class attribute contains your class. Visit regular-expressions.info for a crash course on regular expressions if you are unfamiliar - they are fabulous and you must learn to use them.

There are several JavaScript RegExp methods we can implement. The best for this purpose is the test() method.

With the following HTML, the aforewritten regular expression will return true. Using the JS equality operator would return false.

Congratulations to Dawid Lizak for winning the CSS Off competition of June. View his winning entry.

Gripes

Note: A lot of these gripes are directed to my own misunderstanding of the rules of this fairly new competition. If you disagree with any of my gripes, please, leave a comment.

Non-Semantic HTML

There are divs named "top", "topleft", etc. About half of the classes/ids are named semantically, and the others are describing style. The naming convention implemented is far from CSS best practices.

Copy Alterations

In the "Upcoming Events" section, Dawid has changed "August", "June", et cetera, to their three character abbreviation. The copy that we received in the Jabroni packet (included with the PSDs were text files of the copy) distinctly bore the month name fully spelled. Changing the month in the HTML is a cop-out. If the system feeds the page "August", and the design calls for "AUG", some sort of server-side or client-side processing must be taken. This ought to be clarified in future contests. If I can assume that "January" has been handled on the server-side, I would love to hard-code "JAN" into my page rather than write JavaScript to handle the text transform.

In like manner, there are various places where the HTML has uppercase lettering hard-coded rather than handled with CSS. The text document bore sentence capitalization. It's not fair to change this in the HTML unless we have specified that certain server-side text manipulation may be assumed. Conversely, it's simple to perform an uppercase text-transform with CSS, and I'm upset to see the lack of such a simple CSS implementation on the winning entry.

Missing Headings

Some of the heading tags are in improper order. An h5 tag is used underneath an h2 tag - tsk, tsk. This is a bear on the document outline and generally poor HTML practice. Some can be chalked up to semantics, but you should never jump multiple heading levels like that. You can find errors in your document outline by using the Web Developer's toolbar in Firefox: Miscellaneous > View Document Outline. If you are missing heading elements (as Lizak's entry is), this tool will reveal them to you.

Usage of b, small tags

I know they are technically valid, but really, are we ignoring best practices? And the "small" tag? Could we be any less semantic? Why don't we just write < font size="-1"> while we're at it?

Diversion from Original Design

I understand that some diversion is good if it improves upon the original design. This gripe is just a personal "Arg" because I was going to force my header to span the width of the browser window, like Dawid, but I looked again at the design and said, "No, that is not in the design," and refrained. Now I am wiser for future competitions.

Self-Critique

My entry did not validate. Why? Because I forgot to close my img tags a couple of times, and I forgot an alt attribute on one or two images. Arg! My CSS was valid, but not my HTML. I remember thinking immediately after I submitted the entry, "Doh! I forgot to validate my HTML!"; it must have been an oversight/tiredness from the short amount of time (only a few hours) that I had to build this.

I had not noticed my massive file size: 111kb. I wholly attribute this to my lack of proper image editing software.

Had my code validated, I am confident that I would have been one of the 6 semi-finalists. I should have abstracted my JavaScript. I'm relatively new to proper implementations of JavaScript and I see now the flaws in my JavaScript for cross-browser compatibility - namely, using getAttribute("class") rather than the .className property for IE compatibility. I also wonder if my lack of attention to fonts played a part in the disqualification. That's part of the frustration: when I'm coding a design in the workplace, I can ask the designer what typeface, what font size, what exact hex color.

So it goes.

Fortunately, I was one of 15 finalists (out of the 48 timely entries). View the finalists (I'm #10 in the list of chronologically ordered entries). Regardless of my place, I learned quite a few lessons in speed-coding.

Final Thoughts

I shouldn't gripe so much, as I neglected to close a few "img" tags, and had a minor cross-browser JavaScript quirk to learn about. I have also learned to spend more time in optimizing images for the web.

Sadly, I didn't really learn much from the winning entry except the interesting method of employing a two-toned header spanning the width of the browser window. It utilizes non-semantic divs, but we live in the real world, not an ideal one, which makes sparing use of non-semantic divs "acceptable".

It is a fabulous competition. With my learned lessons (from my stupid mistakes), perhaps I have a better chance of winning the next competition. Thanks to Tony and JD for their long hours judging despite loads of entrants' griping.

Courtesy of Daniel Nolan, I found this handy little rollover JS to add rollovers for all your images. It is standards compliant and will not invalidate your HTML. It also majorly cuts down on the bulkiness of your HTML, eliminating the inline JS that is so common on sites nowadays for image rollovers.

Why not just use pure CSS?

CSS allows use of the :hover pseudo-class to swap images. This eliminates nasty inline javascript nonsense to accomplish the same thing and even works with JavaScript disabled. Why not use this method?

I asked myself the same question. There are two answers:

1. Safari does not support image replacement on form elements. Thus, the solution would only work some of the time.
2. IE6 only supports :hover on anchor tags. "Who cares?" you ask. Well, clients who pay money for their sites to work for the largest audience possible care. And, people who don't upgrade their machines care. So, anyone with IE6 would lose the image rollover. Isn't that sad? Especially when you can include them so simply?

How to use it

1. Have a consistent naming convention for your image (and its rollover)

   For example, name your image myimage.jpg, and your rollover myimage_o.jpg. The JS function handles the rest. It even handles the image preloads. Isn't that nice?

2. Add the class "imgover" to the image which you would like the rollover applied.
3. Include the rollover.js file in your site template. If you have a whole bunch of functions executing on the window.onload, delete that line from the bottom of rollover.js and add initRollovers(); to your preload function.

I made a minor addition to include inputs of type "image", as it was hugely cumbersome to me on a site that already had these implemented. My addition is copied below:

var aInputs = document.getElementsByTagName('input');

for (var i = 0; i < aInputs.length; i++){
if(aInputs[i].className == 'imgover'){
if(aInputs[i].getAttribute('type') == 'image'){
var src = aInputs[i].getAttribute('src');
var ftype = src.substring(src.lastIndexOf('.'), src.length);
var hsrc = src.replace(ftype, '-over'+ftype);

aInputs[i].setAttribute('hsrc', hsrc);

aPreLoad[i] = new Image();
aPreLoad[i].src = hsrc;

aInputs[i].onmouseover = function() {
sTempSrc = this.getAttribute('src');
this.setAttribute('src', this.getAttribute('hsrc'));
}

aInputs[i].onmouseout = function() {
if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('-over'+ftype, ftype);
this.setAttribute('src', sTempSrc);
}

}
}
}