Rotating clock hands in Internet Explorer

Question

I am trying to create a clock using jQuery. I am able to rotate all the hours, minutes and seconds hands, but am having some problems in rotating it exactly in Internet Explorer as it does in other browsers.

Why is this occurring? How can I rotate the clock hands in Internet Explorer as in other browsers?

This is what I have created so far:

$(document).ready(function(){
    var every_second = 1000;
    var every_minute = 60000;
    var every_twelve_minute = 60000;

    setInterval(rotateSeconds,every_second);
    setInterval(rotateMinutes,every_minute);
    setInterval(rotateHours,every_twelve_minute);
});

var seconds_angle = 0;
function rotateSeconds() {
    var element = $(".seconds");
    if(seconds_angle < 360) {
        seconds_angle = seconds_angle+5;
    }
    else {
        seconds_angle = 0;
    }
    element.rotate(seconds_angle);
}

var minutes_angle = 0;
function rotateMinutes() {
    var element = $(".minutes");
    if(minutes_angle < 360) {
        minutes_angle = minutes_angle+5;
    }
    else {
        minutes_angle = 0;
    }
    element.rotate(minutes_angle);
}

var hours_angle = 0;
function rotateHours() {
    var element = $(".hours");
    if(hours_angle < 360) {
        hours_angle = hours_angle+1.25;
    }
    else {
        hours_angle = 0;
    }
    element.rotate(hours_angle);
}

and here's a jsFiddle link to everything

Answer 1

You have two choices :

• you can run to a jQuery plugin which handle cross browser rotations and you will easily find one in google.

• OR, you may get interested in microsoft matrix transforms : http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx , and you will have to learn what is a 2*2 rotation matrix and how its terms have to be computed. That's not complicated. The difference with css3 rotation is that the rotation center is by default the top left corner of your element and you may have to work with margins.

So if you choose the second solution : for IE 9 and 10, use -ms-transform rule with css3 rotate function, and for others IE, use filter rule with Microsoft matrices. You may use Modernizr to detect csstransforms feature and use the css parent condition with the css classes .csstranforms and .no-csstransformsMdernizr added onload.

Answer 2

You didn't say what is wrong precisely with your clock in IE -- and in which version of IE.

If I were do draw an analog clock on a web page I would probably go with SVG.

IE6-8 has no support for SVG so if you need to support that I would use the Raphaël JS library. It creates SVG where available and falls back to proprietary VML on IE6-8. Look at their web site they have cool examples, including a funny polar clock (the concentric circles).

Here's an article explaining exactly what you try to achieve: an analog clock done on top of Raphael: Analog clock without images, complete with a frame and hour tick marks.

Answer 3

IE 8,7,... doesn't support CSS rotation

Answer 4

You can try to use jQuery Rotate plugin that will handle the cross-browser for you, and you just need to rotate using this:

$('#myImage').rotate(30) //for a 30 degree rotation Where #myImage is the id of the element you want rotated.

It is supported by the following browsers:

• Internet Explorer 6.0 >
• Firefox 2.0 >
• Safari 3 >
• Opera 9 >
• Google Chrome

Check it here.