Fancy jQuery Clock (IE Fail)

[von]

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

[akeenlabs]

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]

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

[holly]

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

[holly]

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:

[Author]

Posts