Problem: For my company, FrogQuest, users send images of photo “quests” that they’ve completed as part of the photo scavenger hunt which I review and validate. Oftentimes, these images are sideways or upside down. Part of the admin form is an <input type=”number”> box which takes values incremented by 90 degrees. When I submit the form, I use ColdFusion’s ImageRotate() method to reorient the image, but the problem is I never actually get to see the image oriented correctly until after I’ve submitted it. Sometimes, the solution is so obvious that you don’t ever consider it, which was my problem this time. I was so focused on trying to figure out how to use ImageRotate() to dynamically rotate the image then send it back to the browser in real time that I never even considered a CSS solution. But yesterday, I had an ah-ha moment, then today I worked through the solution but it wasn’t as straight forward as I thought it would be.
Failed Attempts: I began by trying and failing with various tactics…
$(“#degrees”).change(function(){
var element$ = $(“#photo-submission”),
deg$ = $(this).val();
// examples below plug in here
});
I tried and FAILED using animate()
element$.animate({
//FAIL: transform: rotate(180)
//FAIL: -webkit-transform:rotate(180deg); // Uncaught SyntaxError: Unexpected token –
});
I tried and FAILED using css()
element$.css(
//FAIL: “-webkit-transform”, “rotate(180)”
//FAIL: “-webkit-transform”, “rotate(180deg)”
//FAIL: { -webkit-transform:rotate(180deg) } // Uncaught SyntaxError: Unexpected token –
//FAIL: { webkit-transform:rotate(180deg) } // Uncaught SyntaxError: Unexpected identifier
);
The Solution:
Finally, I stumbled upon a SUCCESSFUL solution using attr()…
element$.attr(
“style”, “-webkit-transform:rotate(“+ deg$ +”deg);”
);
This code adds a “style” element to the img tag with a rotation value equal to the form’s value. Though the image rotates as expected, I still have some work to do because the image doesn’t resize to fill it’s container. But for now, it’s functional and the initial problem is solved. Now to ponder the next issue for a while.