xhy008 / jqueryrotate Goto Github PK

It would be great if a continuous animation is set, to be able to stop the 
animation (e.g., mouseover an image to start rotation, mouseout to stop the 
rotation).

Any way to preserve the original position.  Seems like the canvas moves the 
whole image down as rotates.  I need it to stay in line with 3 other images.

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.

The example2 does not work, only works three interactive examples. Why?
I'm using: FireFox4/5 , jqueryrotate.2.1.js and jquery-1.6.2.js

Code:
$("#img").rotate({ 
   bind: 
     { 
        mouseover : function() { 
            $(this).rotate({animateTo:180})
        },
        mouseout : function() { 
            $(this).rotate({animateTo:0})
        }
     } 

});

What steps will reproduce the problem?
1. create a rotating image
2. assing a image map to that image

What is the expected output? What do you see instead?
the links wont work in IE or FF. ONLY CHROME.

What version of the product are you using? On what operating system?
// VERSION: 1.4 LAST UPDATE: 23.06.2010
OS: windows xp

Please provide any additional information below.
everything running on oracle apex 3.2

1. See this link:
http://alt-web.com/TEMPLATES/Dark-Grid.shtml

2. Native thumbnails are 0.7 CSS opacity + MS filters=70.  

3. On CSS hover, active, focus, they should shift to 100% opacity.  This works 
in web standards browsers no problem but NOT in pre-IE9.  

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; 
InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; 
AskTB5.6)
Timestamp: Fri, 27 Aug 2010 06:48:45 UTC

Message: Object doesn't support this property or method
Line: 15
Char: 441
Code: 0
URI: http://jqueryrotate.googlecode.com/files/jQueryRotateCompressed.1.6.js

if you visit the url (at bottom of post) in any normal browser (not IE 7 or 8) 
and click the three circles at the bottom right of the page that say design, 
build and promote the circles rotate fine. The rotation will take place 
infinite times without a problem. However in IE7 and 8 the rotation the image 
jumps quite significantly to the right and will not rotate again after that.

http://www.rnmtest.co.uk/rnm/services.html

Hi,

When I am creating any of my own pages, for some reason Firefox and IE simply 
don't work at all. Firebug shows an error saying that .rotate and/or 
.rotateAnimation functions do not exist. Chrome works just fine.

Weird thing is at some point everything worked but then it stopped for some 
reason. What's more weird is that this page ( 
http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html ) does work in 
both Fx and IE just fine!

I tried:
- rebooting PC (no idea why it would help, but I tried anyway)
- running the page remotely (asked another person to try it and it didn't work 
him as well)
- running js scripts locally

I've included a simple file that I am trying to get to work.

I have a feeling that I am doing something wrong, but I just don't see what.

Cheers,

Andy

