balachandertgm / jquery-rotate Goto Github PK

What steps will reproduce the problem?
1. Init object: <script>$("#obj").rotate(25);</script>
2. Make HTML with input box and onchange event = 
$("#np_drag").rotate(this.value); - WON'T WORK
3. Input box with onchange = $("#np_drag").rotate(25); - WILL WORK

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

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

Please provide any additional information below.
I'm using jquery draggable on same object with containment. It's div layer. You 
can see it at http://npsig.sok4e.eu/settings/signature (need registration)

This plugin will not work on IE10 since the Matrix filter seems to be 
abandoned. If you're on IE10, you can test the filter on the official demo page 
from MSDN, it doesn't work anymore - 
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/filters/matrix.h
tm

To solve the problem, add the following code

// for IE 10, use CSS3 rotate
if(navigator.userAgent.indexOf('MSIE 10') !== -1) {
    p.style.transform = 'rotate('+p.angle+'deg)';
    var a = Math.PI * p.angle / 180;
    p.setAttribute('data-canvas-width', Math.round(p.width * Math.cos(a) + p.height * Math.sin(a)));
    p.setAttribute('data-canvas-height', Math.round(p.height * Math.cos(a) + p.width * Math.sin(a)));
    return false;
}

after the first if-else block

if (!whence) {
    p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
    p.angle = angle;
}

----------------

Note: You need to set the second parameter *whence* to *true*.

The code above will rotate the image using CSS3 rotate filter.

Since rotating with CSS3 will not change the element dimension (always same 
number with $('#img').width()) which is unlike creating a canvas. So the code 
also adds 2 attributes (data-canvas-width and data-canvas-height), which are 
the actual canvas width and height to the element.

Hope this helps.

What steps will reproduce the problem?
1. Create document with one image and JavaScript link to rotate it 90 degrees
2. Click the JavaScript link

What is the expected output? 
The image is rotated over 90 degrees

What do you see instead?
The canvas is rotated, but no image is shown inside.

What version of the product are you using? On what operating system?
Latest version of Safari on Mac OS X 10

Please provide any additional information below.
No JavaScript errors are thrown.

What steps will reproduce the problem?
1. Include an image with width/height attributes
2. Attempt to rotate it

What is the expected output? What do you see instead?
Expected the image to be properly rotated, instead the image is 
stretched/skewed.


Please provide any additional information below.
A quick fix is to set the oImage width/height attributes when it is 
created. Add
            canvas.oImage.width = p.width;
            canvas.oImage.height = p.height;
after line 31. Some work could be done to check if the width/height is set 
via the style attribute as well. 

What steps will reproduce the problem?
1. rotate several images next to each other
2. use negative margin to overlap them

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

I'm expecting them to overlap each other slightly, as they do in Firefox or IE 
9. Instead the images just sit next to each other.


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

Windows 7, using version 2.2 of rotate code. This only occurs in IE 8 or older.


Please provide any additional information below.

You can see this happening here: 
http://www.netrixcreative.com/clients/mamas/become-a-donor/

Hi, 
sorry for my english...

What steps will reproduce the problem?
I load many image with tag <img> each included in <div>. When i rotate
<img> firefox return this exception (after first image loaded): 

[Exception... "Component returned failure code: 0x80040111
(NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]"
nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame ::
/jquery/jquery.rotate.1-1.js :: anonymous :: line 51" data: no]
[Break on this error] 

LINE 51:
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width,
canvas.oImage.height);

When i reload the page 3 image are show, the next reload 5 image, the next
reload 8 image, ... and finaly all image are show.

What version of the product are you using? On what operating system?
I have this problem with firefox (2.0.0.13 and 3.0b5), no with IE. 

Please provide any additional information below.

It appears that there has been no release of the project since May 2007,
and all the project issues remain open. It therefore looks like the project
is no longer being actively maintained. It would be great if the maintainer
could post to say if this is the case or not.

If this is indeed the case, I would propose that someone interested takes
over maintaining the project, and that the project is hosted on jquery.com,
which now has the infrastructure for hosting plugins.

