Grow your CSS skills. Land your dream job.

Fancy jQuery Clock (IE Fail)

  • von
    # August 25, 2009 at 5:12 pm

    Hello all,

    I was working on one of my random projects and thought I’d made a pretty slick jQuery clock. The spacing, which the entire presentation is based on fails miserably in IE (any version). Any help would be appreciated.

    von

    Main version: http://home.comcast.net/~vonholdt/test/clock
    Dark version: http://home.comcast.net/~vonholdt/test/clock/clock_dark.htm
    A peak under the hood version: http://home.comcast.net/~vonholdt/test/clock/clock_show.htm

    The markup is pretty simple

    html

    Code:








    css

    Code:
    * { margin:0; padding:0; borderwidth:0; }

    body { color:#000; background:#fff url(back.jpg) no-repeat; text-align:center; }

    #wrap { position:relative; width:680px; height:140px; background: url(black.png); border:solid 1px #000; text-align:left; overflow:hidden; }

    #wrap img.time { float:left; }

    #wrap #cover { position:absolute; top:0; left:0; width:680px; height:140px; background:url(fade.png) repeat-x; }

    jQuery

    Code:

    Sorry for the crazy long post...

    # August 26, 2009 at 5:22 pm

    I know this isn’t going to make or break it, but it might be a good idea to get out of Quirks mode in IE; give that sucker a doctype. Also, your "text-align: center" on the body is throwing it off in IE7 (IE8 should be correct with a nice doctype). Does that fix the overall layout/spacing (at least in IE8)?

    Nice work, by the way, I like it :)

    I’ll keep looking…

    von
    # August 27, 2009 at 5:38 pm

    Thanks Justin, I left out the doctype in haste when I started writing the page, and the text-align was a holdover from early on I forgot to get rid of. That seems to have fixed the layout issues, at least with IE8, but the script is still behaving wierd in IE.

    Every time the seconds roll past 7, it starts moving everything, so I think it’s some problem between decimal and octal numbers but I don’t know where.

    The amazing thing is that it works great on the dumpy Opera browser on my Wii. Any ideas?

    von

    # December 11, 2009 at 7:58 am

    the best Jaca-Clock I’ve seen. With the following code it’s in function on every browser with jquery-support. But don’t start the page locally with Internet Explorer. If you start the code from a network attached drive or a http-server all works fine.

    Code:
    // buggy on IE only from start from local drive
    function checktime(prevhour,prevmins,prevsecs){
    var now = new Date();
    var hour = now.getHours();
    var mins = now.getMinutes();
    var secs = now.getSeconds();
    hour=((hour < 10) ? "0" : "") + hour + "";
    mins=((mins < 10) ? "0" : "") + mins + "";
    secs=((secs < 10) ? "0" : "") + secs + "";
    if(prevhour != hour) {
    prevhour += "";
    if(prevhour.charAt(0) != hour.charAt(0)) numberflip('#hourl',hour.charAt(0));
    if(prevhour.charAt(1) != hour.charAt(1)) numberflip('#hourr',hour.charAt(1));
    }
    if(prevmins != mins) {
    prevmins += "";
    if(prevmins.charAt(0) != mins.charAt(0)) numberflip('#minl',mins.charAt(0));
    if(prevmins.charAt(1) != mins.charAt(1)) numberflip('#minr',mins.charAt(1));
    }
    if(prevsecs != secs) {
    prevsecs += "";
    if(prevsecs.charAt(0) != secs.charAt(0)) numberflip('#secl',secs.charAt(0));
    if(prevsecs.charAt(1) != secs.charAt(1)) numberflip('#secr',secs.charAt(1));
    }
    function numberflip(which,number){
    if(number != 0) $(which).animate({marginTop: '-'+parseInt((number*140),10)+'px'}, 250, 'linear');
    if(number == 0) {
    var getmargin = parseInt(($(which).css('margin-top')), 10);
    $(which).animate({marginTop: parseInt((getmargin-140),10)+'px'}, 250, 'linear', function(){ $(this).css("margin-top","0px") });
    }
    }
    setTimeout(function(){checktime(hour,mins,secs);}, 200);
    }

    checktime(00,00,00);

    if ($.browser.msie) {
    $('#wrap').animate({opacity: 0.6}, 1000);
    } else {
    $('#wrap').animate({opacity: 0.9}, 1000);
    }

    Regards

# December 20, 2009 at 9:30 am

Hi, and here a version for all browsers with CSS-Sprites, working locally and in networking environment. You need the jquery.backgroundPosition Plug-In for Background Image Animation.

Greetings

Code:





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