1

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

Improve this question

1 Answer 1

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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 .
@Felix Did you also Implement the unbind of the mousemove event? Like this it only rotates when de mouse button is pushed down.
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.
i added extra button for rotation . Still the same problem .
@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)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.