Applying 2d Transitions with jQuery (w/o addClass)

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…

var element$ = $(“#photo-submission”),
deg$ = $(this).val();
// examples below plug in here

I tried and FAILED using animate()

//FAIL: transform: rotate(180)
//FAIL: -webkit-transform:rotate(180deg); // Uncaught SyntaxError: Unexpected token –

I tried and FAILED using 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()…

“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.

JavaScript: My Personal Journey Rewriting a Factor’s Game

Back in September 2000, I went to a parent teacher conference and clearly remember the teacher describing a math game she was playing with the children called “The Factors Game”. This game was a two player, paper based game where one player would choose a number, receiving those points but giving away all the factors of that number. Such a simple concept, and it got me thinking, “I can do that in JavaScript!” So, that night, I stayed up till 4am writing version 1.0 and was VERY proud to show off the result.

Fast forward 13 years. I hadn’t written much JavaScript in the mean time since I’d worked mostly as a manager of web development and mobile UX teams, but began dusting off my skills by necessity because I was starting my own business which required I develop once again. I’m extremely impressed with the jQuery framework, so in Feb 2013 as a learning aid I thought I’d rewrite the factors game again using jQuery, version 2.0. This time, I felt I was a lot smarter. In version 1.0, I didn’t write an algorithm to calculate whether x was a factor of y, but instead kept track via numerous arrays (Yuck!). And writing DHTML was quite involved and prone to cross-browser issues back in 2000, so I didn’t even bother (and probably didn’t even know how at the time).

Now, it’s Sept 2013. I’m preparing to write a cross-platform mobile app for FrogQuest using the Titanium framework. This framework exposes a JavaScript API then builds native Android and iOS apps from a common codebase. In reading up on how to go about this, they encouraged such best practices as not polluting the global namespace, which is not a best practice I employed in version 2.0. I didn’t know any better. I thought I was being pretty smart by using separate functions. I figured I had better study up, so I began working through John Resig’s book titled “Secrets of the JavaScript Ninja”. This book is amazing! It takes an intermediate JavaScript programmer and exposes him/her to advanced techniques, stepping through them systematically one-by-one starting with the function. This was just what I needed, and I was awestruck!

Finally, just 7 months after having rewritten version 2.0 of the Factors Game, I set about rewriting it yet again. Tonight, version 3.0 is complete (at least to the extent I feel is beneficial)

Factors Game 1.0

  1. Board is a single size (30)
  2. Pollutes the global namespace
  3. Does no math, using various explicitly defined arrays to keep track of which factors have been played, what the factors are of each number, and of image states.
  4. Graphical interface is in a table-based layout, with lots of bevels (it looks ugly now, but was consistent with design trends of the day! Seriously! Completely falls apart in today’s browsers)

Factors Game 2.0

  1. Board size is variable
  2. Pollutes the global namespace
  3. Factors are calculated by an algorithm
  4. Table based design
  5. Animations help to indicate which user’s turn it is
  6. Written in jQuery

Factors Game 3.0 

  1. Board size is variable
  2. Does NOT pollute the global namespace
  3. Improved animations communicate which numbers were given away
  4. Log file describes the actions of each turn
  5. Mixture of JavaScript and jQuery used
  6. Advanced techniques used

There’s clearly still improvements that can be made, but I’m happy with my progress. It’s been a great exercise to rewrite the same application, adding features as your skills improve. Let me know what you think!


Back to top