Geeks With Blogs
Reidar Husmo SharePoint from the trenches

The clock I made in part i displays the time in "long" - "It's a quarter to ten" (but in Norwegian).


To save space, some letters are shared, "sevenineight" is four letters shorter than "seven nine eight".

We only want to highlight the "correct" parts of this, for example "sevenineight".

When I started programming the clock, each letter had its own unique ID, and my script would "get" each element individually, and highlight / hide each element according to some obscure logic.

I quickly realized, despite being in a post surgery haze, …this is a stupid way to do it.

And, to paraphrase NPH, if you find yourself doing something stupid, stop, and be awesome instead.

We want an easy way to get all the items we want to highlight.

Perhaps we can use the new getElementsByClassName function?

Try to mark each element with a classname or two.

So in "sevenineight": 's' is marked as 'h7', and the first 'n' is marked with both 'h7' and 'h9' (h for hour).

<div class='h7 h9'>N</div><div class='h9'>I</div>

getElementsByClassName('h9') will return the four letters of "nine".

Notice that these classes are not backed by any CSS, they only appear directly in html (and are used in javascript).

I have not seen classes used this way elsewhere, and have chosen to call them "marker classes" - similar to marker interfaces - until somebody comes up with a better name.

Posted on Thursday, July 5, 2012 10:11 AM Html | Back to top

Comments on this post: Html 5 clock, part ii - CSS marker classes and getElementsByClassName

# re: Html 5 clock, part ii - CSS marker classes and getElementsByClassName
Requesting Gravatar...
Even I call these marker classes and make use of this concept--seems like a neat and elegant solution, but I'm wondering if this might have any performance impacts. As far as I understand, it shouldn't.
Left by Ayon Ghosh on Jun 30, 2014 11:37 AM

Your comment:
 (will show your gravatar)

Copyright © Norgean | Powered by: