Notification
Newbie
18 posts
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!
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!
You must be logged in to post a comment.
- Most Recent
- Most Relevant
Great post! Thank you.
One thing here. I thought you just write $(“#name”) in jQuery.
You used this: $(“[id=’barc’]”). Is it about Captivat API or something else?
I can answer my onw question. I tested it and this shorter jquery notation works. So you can shorten the code a bit by using this syntax: $(“# yourId”). Of course, instead of “yourId” you insert your id’s name . Just a remark.
…
This is great !…
But I’m still trying to find a solution for dragging AND rotating the same object !
I try many times to drag an object using javascript (and not the Cpt widget) without any success so far…
Maybe you could help ?
Thx in advance !
…
Great blog. Thank you.