What steps will reproduce the problem?
1.See page at "http://test.firstpointresources.com/div/information-technology"
2.See script file expand-box.js
3.Professional Staff div box, when highlighted should expand, and "plus" image 
beside "Professional Staff" should rotate 180 deg.
4.If I take out the lines 5 and 17, everything works (except for the image 
rotate of course.  

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.

What steps will reproduce the problem?
1.See page at "http://test.firstpointresources.com/div/information-technology"
2.See script file expand-box.js
3.Professional Staff div box, when highlighted should expand, and "plus" image 
beside "Professional Staff" should rotate 180 deg.
4.If I take out the lines 5 and 17, everything works (except for the image 
rotate of course.  

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.
Refer to issue 42. Was not suggested issue in response. Please review my 
response to 42 and see that I tried suggested resolution, which didn't work. 
Thanks again for your help.

What steps will reproduce the problem?
1. Create a <span>: <p><span class="orange">A</span>lex Designs</p>
2. Rotate code:
      $('.orange').rotate({bind:{
      mouseover: function(){
          $(this).rotate({
            angle: 0, 
            animateTo:360
          })
      }
      }
      });
3. Tried in Google Chrome and IE8, does not work. Works in many versions of 
Firefox and Opera, and in IE9. Have not tried Safari.

What is the expected output? What do you see instead?
I expect that letter to rotate. Instead, nothing happens. It treats it as 
regular text.

What version of the product are you using? On what operating system?
13.0.782.107 m on Windows 7 64-bit.

Please provide any additional information below.
I think that's about it.

Would be cool if I can define a speed of animation

Great plug-in. I'd like to suggested some new features:

(a) Delayed animated rotate (i.e rotate after 15 seconds)
(b) Shadow effect
(c) Animated shadow, giving the illusion that an image is increasing its height 
above the page.
(c) Continuous animated rotate (with an option to specify the speed.
(d) Chain effects. eg. Raise image from page, wait 5 seconds, then rotate.
(e) 3-D rotate (out of the plain of the page), e.g. raise one end of an image 
up by 20-degrees (by simply changing the perspective
(f) Add (rounded) border
(g) Add image caption 

What steps will reproduce the problem?
1. Rotate a picture in Firefox 4

What is the expected output? What do you see instead?
Expected: Use of -moz-transform
Result: Use of Canvas

What version of the product are you using? On what operating system?
MacOS X 10.6.7 Firefox 4

Please provide any additional information below.
I fixed this with the addition of " mozTransform to the "toCheck" String.

What steps will reproduce the problem?
1. Create e.g. an html page with an image tag like "<img id="img1" 
src="./plane-1.jpg" width='100px' />"
2. Rotate the image with e.g. a buttonclick
3. The rotated image is shown correct in all browsers (IE7, IE8, 
Chrome,Safarie) except FireFox.

What is the expected output? 
I would expect that the image is shown in the same way (correct size) as in all 
other browsers.

What do you see instead?
It shows the image in the original size. It didn't use the width that is 
entered in the image tag.


What version of the product are you using? On what operating system?
JQueryRotate VERSION: 1.6 LAST UPDATE: 21.08.2010
Windows XP
FireFox 3.6.8

Please provide any additional information below.

HTML used for testing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript Demos - Rotate Image using Canvas</title> 
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
<script type="text/javascript" src="./jQueryRotate.1.6.js"></script>
</head>
<body>
<script language="javascript">
    function rotate() 
    {
        jQuery(document.getElementById('img1')).rotate(180);
    }
</script>
<input type="button" onclick="rotate();" title="test" />
<img id="img1" src="./plane-1.jpg" width='100px' />
</body>

Buggy annimations in Chrome 5/Safari 5 as part of image stays not cleared from 
canvas.

I'm using jQueryRotate.2.1.js
In my code, I need to re-rotate a previously rotated image.

My javascript is like this:
img=$('#id_of_img_tag');
rotated_img=img.rotate(angle1)[0];
rotated_img.rotate(angle2);


This works fine in Chrome and Firefox, but in IE8 I get the following error:

Message: 'this._container.style' is null or not an object

Hi

I have managed to implement jqueryrotate on a demo site- its fine in IE but in 
firefox it is not using the correct dimensions set for my image. 

As displayed in the attached file, the red square is the hyperlink in IE. In 
firefox the hyperlink is active within the green square which is wrong. It 
needs to be in the red square. It fixes itself when i remove jquery rotate.

Is there a way to fix this issue please?

What steps will reproduce the problem?
1. Setup a constantly rotating image like in the examples
2. Hide that image
3. Watch the DOM via Firebug (or similar) and see the image continues to be 
rotated and the attributes updated.

What is the expected output? What do you see instead?
I'd like to see the animation "pause" when an image is truly hidden from the 
user--which might mean one of it's ancestors is hidden (display:none or 
visibility:hidden).

What version of the product are you using? On what operating system?
Latest code on Firefox 7.0.1 on Mac OS X 10.6.8. Also tested in Chrome 14.

Please provide any additional information below.
There is a hidden attribute on both _img and _rootObj, but they seem to be 
inaccurate as they always seem to report hidden = false.

If I have a image that is too big and I would like to resize it together with 
rotation - the end results is odd for chrome (did not test other browsers).


Partially fix: do not resize using this plugin, resize images first before 
putting on server if possible

What steps will reproduce the problem?
1. Create a simple HTML page with a centered image (i.e. put it in a div with 
"text-align: center"
2. Apply rotation to the image
3. View the page in IE6/7

What is the expected output? What do you see instead?
Expected: The image rotates in-place
Instead: The image jumps to the right

What version of the product are you using? On what operating system?
IE6/7, Windows

Please provide any additional information below.
The following changes to jQueryRotate.2.1 fixed the issue for me:

      this._container.style.position="absolute";
      this._container.style.top = "0px"; // added
      this._container.style.left = "0px"; // added

What steps will reproduce the problem?
go to: http://code.google.com/p/jqueryrotate/wiki/Examples
in any browser

What is the expected output? What do you see instead?
see the examples rotated

What version of the product are you using? On what operating system?
win 7, firefox 4

Not working on IE6 and 8 (I don't know for IE7) if you put the picture in 
position:absolute.

The rotation is still ok, but the position is not good anymore !

What steps will reproduce the problem?
1. Create <img> that points to some image and is wrapped in <a> (<a> has 
position:absolute) + add some button or link that will call some JS later
2. Rotate <img> on page load as usually, i.e. $("img").rotate(10);
3. Then click on button, or whatever, that will call JS which will change "src" 
attribute of <img> to different image path.

What is the expected output? What do you see instead?
The image is expected to be changed to new path, keeping rotation, styling, etc.
Instead, in IE8- you see the same old image. In IE9, FF3+, Chrome you see new 
image.

What version of the product are you using? On what operating system?
Tried 1.8 and 2.1. Windows 7/XP.

Please provide any additional information below.
Imagine it in situation where you have a gallery of thumbnails with one full 
sized rotated image and by clicking a thumbnail it's switching with the full 
sized one :)

What steps will reproduce the problem?
1. Loading my site (only viewable by me at this time) in IE 8

What is the expected output? What do you see instead?
It rotates fine in other browsers, but nothing happens in ie, in fact, it's 
really putting a load on my computer as if it's trying to, but nothing happens, 
and IE says the page is still loading.

What version of the product are you using? On what operating system?
I downloaded 2.21, although the actual file says it's 1.8

Please provide any additional information below.
I've removed all other running scripts to see if there are any interferences, 
with no results.

Even with preservePosition, when using a rotateAnimation with a slight
angle (+/- 5 degrees), canvas size is unnecessarily large, and spaces
images too far apart.

Any way to change this?

Eg.  100x100px image, canvas created for full rotation is 141px.

I cannot chain these commands because the function does not return the original 
jQuery object.

What steps will reproduce the problem?
1. Go to http://small.cfcms.nl/ and move your mouse over the 6 small thumbs 
left below (under the menu and news)
2.
3.

What is the expected output? What do you see instead?
There is a tooltip attached to these thumbs. Only safari and chrome shows them. 
IE and firefox won't show the tooltips

What version of the product are you using? On what operating system?
VERSION: 1.5 LAST UPDATE: 26.07.2010


Please provide any additional information below.
Also I use all jquery files in one lonf file (see source page). If I attache 
the rotate script jquery don't start

Really nice idea :_)

Unbinding events is currently not possible :(

I noticed that in firefox (in which jqueryrotate uses canvas) if the image was 
resized before the rotate, the rotated image didn't preserve the resizing.

When I looked in jqueryrotate.js, I saw a todo to implement scaling.

Anyway, I hacked together something quick to make it work; here ya go:

Just check out the attached file lines 351 through 366. I only added 3 lines of 
code, but if for some reason you need to ask me a question, just e-mail me at 
[email protected]

Thanks for this library, it's really useful!

Hello!

How should one write the code to spin multiple divs on a page?

I tried to simply re-state the same code & change the div name and angle, but 
that made both divs rotate at the same speed, whereas I want them to rotate at 
different speeds...


<script type="text/javascript">
var angle = 0;
setInterval(function(){
      angle+=.10;
     $("#one").rotate(angle);
},50);
</script>

<!--
<script type="text/javascript">
var angle = 0;
setInterval(function(){
      angle+=.30;
     $("#two").rotate(angle);
},75);
</script>
-->



please let me know if it's possible.

Thank you!

I realized that only works on one image, there is the possibility in Funcines 
on all pictures containing the id = "x"?

$(document.body).ready(function(){
$("#x").rotate({ 
bind: 
{ 
mouseover : function() { 
$(this).rotate({animateTo:45})
},
mouseout : function() { 
$(this).rotate({animateTo:0})
}
} 
});
});

Hi,
I'm really new to javascript and not a programmer in general, so I'm not sure 
if this is right. It looks strange to me —

I'm running jquery 1.4.2 to use with an infinite scroll effect. When I call out 
jQueryRotate.2.1.js after jquery, it disables my infinite scroll, but if I 
don't place jQueryRotate after the initial jquery, the rotation doesn't work.

So, I end up having to call jquery twice for both effects to work. 
Like this: (8.js is the infinite scroll script)

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jQueryRotate.2.1.js">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="8.js"></script>

Is this ok to do? 
I've never seen it before...

Thank you!

What steps will reproduce the problem?
1.Transparent gif/png
2.doesn't work with creative or jagged edge images as bg images
3.tried css3 but want to use jquery for browsers

What is the expected output? What do you see instead?
white dots, could be down to photoshop affect

What version of the product are you using? On what operating system?
2.0

Please provide any additional information below.

http://www.getbranded.co/magento/index.php/

Would be nice if a center point of the rotation could be specified rather than 
rotating from the center of the image every time.

What steps will reproduce the problem?
1. Rotate +180deg on mouseover
2. Rotate back to normal position (0deg) on mouseout 
3. Move cursor off picture, image will jump twice and will not be at the 
correct angle

What is the expected output? What do you see instead?
Same as Firefox, Opera, Safari - rotate 180 then back again. In IE image will 
jump twice after mouseout and will not be at the correct angle

What version of the product are you using? On what operating system?
Win XP, IE6/7/8

Please provide any additional information below.
Code used:
jQuery(document).ready(function(${
  $('#logo').rotate({preservePosition:true,bind:[
  {"mouseover":function(){
    $(this).rotateAnimation(180);
  }
  },{"mouseout":function(){
    $(this).rotateAnimation(0);
  }
  }]});
});

There's a flash-image-replacement at http://www.swfir.com/
which cannot animate rotation but additionally allows:

-borders
-rounded corners
-shadows

I'm trying to rotate PNG image of size around 780KB. it works well on all 
browsers excepts IEs. Image disappears when I click on next arrow (which 
actually rotates image 40 degree)and after some time loads then it works well.

can you please look into this issue?

Thanks,
ankIT

What steps will reproduce the problem?
1. <script>$("#div_id").rotate(<?=$angle?>);</script>
2. HTML input box with event onchange='$("#div_id").rotate(this.value)'
3. <input type="text" name="angle" id="angle" 
onchange="$("#div_id").rotate(this.value)" />

What is the expected output? What do you see instead?
I expected to see rotated object. Instead I saw nothing.


What version of the product are you using? On what operating system?
2.0 jqueryRotate. Google Chrome 10.0.648.133. Windows 7.

Please provide any additional information below.
I'm using jQuery Draggable on same div layer.

Also I tried
HTML input box with event onchange='$("#div_id").rotate(25)' <- That WORKS!
I also tried onchange='alert(this.value)' and it shows the correct values.

Using IE7 the image rotated have a left offset.
I use the v2 of jqueryrotate.

To fix this problem i add this lines in _Loader function:
    this._container.style.top = "0px";
    this._container.style.left = "0px";

In this way the position absolute BUG of IE is fixed.

Regards ;)

If you rotate an image in IE7 it seems to be kind of blury for some reason.

I used the IE7 on WinXP with the latest version of your plugin

I tried to use the native filter matrix rotation instead, but it happened that 
IE7 deleted my alpha channel from my png file. I provided you with an image to 
compare results in IE7 and FF3.6

Support css3 where applicable

Please, fix it.

What steps will reproduce the problem?
1. .rotate(angle); on any element.

What is the expected output? What do you see instead?
Expect images to rotate, instead they do nothing.

What version of the product are you using? On what operating system?
2.1 on Windows XP with Firefox 3.

Please provide any additional information below.
Works as expected in all versions of updated browsers, IE, Firefox, Chrome and 
Safari on Windows 7 Enterprise (64-bit).

What steps will reproduce the problem?
1.  Create an Image Map (.png)
2.  Rotate it with the plugin
3.  Try to click the hotspots

What is the expected output? What do you see instead?

Internet Explorer Only:
Expect to be able to click the hotspts.  We are unable to 
click them after rotation.

What version of the product are you using? On what operating system?

I've tried all versions.  V2 makes the image look best
V3 seems to distort after rotation in MSIE ... although the 
image mapping seems to work.

Please provide any additional information below.

We have an application that rotates an image map.

Trouble is, in Explorer 7 and 8 we have multiple failures.

    1. The image doesn't rotate on center, but rather it seems on a point of the container?

    2. Once rotated, it forgets that it's an imagemap and all of the hotspots are rendered uncilckable.

I've tried with all versions of your plugin (and many others) to get this to 
work.   Seems like with
version3, on IE7, it'll stay an image map, but the image itself gets very 
distorted.   In IE8, it never
works.

Any ideas or code modifications that you can provide ASAP would be a huge help. 
 We have a 
one day deadline on this.

Sample URL:  http://sidecountryski.com.dev.thevfiles.com/ski/japan/

You should view that in Chrome or Firefox, then IE.  You'll see instantly how 
that Dial at the bottom left
should work ... and then what it does in IE.

Thanks for your speedy response!

What steps will reproduce the problem?
1.create two elements: button and image (button is for rotate the image, )
2.use this code to bind the event to the button:
    function rotate(v){
        $('#imageFax').rotate(180*v);
        $('#btnRotate').unbind();
        $('#btnRotate').click(function(){
            rotate(v+1);
        });         
    };

    $(document).ready(function(){
        $('#btnRotate').click(function(){rotate(1);});
    });

What is the expected output? What do you see instead?
On ie/safari/chrome, clicking the button rotate the image 180 degree.
On ff, the button no more clickable after the first press

What version of the product are you using? On what operating system?
Jquery 1.4.2, latest jqueryrotate, IIS6, all ie/safari/chrome/ff(3.6.6) are 
latest.

Please provide any additional information below.
And also if I limit the image width, the image will back to normal size after 
the first rotate and displayed on top of the button. But no problem on 
ie/safari/chrome

What steps will reproduce the problem?
1. Rotate a image in IE9

When rotation takes place it's beeing made with canvas. It seems like IE9 is 
using canvas in some other manner than FF and others.

The image being rotated is being hidden and an empty canvas area is generated.

I'm using version 1.7 of the plugin, as well as 1.4.4 of jQuery.


I saw this example, which solves it fine for IE9: 
http://raphaeljs.com/image-rotation.html

Though that script is to heavvy...

The compressed version of this library is actually larger than the regular 
version. I believe this is because the compressed one contains a lot of 
unnecessary spaces.

Perhaps after gzip the compressed one does end up being smaller, but this still 
seems pretty unusual.

What steps will reproduce the problem?
1. It doesn't work in IE9.

IE9 up till the Beta version provided only a way to make it work using the 
CANVAS method. 

IE9 Preview 6, now includes -ms-transform , so making it work for IE9 is now  
simple, one just needs to change the following line:

toCheck = "transformProperty WebkitTransform OTransform".split(" ");

into 
toCheck = "transformProperty WebkitTransform OTransform msTransform".split(" ");

(adding msTransform).
It works great.


In addition this line:
<!--[if IE]>
Can be updated to: 
<!--[if lt IE 9]>