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 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]

    # 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

    von
    # 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?

    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);

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

*May or may not contain any actual "CSS" or "Tricks".