2

I was hoping someone could shed light on IE 6 > image rotation code. I have tried using (http://code.google.com/p/jquery-rotate/) with no success. I'm able to rotate the image based on this post (Stackoverflow post) for FF, Chrome and Safari.

Any help or direction to rotate an image at 45deg angle would be appreciated. Thanks.

Example: My test for rotation

Community
  • 1
  • 1
cosmoonot
  • 2,161
  • 3
  • 32
  • 38

4 Answers4

12

Use the excellent jQuery Rotate plugin. http://code.google.com/p/jqueryrotate/. It is supported by all major browsers

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

To rotate an image, All you need to do is $('#myImage').rotate(30) //for a 30 degree rotation Where #myImage is the id of the element you want rotated.

Hussein
  • 42,480
  • 25
  • 113
  • 143
  • Thanks. I'm going to try that now. – cosmoonot Mar 19 '11 at 23:13
  • @Hussein Can you check my code? Does seem to be working on my end. [link](http://thesupercow.com/clients/test/wheels5.html) – cosmoonot Mar 19 '11 at 23:28
  • @cosmoo The plugin is working properly. If you do `$('#wheel').rotate(45)` it rotates the wheel by 45 degrees in all browsers. You need to ask another question relating seltimeout and the error your getting. This should answer you question about rotation with cross broweser supoprt. – Hussein Mar 19 '11 at 23:58
  • I see rotate is working. I'm going to work on the settimeout. Might get stuck, will leave a response here in a few minutes. – cosmoonot Mar 20 '11 at 00:05
  • @Hussein k, settimeout issue has been resolved. Still no go though, getting another error. `rotateWheel(0); function rotateWheel(degree) { $('#wheel').rotate(degree); timer = setTimeout(function() { rotateWheel(++degree); },5); }` – cosmoonot Mar 20 '11 at 00:10
  • @Hussein aahh...apologize. I want the wheel to rotate clockwise/anti-clockwise continuously, until I stop it. You can view this page [link](http://thesupercow.com/clients/test/wheels.html) on FF/Chromse/Safari, I would like that animation. – cosmoonot Mar 20 '11 at 00:21
  • @Hussein FIXED THE ISSUE! Thanks man. Please verify [link](http://thesupercow.com/clients/test/wheels5.html) if this works on IE for you. – cosmoonot Mar 20 '11 at 00:29
  • Hey you got it. Tested in IE6. Working perfectly. – Hussein Mar 20 '11 at 00:38
0

This is an old question, but things have moved on since it was asked so in case people are still reading this, I'll chip in with an alternative solution that works well:

For all browsers in current use except IE8 and earlier, the simplest solution for rotating an element is the standard CSS syntax transform:rotate(45deg).

For IE6/7/8, the best option is the CSS Sandpaper javascript library.

CSS Sandpaper implements standard the CSS rotation syntax, along with several other CSS features. This means you can use standard CSS syntax in all browsers.

The good thing about this is that it means that although you're using javascript for IE, you don't need to involve any JS code for other browsers, which should be good for performance. It's also good to be using the web standards on browsers that support them.

Spudley
  • 166,037
  • 39
  • 233
  • 307
0

Did you read... http://developercity.blogspot.com/2010/09/rotate-div-or-image-using-jquery-ie-and.html

EDIT: Try this: http://pastebin.com/gB4iATpm

mattsven
  • 22,305
  • 11
  • 68
  • 104
  • Thanks for the link. I just tried it out, got an error though. Link can be viewed here [link](http://thesupercow.com/clients/test/wheels2.html) – cosmoonot Mar 19 '11 at 23:05
  • Copy/pasted your code [link](http://thesupercow.com/clients/test/wheels2.html). I found a solution thouhg, you can view it here [link](http://thesupercow.com/clients/test/wheels5.html) – cosmoonot Mar 20 '11 at 00:35
0

In my opinion, CSS3 is the way to go, because (in this scenario), you can just do transform: rotate(xxdeg);. There are methods for ensuring backwards compatibility, such as this: http://fetchak.com/ie-css3/
Hope it helps!

terrygarcia
  • 477
  • 5
  • 22