What steps will reproduce the problem?
1. Select multiple elements with the $ selector (for instance, $(".myclass")



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

Since the rotate function only operates on the first element returned, not
all elements in the selected group would rotate.

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

1.1, Windows XP, Firefox 3

Please provide any additional information below.

I've attached a revised version of the 1.1 script that iterates through
each item in the collection and performs a rotation on each of them.  Feel
free to incorporate this code into the next version.

HI All. I am using the below code to rotate the drag/dropped image.The rotation 
is working fine,but when i start rotating ,the image moves outside the "div" 
container .Anything i am missing.

//Moving outside the container for first time.After dragging inside the 
div,then rotates inside the div 
  var test = 5; 
  var mouseDown = false; 
  $(function() { 
      $('.frame').mousedown(function(e) { mouseDown = true; }); 
      $('.frame').mouseup(function(e) { mouseDown = false; }); 
      $('.frame .rotatable').live('mousemove', function(e) { 
          if ((mouseDown) && (e.ctrlKey)) { 

              test = test + 10; 
              var currentId; 
              document.getElementById('angle').value = test; 
              $(this).rotate({ angle: test }); 
              var currentId = $(this).attr('id'); 
              var id = currentId.substring(8);                   
              var deleteimage = 0; 
              var angle = test; 
              saveCoords(e.clientX, e.clientY, angle, id, document.getElementById("<%=trafficID.ClientID%>").value, deleteimage); 
          } 
          $('#frame .rotatable').draggable({ containment: 'parent' }); //throwing out of the div
 //instead if i use resizable,the position is maintained but the corners are cropped.
// $('#frame .rotatable').resizable({ autoHide: true }).parent().draggable({ 
containment: 'parent' });

      }); 
  }); 
<div id="frame" class="frame" runat="server"  style="width:550px; 
height:400px;background-position:bottom; border:1px solid #000;"></div>



What is the expected output? What do you see instead?
The image is thrown out of the div "frame" during first time rotation .Then i 
am dragging it to the div and following rotation works perfectly .

What version of the product are you using? On what operating system?
I am using windows XP, IE7 , 
http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html,Jquery.1.4.js

What steps will reproduce the problem?
1. Call rotate on an image
2. Call it again later to do another animated rotate

What is the expected output? What do you see instead?
Image is expected to rotate twice, this happens only once.

What version of the product are you using? On what operating system?
IE8, latest source.

What steps will reproduce the problem?
1. Try rotating animated gif
2.
3.

What is the expected output? What do you see instead?
After rotation i cant see the image blinking..Once i rotate i should see
image blinking at an certain angle

What version of the product are you using? On what operating system?
Os is unix machine

Please provide any additional information below.
Check out the rotation with image attached

What steps will reproduce the problem?
1. when image is in base64 mode through invalid pointer exception at
jquery.rotate

var p = this.get(0);
p.src not work in internet explore however it is supported by Mozilla and 
chrome.

can anyone suggest how to get solve.  

 <img id="pic" name="pic" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAIoAQAAA

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.

I have patched the code that I believe fully resolves issue 3 in this list,
and may address others.  Please see attached.

What steps will reproduce the problem?
1. call the rotate function for more than one image (ex:$('img').rotateLeft
(10);)
2.
3.

What is the expected output? What do you see instead?
All the images in the page should be rotated, but the result is that it 
rotates only the first image

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


Please provide any additional information below.

What steps will reproduce the problem?
1. By changing value of an angle other than mulitple of 90,it is rotating 
entire image element.
2. Try this by changing angle at line 60,64 in the source.


What is the expected output? What do you see instead?
Expected output is only image with in the image space should rotate. Here 
rotation takes place along with image space.
What version of the product are you using? On what operating system?
Product : jquery.rotate.1-1.js
Operating system : Windows XP
Browser : InternetExplores


Please provide any additional information below.

why not woking in chrome

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

I got this error when using with images served dynamically by google app
engine (both in sdk or in production): 
Erreur : uncaught exception: [Exception... "Component returned failure
code: 0x80040111 (NS_ERROR_NOT_AVAILABLE)
[nsIDOMCanvasRenderingContext2D.drawImage]"  nsresult: "0x80040111
(NS_ERROR_NOT_AVAILABLE)"  location: "JS frame ::
http://localhost:8000/media/js/jquery/jquery.rotate.js :: anonymous :: line
51"  data: no]

see attached. The first is ok in IE6, IE7 and FF, and the second is not ok 
in IE8