Forums

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


<body>

  <div id=\"wrap\">

    <img id=\"hourl\" class=\"time\" src=\"nums2.png\" />
    <img id=\"hourr\" class=\"time\" src=\"nums10.png\" />
    <img id=\"col\" class=\"time\" src=\"colon.png\" />
    <img id=\"minl\" class=\"time\" src=\"nums6.png\" />
    <img id=\"minr\" class=\"time\" src=\"nums10.png\" />
    <img id=\"col\" class=\"time\" src=\"colon.png\" />
    <img id=\"secl\" class=\"time\" src=\"nums6.png\" />
    <img id=\"secr\" class=\"time\" src=\"nums10.png\" />

    <div style=\"clear:left;\"> </div>

    <div id=\"cover\"> </div>

  </div> <!-- End \"wrap\" -->    

</body>

css


* { 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; }

</style>

jQuery


<script>

  $(document).ready(function(){

    $('#wrap').animate({opacity: 0.0}, 0);
    
    function middle(){

      wrapTop = ($(window).height() - $('#wrap').height())/2;
      wrapLeft = ($(window).width() - $('#wrap').width())/2;

      $('#wrap').animate({marginTop: wrapTop, marginLeft: wrapLeft}, 500);

    };

      middle();

      $(window).bind('resize', middle);

    function checktime(prevhour,prevmins,prevsecs){

      var now = new Date();

      var hour = now.getHours();
      if(hour < 10) hour = \"0\" + hour;

      var mins = now.getMinutes();
      if(mins < 10) mins = \"0\" + mins;

	var secs = now.getSeconds();
	if(secs < 10) secs = \"0\" + secs;  

      var hour = hour + \"\";
      var mins = mins + \"\";
	var secs = secs + \"\";

      if(prevhour != hour) {

        var prevhour = prevhour + \"\"
        var hoursplit = hour.split(\"\");
        var prevhoursplit = prevhour.split(\"\");

        if(prevhoursplit[0] != hoursplit[0]) numberflip('#hourl',hoursplit[0]);
        if(prevhoursplit[1] != hoursplit[1]) numberflip('#hourr',hoursplit[1]);

      };

      if(prevmins != mins) {

        var prevmins = prevmins + \"\"
        var minsplit = mins.split(\"\");
        var prevminsplit = prevmins.split(\"\");

        if(prevminsplit[0] != minsplit[0]) numberflip('#minl',minsplit[0]);
        if(prevminsplit[1] != minsplit[1]) numberflip('#minr',minsplit[1]);

      };

      if(prevsecs != secs) {

        var prevsecs = prevsecs + \"\"
        var secsplit = secs.split(\"\");
        var prevsecsplit = prevsecs.split(\"\");

        if(prevsecsplit[0] != secsplit[0]) numberflip('#secl',secsplit[0]);
        if(prevsecsplit[1] != secsplit[1]) numberflip('#secr',secsplit[1]);

      };

      function numberflip(which,number){

		if(number != 0) $(which).animate({marginTop: '-'+(number*140)+'px'}, 250, 'linear');

		if(number == 0) {

              var getmargin = parseInt(($(which).css('margin-top')), 10);

              $(which).animate({marginTop: (getmargin-140)+'px'}, 250, 'linear', function(){
                $(this).css(\"margin-top\",\"0px\")
		  });

            };

      };

      setTimeout(function(){checktime(hour,mins,secs);}, 200);

    };

    checktime(00,00,00);

    $('#wrap').animate({opacity: 1.0}, 1000);

  });

</script>

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.

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

<head>
		<script type=\"text/javascript\" src=\"jquery-1.3.2.min.js\"></script>
		<script type=\"text/javascript\" src=\"jquery.backgroundPosition.js\"></script>
		<style type=\"text/css\">
          body { color:#fff; background:#000 url(back_dark.jpg) no-repeat; }
          #wrap { float:left; position:relative; width:680px; height:140px; background:url(black.png); border:solid 1px #fff; text-align:left; }
          #cover { position:absolute; top:0; left:0; width:680px; height:140px; background:url(fade_dark.png) repeat-x; }
        </style>
        <script type=\"text/javascript\">
        $(document).ready(function(){
          $('#wrap').animate({opacity: 0.0}, 0);
		  
		  function middle(){
            wrapTop = ($(window).height() - $('#wrap').height())/2;
            wrapLeft = ($(window).width() - $('#wrap').width())/2;
            $('#wrap').animate({marginTop: wrapTop, marginLeft: wrapLeft}, 500);
          }
          middle();
          $(window).bind('resize', middle);

          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),3);
              if(prevhour.charAt(1) != hour.charAt(1)) numberflip('#hourr',hour.charAt(1),5);
            }
            if(prevmins != mins) {
              prevmins += \"\";
              if(prevmins.charAt(0) != mins.charAt(0)) numberflip('#minl',mins.charAt(0),6);
              if(prevmins.charAt(1) != mins.charAt(1)) numberflip('#minr',mins.charAt(1),10);
            }
            if(prevsecs != secs) {
              prevsecs += \"\";
              if(prevsecs.charAt(0) != secs.charAt(0)) numberflip('#secl',secs.charAt(0),6);
              if(prevsecs.charAt(1) != secs.charAt(1)) numberflip('#secr',secs.charAt(1),10);
            }
            setTimeout(function(){checktime(hour,mins,secs);}, 200);
          }
            function numberflip(which,number,maxnumber){
		      if(number != 0) {
                var x = '0 -'+parseInt((number*140),10).toString()+'px';
                $(which).animate({backgroundPosition: x}, 250, 'linear');
                }
		      if(number == 0) {
                var x = '0 -'+parseInt((maxnumber*140),10).toString()+'px';
                $(which).animate({backgroundPosition: x}, 250, 'linear', function(){ $(this).css(\"background-position\",\"0 0\") });
              }
 			}
  
          checktime(00,00,00);
          if ($.browser.msie) {
             $('#wrap').animate({opacity: 0.6}, 1000);
           } else {
             $('#wrap').animate({opacity: 0.9}, 1000);
           }
		   $(\".numberclass\").css({ 'position' : 'relative', 'display' : 'block',  'float' : 'left', 'cursor' : 'pointer', 'width' : '100px', 'height' : '140px', 'background-repeat' : 'no-repeat', 'background-position' : '0 0' });
		   $(\".colonclass\").css({ 'position' : 'relative', 'display' : 'block',  'float' : 'left', 'cursor' : 'pointer', 'width' : '40px', 'height' : '140px', 'background-repeat' : 'no-repeat', 'background-position' : '0 0' });
         });
         </script>
    </head>
<body>
<div id=\"wrap\">
  <div id=\"hourl\" class=\"numberclass\" style=\"background: url(nums2_dark.png) no-repeat top left\" title=\"\"></div>
  <div id=\"hourr\" class=\"numberclass\" style=\"background: url(nums10_dark.png) no-repeat top left\" title=\"\"></div>
  <div class=\"colonclass\" style=\"background: url(colon_dark.png) no-repeat top left\" title=\"\"></div>
  <div id=\"minl\" class=\"numberclass\" style=\"background: url(nums6_dark.png) no-repeat top left\" title=\"\"></div>
  <div id=\"minr\" class=\"numberclass\" style=\"background: url(nums10_dark.png) no-repeat top left\" title=\"\"></div>
  <div class=\"colonclass\" style=\"background: url(colon_dark.png) no-repeat top left\" title=\"\"></div>
  <div id=\"secl\" class=\"numberclass\" style=\"background: url(nums6_dark.png) no-repeat top left\" title=\"\"></div>
  <div id=\"secr\" class=\"numberclass\" style=\"background: url(nums10_dark.png) no-repeat top left\" title=\"\"></div>
  <div style=\"clear:left;\"> </div>
  <div id=\"cover\"> </div>
</div> <!-- End \"wrap\" -->
</body>
</html>

treehouse : what would you like to learn today?

Forums

Fancy jQuery Clock (IE Fail)