Forums

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/

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

MrBrightside

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

TT_Mark

That is absolutely beautiful! :D

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?



    // 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.

treehouse : what would you like to learn today?

Forums

jQuery Word Clock proof of concept