jQuery Word Clock proof of concept

[von]

I saw some really cool “word clocks” on the internet like
this physical one on instructables http://www.instructables.com/id/A-Word-Clock/
and this screensaver http://www.simonheys.com/wordclock/

So I thought I would see what I could do with jQuery. This was the final version of the clock when I decided I was happy with it, but I’m pretty sure my code could be cleaned up quite a bit.
You can check it out here http://home.comcast.net/~vonholdt/test/word_clock/

[img]http://home.comcast.net/~vonholdt/test/word_clock/wordclock-preview.jpg[/img]

[MrBrightside]

I don’t have anything more constructive to say, but that’s pretty nifty!

[von]

I just realized that my function to adjust the font-size is breaking in IE and the clock’s words never show up. any ideas?

Code:

// Resize the text up to 100px to fit in window:
function sizeclock(){

$(“#clock”).stop().addClass(‘hide’).animate({“opacity”: “0.0”}, 0, function(){

$(this).css(‘font-size’,100);

while ( $(this).height() > ($(window).height()-120) ) {
var newfontsize = (parseFloat($(this).css(‘font-size’), 10) – 1);
$(this).css(‘font-size’,newfontsize);
$(“#sizelabel”).html(“font sized to: ” + newfontsize + “px”);
};

$(this).removeClass(‘hide’).animate({“opacity”: “1.0”}, 500);

});

};

// Do the Resize:
sizeclock();

// Resize again if window size changes:
$(window).bind(‘resize’, sizeclock);

[ejungerman]

A mesmerizing display. I just saw one thing needing fixing: "forty" was spelled incorrectly.

[Author]

Posts