Is it possible to rotate a Div in cyclic rotation using javascript. I have four DIVs in an HTML page. I need to rotate those DIVs in a cyclic rotation.
If it's possible tell me now. It is urgent.
Thanks & Regards
Ravi Kumar
A:
this could possibly be done... but not easily, and you wouldn't be able to maintain the original feeling of the content inside of the div.
unless i misunderstood your question, if your just talking about cycling through 4 divs... this is defiantly possible and very easy. But if your asking if you can rotate the actual div...
Chad Scira
2009-05-09 05:57:35
yes.cycling the div. if u have send that code plz
kumar
2009-05-09 06:28:30
Ravi, please take a minute to write your question more clearly and with more detail. Your comment here doesn't really answer Chad's question. Do you want to display each of the four DIVs in turn, or do you want to rotate the content of one DIV, or something else?
Paul
2009-05-09 07:51:41
Hi Paul, Here is the link http://www.avineon.com/ .open this link see on the top. four images are rotating same manner i need using javascript.
kumar
2009-05-11 05:05:40
+1
A:
You may be able to use the Raphaël JavaScript library to accomplish something like this.
Steve
Steve Harrison
2009-05-09 05:59:01
that's an awesome library, only downside is that its not cross browser because most browsers held off on the implementation of SVG. All major current browser releases support SVG though.
Chad Scira
2009-05-09 06:02:15
You can probably test for SVG support in IE and show them where they need to download the adobe plugin that makes your site work.
apphacker
2009-05-09 08:00:25
A:
Not sure I understand the question, but take a look at the 'Cycle' jQuery plugin: http://www.malsup.com/jquery/cycle/
Andy Ford
2009-05-10 03:13:46
+1
A:
It's actually not hard:
function moveDiv(t,mdiv) {
t = t + 0.05; // "time"
var r = 10, //radius of circle
xcenter = 400, //x location of circles centre on screen
ycenter = 400, //y location of circles centre on screen
x = Math.floor(xcenter + (r * Math.cos(t))), //circles parametric function
y = Math.floor(ycenter + (r * Math.sin(t))); //circles parametric function
mDiv.style.top = x + "px"; //set divs new coordinates
mDiv.style.left = y + "px"; //set divs new coordinates
setTimeout(function() { //make sure the animation keeps going
moveDiv(t,mdiv);
}, 100);
}
myDiv = //get div element
moveDiv(1,myDiv); //start the animation
Haven't tested, but that's about how it should work. Make sure you set css "position" property of those divs to absolute or fixed. Also take a look at parametric equation for circle.
Maiku Mori
2009-05-10 04:06:01