Coding a site

Setting up a charity sponsorship site I needed two time counters one for time elapsed and one for time left. I could write my own, but I was sure someone else would have written an elegant solution better than I. So onto the 'net I did go and browsed.

Pulled one down that allowed a countup and countdown, and took it apart. It's great if you don't mind the fact that you can only have one timer at a time. Two was possible, but not one in each direction. So the lengthy code I started with got slightly lengthier until it worked. Great, not great; it ate memory and slowed down the browser to a grinding halt. I stared at the morass of code and thought "Sod this I'll do it myself". Half the code, with provision for infinite timers running whichever way you want and sans any little script snippets in the HTML itself.

Ego boosted I moved onto the next challenge - a marquee effect, that is a scrolling line of text. I tried two approaches - first off five positioned divs and an array of names, the divs would scroll along and when the first was off the 'screen' it would have its text changed to the next item and be bumped back to the end of the line. This produced a continuous scrolling effect while allowing individual styling of each div. But it required the text to be entered as an array in the script only showed 5 at a time and was thus unsearchable/unindexable.

For the second approach I added the text into the main body in the form of li items set then to inline-block so they appear horizontally rather than vertically then shifted the entire ul container across. This has the advantage that all the text is present and the code is smaller, but once you hit the end of the line you get a blank until the last item scrolls off and the entire ul is shifted back to the beginning. You also can't pick a random position to start from which was possible with the first approach. [Idiot of course you can the li has a fixed width so it's a simple multiple]

So I could go for a third approach combining the two. Use the DOM to count/step through each li and hide/show each as it comes in or falls off the screen.

Hmm I'll have a think about it.