Learn JQuery Rotate,

Also some basic javascript programming, embedding external javascript libraries into your projects, and more!

Here are the basic steps to creating the ‘seesaw – type’ object:

1. Create the object and give it an id name ‘bar’

2. Create two variables ‘sRot’, and ‘eRot’. Give both a value of 0

3. Create two buttons that execute javascript.  (unclick advance project )

Javascript code for right button is:

sRot = eRot;
eRot = eRot + 7;
$(“[id=’barc’]”).rotate({angle:sRot,animateTo:eRot,easing:$.easing.easeInOutExp});

Javascript code for left button is:

sRot = eRot;
eRot = eRot – 7;
$(“[id=’barc’]”).rotate({angle:sRot,animateTo:eRot,easing:$.easing.easeInOutExp});

4. Download jQueryRotate.js at http://jqueryrotate.com

5. Publish your project

6. Paste jQueryRotate.js in ‘assets/js’ folder

7. Edit index.html file (I use Sublime Text Editor)

Change the var lJSFile to include the jQueryRotate.js file

var lJSFiles = [  ‘assets/js/jquery-1.11.3.min.js’,’assets/js/CPM.js’,’assets/playbar/playbarScript.js’,’assets/js/jQueryRotate.js’ ];

8. Save index.html and launch the index.html in your browser.  Enjoy your rotating bar!