CODEWITHSUNDEEP
javascriptjquery
Plastika
Plastika

Reputation: 223

Javascript works in Firefox, Chrome and Safari but not in IE

As the title says. I have two animated clocks which are simply not moving in IE8 Is there something I am missing here which is affecting the animation in IE?

Clocks: 

(function(jQuery)
{
  jQuery.fn.clock = function(options)
  {
    var defaults = {
      offset: '+0',
      type: 'analog'
    };
    var _this = this;
    var opts = jQuery.extend(defaults, options);

    setInterval( function() {
      var seconds = jQuery.calcTime(opts.offset).getSeconds();
      if(opts.type=='analog')
      {
        var sdegree = seconds * 6;
        var srotate = "rotate(" + sdegree + "deg)";
        jQuery(_this).find(".sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate, "-ms-transform" : srotate});
      }
      else
      {
        jQuery(_this).find(".sec").html(seconds);
      }
    }, 1000 );

    setInterval( function() {
      var hours = jQuery.calcTime(opts.offset).getHours();
      var mins = jQuery.calcTime(opts.offset).getMinutes();
      if(opts.type=='analog')
      {
        var hdegree = hours * 30 + (mins / 2);
        var hrotate = "rotate(" + hdegree + "deg)";
        jQuery(_this).find(".hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate, "-ms-transform" : hrotate});
      }
      else
      {
        jQuery(_this).find(".hour").html(hours+':');
      }
      var meridiem = hours<12?'AM':'PM';
      jQuery(_this).find('.meridiem').html(meridiem);
    }, 1000 );

    setInterval( function() {
      var mins = jQuery.calcTime(opts.offset).getMinutes();
      if(opts.type=='analog')
      {
        var mdegree = mins * 6;
        var mrotate = "rotate(" + mdegree + "deg)";        
        jQuery(_this).find(".min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate, "-ms-transform" : mrotate});                
      }
      else
      {
        jQuery(_this).find(".min").html(mins+':');
      }
    }, 1000 );
  }
})(jQuery);


jQuery.calcTime = function(offset) {
  d = new Date();
  utc = d.getTime() + (d.getTimezoneOffset() * 60000);
  nd = new Date(utc + (3600000*offset));
  return nd;
};

The above code is something I found on the web after spending far to much time trying to get excanvas working correctly in IE

If someone could please correct the errors of my ways, it would be most appreciated.

Edited to only the clock animation issue

Upvotes: 0

Views: 336

Answers (2)

Rezigned
Rezigned

Reputation: 4942

IE doesn't support transform property (Only IE9+). If you're working on IE 9 you can add this -ms-transform 

.css({
 "-moz-transform" : mrotate, 
 "-webkit-transform" : mrotate,
 "-ms-transform" : mrotate
});

For IE8 It's a bit complicate. You have to use rotation matrix e.g.

 // convert to radian first
 var rad = Math.PI/180 * sdegree,
     cos = Math.cos(rad),
     sin = Math.sin(sin); 

'-ms-filter': "progid:DXImageTransform.Microsoft.Matrix(M11="+cos+", M12="+(-sin)+", M21="+sin+", M22="+cos+", SizingMethod='auto expand')";

Upvotes: 1

Simon Wang
Simon Wang

Reputation: 2963

talking about IE only, it always just caused by something missing or additional character, it looks one semicolon is missing after the mouseover binding:

$('.navlinks img').mouseover(function(){
    $(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
});

Upvotes: 1

Related Questions