Treehouse: Grow your CSS skills. Land your dream job.

jQuery Word Clock proof of concept

  • von
    # January 23, 2010 at 1:34 pm

    I saw some really cool “word clocks” on the internet like
    this physical one on instructables
    and this screensaver

    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


    # January 24, 2010 at 2:06 pm

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

    # January 24, 2010 at 3:24 pm

    That is absolutely beautiful! :D

    # January 24, 2010 at 6:12 pm

    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(){


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

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



    // Do the Resize:

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

    # February 14, 2010 at 12:31 am

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.