Text rotation using jquery

Question

Hi currently i write code to text rotate using jquery ,

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};

$('.resizeButton').click(function() {
    rotation += 5;
    $('.new-div').rotate(rotation);
});

Please see this . https://jsfiddle.net/felixtm/2mpjkxad/3/

But here text rotation happening on mouse click to that resize button . Instead of that mouse click user able to rotate the text as usual rotation event. ie. use click the button rotate it as he wish . Here he need to click it many times for one major rotation . How it can be done ?

UPDATE : I see this question that is exactly what i wanted .But i don't know how to implement it . jQuery: Detecting pressed mouse button during mousemove event

Aytee · Accepted Answer · 2016-10-25T12:00:10.360

1

Try something like this:

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};

$('.resizeButton').on("mousedown", function(e) {
    var startX = e.pageX;
    $(document).mousemove(function(e){
        rotation = startX - e.pageX;
        $('.new-div').rotate(rotation);
    });  
});
$('.resizeButton').on("mouseup", function(){
    $(document).unbind( "mousemove" );
});

https://jsfiddle.net/p9wtmfhp/

edited Oct 25 '16 at 12:00

answered Oct 25 '16 at 11:50

Aytee

567
1
4
20

Yes .This code is working . But here i cannot control the rotation . It is not controllable . Becuse when ever the mouse move it will also rotate . – Oct 25 '16 at 12:08
@Felix Did you also Implement the unbind of the mousemove event? Like this it only rotates when de mouse button is pushed down. – Aytee Oct 25 '16 at 12:10
The problem is that you have the resize and the rotation on the same button. I would suggest to add a new button jsut for rotation. – Aytee Oct 25 '16 at 12:14
i added extra button for rotation . Still the same problem . – Oct 25 '16 at 12:19
1

@Felix you should mark this answer as the solution, it answered exactly what the question had asked. Improvments can be made to the rotation button for sure, but the key functions are now available. (For further assistance you should open a new question) – G43beli Oct 25 '16 at 12:35
@aytee77 but could you please make rotation more better . Thank you friend – Oct 25 '16 at 12:51
actually i want like this http://jsfiddle.net/G5Xr2/ . pressed and move. But i can't find how to implement it . – Oct 25 '16 at 13:46

Text rotation using jquery

1 Answers1