Rotating image on mouse down

Question

I'm trying the code from Rotating an element based on cursor position in a separate element and http://jsfiddle.net/JqBZb/

I rewrite it in a full code at link below, but in won't work..

https://www.dropbox.com/s/z1tqv56vjzsq0f0/rotateonmousedown.html.txt

is there any idea??

jquery code

var img = $('.image');
if(img.length > 0){
    var offset = img.offset();
    function mouse(evt){
        var center_x = (offset.left) + (img.width()/2);
        var center_y = (offset.top) + (img.height()/2);
        var mouse_x = evt.pageX; var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90; 
        img.css('-moz-transform', 'rotate('+degree+'deg)');
        img.css('-webkit-transform', 'rotate('+degree+'deg)');
        img.css('-o-transform', 'rotate('+degree+'deg)');
        img.css('-ms-transform', 'rotate('+degree+'deg)');
    }
    $(document).mousedown(mouse);
}

just use the `.mousedown` event – Pedro Estrada May 20 '13 at 18:10 — Pedro Estrada, May 20 '13 at 18:10

score 2 · Answer 1 · answered May 20 '13 at 18:09

You need to write js code like this:

Please note: when setting src attribute of script tag, all embeded js code will be stripped out by engine, use other script tag

<script src="jquery-1.7.2.js"></script>
<script>
$(function(){
var img = $('.image');
if(img.length > 0){
    var offset = img.offset();
    function mouse(evt){
        var center_x = (offset.left) + (img.width()/2);
        var center_y = (offset.top) + (img.height()/2);
        var mouse_x = evt.pageX; var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90; 
        img.css('-moz-transform', 'rotate('+degree+'deg)');
        img.css('-webkit-transform', 'rotate('+degree+'deg)');
        img.css('-o-transform', 'rotate('+degree+'deg)');
        img.css('-ms-transform', 'rotate('+degree+'deg)');
    }
    $(document).mousedown(mouse);
}
});
</script>

Clear your cache and see if still not working. If you have errors log in console, feel free to share it... — A. Wolff, May 20 '13 at 18:18

khattam · Accepted Answer · 2013-05-20T18:42:32.680

1

You're doing a couple of things wrong. Check this out:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<style type="text/css">

#apDiv1 {

    position:absolute;

    width:400px;

    height:327px;

    z-index:1;

    left: 105px;

    top: 98px;

}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var img = $('.image');

    if(img.length > 0){

        var offset = img.offset();

        function mouse(evt){

            var center_x = (offset.left) + (img.width()/2);

            var center_y = (offset.top) + (img.height()/2);

            var mouse_x = evt.pageX; var mouse_y = evt.pageY;

            var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);

            var degree = (radians * (180 / Math.PI) * -1) + 90; 

            img.css('-moz-transform', 'rotate('+degree+'deg)');

            img.css('-webkit-transform', 'rotate('+degree+'deg)');

            img.css('-o-transform', 'rotate('+degree+'deg)');

            img.css('-ms-transform', 'rotate('+degree+'deg)');

        }

        $(document).mousedown(mouse);

    }
});
</script>

</head>



<body>

<div id="apDiv1"><img src="http://img402.imageshack.us/img402/2017/bighand.png" class="image"/> <br>

    (Not actual picture I'm trying to rotate, but it'll do for now)

</div>

</body>

</html>

As others have pointed out, you must have dedicated script tag for external js. Also, you should include your jQuery code in $(document).ready(your_function_here);

EDIT: included code in the answer.

edited May 20 '13 at 18:42

answered May 20 '13 at 18:16

khattam

1,164
1
8
14

