Using javascript to edit image transform style on consecutive button clicks

Question

I have been searching for hours to no avail in order to find out how to get this functionality out of my javascript/css/html code.

I have an image that I would like to rotate 90 degrees every time a button I created to rotate it is clicked.

for example:

click 1: 90 degree rotation

click 2: 180 degree rotation (in implementation I would assume 90 + 90)

and so on.

However, when I code it the way that I could assume would create this functionality it doesn't work. I can get the image to rotate once...then no more after the fact.

Here is the code I am working with.

The button:

<button id = "rotationRight" data-dojo-type="dijit.form.Button" 
    onclick = "rotateRight(90);" ></button>

Then here are some few different javascript functions I have tried to get this to work:

1

function rotateRight(deg){
    var total_rot;
    total_rot += deg;
    deg = total_rot;        
    document.getElementById("drag").style.transform = "rotate("+ deg +"deg)"
    if(total_rot == 360){
        total_rot = 0;
    }
}

2

function rotateRight(deg){
    var x += deg ;  
    document.getElementById("drag").style.transform = "rotate("+ x +"deg)"
}

3

(currently the only one that does anything at all, but only rotates 90 once even on consecutive button clicks)

function rotateRight(deg){      
    document.getElementById("drag").style.transform = "rotate("+ deg +"deg)"
}

I am trying to achieve this functionality without Jquery. I am currently restricted to DOJO, javascript, CSS3 and HTML5. I feel like I am close, but I am not an experienced javascript developer and I am running out of ideas to try.

In both 1 and 2, you never initialize the variable. So total_rot and x are undefined each time. — Matt R, May 21 '14 at 20:00
I added an initialization for both cases but it is still broken. — Ricky, May 21 '14 at 20:03

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

A. Make sure your initial variable (using your first example) "var total_rot" is outside the scope of the function you are calling. So

var total_rot = 0;
function rotateRight(ele,deg){
    total_rot += deg;
    deg = total_rot % 360;        
    ele.style.transform = "rotate("+ deg +"deg)";
}

B. Make sure you are adding the correct browser prefix i.e. "ele.style.webkitTransform" or you can write a function (@see Detect css transitions using javascript (and without modernizr)?)

Also, rotating a square empty div by 90%.... what's that called in math... symmetry

edited May 23 '17 at 11:57

Community

1
1

answered May 21 '14 at 20:32

apolwla

36
1
3

Oh ya, the modulo trick is pretty fun "deg = total_rot % 360" – apolwla May 21 '14 at 20:33
The problem with using a global variable is that you cannot independently rotate more than one element. If you had 2 buttons, one with rotateRight(ele1, 90) and the other with rotateRight(ele2, 45) as their onClick handlers, you wouldn't get the expected results. – Barbara Laird May 21 '14 at 20:53

score 0 · Answer 2 · answered May 21 '14 at 20:30

You need to know the current rotation each time you click the button. I chose to add it as a data- attribute, because I didn't want to parse the transform string. But, you could go that route also.

HTML

<img id="rotate" src="http://www.placekitten.com/100/100" data-rotation='0' />
<button id="rotationRight" data-dojo-type="dijit.form.Button" onclick="rotateRight(90,'rotate');">Rotate Div</button>

Javascript

function getsupportedprop(proparray) {
    var root = document.documentElement //reference root element of document
    for (var i = 0; i < proparray.length; i++) { //loop through possible properties
        if (proparray[i] in root.style) { //if property exists on element (value will be string, empty string if not set)
            return proparray[i] //return that string
        }
    }
}

function rotateRight(deg, rotate) {
    var csstransform = getsupportedprop(['transform', 'MozTransform', 'WebkitTransform', 'msTransform', 'OTransform']);
    var el = document.getElementById(rotate);
    var rotation = parseInt(el.getAttribute("data-rotation")) + deg;
    if (rotation >= 360) rotation -= 360;
    el.style[csstransform] = 'rotate(' + rotation + 'deg)';
    el.setAttribute("data-rotation", rotation);
}

fiddle: http://jsfiddle.net/ZYGn5/2/

Using javascript to edit image transform style on consecutive button clicks

1

2

3

2 Answers2