CODEWITHSUNDEEP
jqueryjquery-uirotationtransform
JayDJohno
JayDJohno

Reputation: 99

Rotate Left and Right Not Working as Expected

I have a div which I have added two spans and a button, these spans are to rotate the div left and rotate it right. The right span is called rotate right and the left span is called rotate left, these are children of a parent div called table.

<div id="table1" class="table square4 ui-draggable ui-draggable-handle" +="" style="inset:69px auto auto 445px;">
    <div class="removet"></div>
    <span class="fa fa-edit editdiv"></span>
    <span class="fa fa-rotate-left rotateleft"></span>
    <span class="fa fa-rotate-right rotateright"></span>
</div>

This results in the following div.

enter image description here

Here is the CSS for the table as well, just incase the css for the Table is clashing with my Transform statement.

.square4 {
  cursor: move;
  width: 133px;
  height: 133px;
  position: absolute !important;
  background-image: url(parts/table4.png);
  background-repeat: no-repeat;
  background-position: center center;
  font-size: 17px;
  font-weight: bold;
  color: #00f;
  border: 1px solid #ccc;
  border-radius: 6%;
  -moz-border-radius: 6%;
  -webkit-border-radius: 6%;
  left: 741px;
  top: -141px;
}

When the user clicks left or right the parent div should get rotate by 15 degrees, however when i click rotate right nothing happens, and when i click rotate left it sets the degrees to rotate 0, which is the first vlaue and not the value that I need. I have my values set into an Array from 0 to 360 degrees, they go up by 15 degrees each time rotate right is clicked or go back 15 degrees if the rotate left is clicked.

The div's are appended to a droppable element called mainarea, using JQuery UI, which is why i am using a .on click. The click is detected, its just the transform I am having the issue with.

I have checked the Array and the button clicks to make sure they are working, I have used console.log to check angle[current] and the correct values are returned, I believe it has something to do with my transform statement and how i am setting it, i have tried different ways and had no luck.

I am using Elementor so my document.ready is a bit different than the usual way, but this is beacuse of the way Elementor works, if you wish to test it you can just change this to a document ready statement instead, but I wanted to show my exact code.

document.addEventListener("DOMContentLoaded", function(event) 
{
    var angle = [0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 195, 210, 225, 240, 255, 270, 285, 300, 315 , 330, 345, 360];
    var current = 0;

   jQuery(document).on('click','.table > .rotateright',function(event)
    {
       current++;

        if(current == 25)
        {
            current = 0;
        }

       var r = jQuery(this).parents('.table').attr('id');

       var rotating = '#'.concat(r);

       console.log(angle[current]);

       jQuery(rotating).css({
          '-webkit-transform' : 'rotate(' + angle[current] + ')',
          '-moz-transform'    : 'rotate(' + angle[current] + ')',
          '-ms-transform'     : 'rotate(' + angle[current] + ')',
          '-o-transform'      : 'rotate(' + angle[current] + ')',
          'transform'         : 'rotate(' + angle[current] + ')'
        });
   });

    jQuery(document).on('click','.table > .rotateleft',function(event)
    {
        current--;

        if(current == -1)
        {
            current = 24;
        }

       var r = jQuery(this).parents('.table').attr('id');

       var rotating = '#'.concat(r);

        console.log(angle[current]);

       jQuery(rotating).css({
          '-webkit-transform' : 'rotate(' + angle[current] + ')',
          '-moz-transform'    : 'rotate(' + angle[current] + ')',
          '-ms-transform'     : 'rotate(' + angle[current] + ')',
          '-o-transform'      : 'rotate(' + angle[current] + ')',
          'transform'         : 'rotate(' + angle[current] + ')'
        });
    });
});

Upvotes: 0

Views: 345

Answers (1)

Satish Patil
Satish Patil

Reputation: 458

You are missing the 'deg' ('+ angle[current]+' deg) in the CSS while assigning the new rotating CSS

I have modified the code for right rotate only (I didnt changed code for left, can change like right), here see jsfiddle

Small snipet is as below 

 $('#table1').css({
               ' -webkit-transform': 'rotate('+ angle[current]+' deg)',
                '-moz-transform': 'rotate('+ angle[current]+' deg)',
                '-o-transform': 'rotate('+ angle[current]+'deg)',
                 '-ms-transform': 'rotate('+ angle[current]+'deg)',
                  'transform': 'rotate('+ angle[current]+'deg)'}
    );

and the right span keep it outside the target div as it will rotate as the main div rotate

Upvotes: 1

Related Questions