@khattam. this work..thanks. but, when I rename "rotateimage.html" to "rotateonmousedown.html" it won't work.. it weird.. – Luthfan Pramono May 20 '13 at 18:31
It could be a cache issue. Hold Shift and click on refresh button to reload and check again. – khattam May 20 '13 at 18:37
@C.Hazelton I already copypasted the code from khattam to "rotateonmousedown.html" but it won't work.. its weird – Luthfan Pramono May 20 '13 at 18:38
@LuthfanPramono did you look at the live page I provided for you? it is working. again it is here => http://www.origin1.com/rotate.html. right click and select "view source" can copy the whole page if you have to. not much more we can do sorry. – origin1tech May 20 '13 at 18:41
@khattam and when I use offline jquery-1.7.2.js on your code, it won't work also.. maybe there's a problem with my offline jquery lib – Luthfan Pramono May 20 '13 at 18:42
@C.Hazelton all the result is the code from you and khattam is work actually.. but when I modified my code look like both of you.. it doesn't work in rotateonmousedown.html even I have clear the cache.. it's weird isn't it.. – Luthfan Pramono May 20 '13 at 18:46
I'm sure @khattam will agree with me it is working either of our versions. He's provided full source I have you a live page, my apologies but there's not anything more I can do. best of luck. – origin1tech May 20 '13 at 18:49
@C.Hazelton thank you very much for your help and suggestion.. and also khattam and roasted.. I'm very appreciate for all the response.. – Luthfan Pramono May 20 '13 at 18:53
**one more thing, be compared to an clock, if it points to a number it will display the value in the page (like a label).. how to achieve such case.. is there anyone can give me an axample.. it would very greatfully thanks** @roasted – Luthfan Pramono May 20 '13 at 19:04

score 0 · Answer 3 · answered May 20 '13 at 18:10

Should be something like the following:

You also have bad script references. Use the CDN provide here below or you download it locally. Unless you have a specific requirement you were using and older version of jQuery.

Lastly instead of calling img.css(key,val) for each browser type and you're right you need to account for that pass it as an object instead. img.css({ key:val, key:val }) and so on.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    var img = $('.image');
    var offset = img.offset();
    $(document).mousedown(function (e) {
        var center_x = (offset.left) + (img.width() / 2);
        var center_y = (offset.top) + (img.height() / 2);
        var mouse_x = e.pageX;
        var mouse_y = e.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
        img.css('-moz-transform', 'rotate(' + degree + 'deg)');
        img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
        img.css('-o-transform', 'rotate(' + degree + 'deg)');
        img.css('-ms-transform', 'rotate(' + degree + 'deg)');
    });
});


</script>

I actually put it in a page and also checked @roasted they both work. Maybe you should explain more or maybe it isn't as you expected but it does follow the x/y of the mouse. — origin1tech, May 20 '13 at 18:22
@LuthfanPramono copy and past exactly what I have there including the $(document).ready(function () { }); you were missing that also. — origin1tech, May 20 '13 at 18:23
@LuthfanPramono I put up a working page for you here => http://www.origin1.com/rotate.html it will only be there for today. — origin1tech, May 20 '13 at 18:27

score 0 · Answer 4 · answered Feb 28 '19 at 22:22

function mmove (e) {
        e.preventDefault();
        var element = ell[0];
        var ofs = ell.offset();
        ofs.left += ell.height()/2;
        ofs.top += ell.width()/2;
        var mouseX = e.pageX;
        var mouseY = e.pageY;
        var x = mouseX - ofs.left;
        var y = mouseY - ofs.top;
        var angle = Math.atan2(x, y);
            angle =  (angle * (180 / Math.PI) *-1) + 225;
            angle = ((angle + 360) | 0) % 360;
        var degree = angle;
        element.style.transform = 'rotate('+degree+'deg)';
        element.style.webkitTransform = 'rotate('+degree+'deg)';
        element.style.MozTransform = 'rotate('+degree+'deg)';
        element.style.msTransform = 'rotate('+degree+'deg)';
        scope.collection[scope.index].transform = 'rotate('+degree+'deg)';
        //console.log(mouseX, mouseY, centerX, centerY, radians, degree);
      }

https://next.plnkr.co/plunk/VeYtZ4

Rotating image on mouse down

4 Answers4