Rotating objects in IE

**Markdidj** · Jul 30, 2003 10:41

here's a script that will rotate any object from the object's center

Code:

<html>
<div id="spin2" style="position:absolute;top:100px; left:20px; width:55px;height:350px; border:2px outset black; font-size:20px; 
background:red;filter[img]images/smilies/tongue.gif[/img]rogid[img]images/smilies/biggrin.gif[/img]XImageTransform.Microsoft.Matrix(sizingMethod='auto expand')" 
onmouseover="setSpin('spin2',2)"><div style="position:absolute;top:0px; left:2px; 
width:5px;height:35px;background:blue"></div></div>
</html>
<script>
//written by Mark Didj
var Deg2Rad = Math.PI / 180;
var Omega = Deg2Rad;
first=true;Rotation=0;
function setSpin(obj,dir) {
oDir=dir
oObj=obj;
obj=document.getElementById(obj);
if(first==true){
Height = parseInt(obj.style.height);
Width = parseInt(obj.style.width);
Top = obj.style.pixelTop+(Height/2)
Left = obj.style.pixelLeft+(Width/2)
Hypotenuse = (Math.sqrt((Height*Height)+(Width*Width)));
first=false}
Rotation +=(Omega*dir);
sinRotation = Math.sin(Rotation);
cosRotation = Math.cos(Rotation);
dTop = (Math.abs( Width*sinRotation ) + Math.abs( Height * cosRotation )) /2;
dLeft = (Math.abs( Width*cosRotation ) + Math.abs( Height * sinRotation )) /2;
obj.filters.item(0).M11 = cosRotation;
obj.filters.item(0).M12 = -sinRotation;
obj.filters.item(0).M22 = cosRotation;
obj.filters.item(0).M21 = sinRotation;
obj.style.top=Top-dTop;
obj.style.left=Left-dLeft;
setTimeout("setSpin(oObj,oDir)",100)}
</script>

which will turn any single object; but I wanted it to work with an unlimited number of objects so I created this

Code:

<html>
<div id="spin2" style="position:absolute;top:100px; left:120px; width:55px;height:35px; border:2px outset black; font-size:20px; 
background:red;filter[img]images/smilies/tongue.gif[/img]rogid[img]images/smilies/biggrin.gif[/img]XImageTransform.Microsoft.Matrix(sizingMethod='auto expand')" 
onmouseover="setSpin('spin2,4','spin3,-8','spin1,2')"></div>
<div id="spin1" style="position:absolute;top:200px; left:220px; width:155px;height:20px; border:4px outset black; font-size:20px; 
background:green;filter[img]images/smilies/tongue.gif[/img]rogid[img]images/smilies/biggrin.gif[/img]XImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"></div>
<div id="spin3" style="position:absolute;top:100px; left:200px; 
width:5px;height:35px;background:blue;filter[img]images/smilies/tongue.gif[/img]rogid[img]images/smilies/biggrin.gif[/img]XImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"></div>
</html>
<script>
obj=new Array;
oDir=new Array;
oObj=new Array;
Height=new Array;
Width=new Array;
Top=new Array;
Left=new Array;
Hypotenuse=new Array;
Rotation=new Array(0,0,0,0,0,0,0);
Top=new Array;
dTop=new Array;
Left=new Array;
dLeft=new Array;
sinRotation=new Array; cosRotation=new Array;
var Deg2Rad = Math.PI / 180;
var Omega = Deg2Rad;
first=true;
function setSpin() {
arg=arguments;
for(n=0;n<arg.length;n++) {
oDir[n]=arg[n].split(',')[1];
oObj[n]=arg[n].split(',')[0];
obj[n]=document.getElementById(oObj[n]);
if(first==true){
Height[n] = obj[n].style.height.split("px" )[0];
Width[n] = obj[n].style.width.split("px" )[0];
Top[n] = obj[n].style.pixelTop+(Height[n]/2);
Left[n] = obj[n].style.pixelLeft+(Width[n]/2)
if(n==arg.length-1) first=false}
Rotation[n] +=(Omega*oDir[n]);
sinRotation[n] = Math.sin(Rotation[n]);
cosRotation[n] = Math.cos(Rotation[n]);
dTop[n] = (Math.abs( Width[n]*sinRotation[n] ) + Math.abs( Height[n] * cosRotation[n] )) /2;
dLeft[n] = (Math.abs( Width[n]*cosRotation[n] ) + Math.abs( Height[n] * sinRotation[n] )) /2;
obj[n].filters.item(0).M11 = cosRotation[n];
obj[n].filters.item(0).M12 = -sinRotation[n];
obj[n].filters.item(0).M22 = cosRotation[n];
obj[n].filters.item(0).M21 = sinRotation[n];
obj[n].style.pixelTop=Top[n]-dTop[n];
obj[n].style.pixelLeft=Left[n]-dLeft[n];}

setTimeout("setSpin('spin2,4','spin3,-8','spin1,2')",100)}
</script>

which turns all objects in the function.......
setSpin('1stObject,amount','2ndObject,amount') which can contain unlimited objects.
the problem I am getting is in the setTimeout part at the end of the script; setTimeout("setSpin('spin2,4','spin3,-8','spin1,2')",100)
How can I add the initial arguments to this setTimeout?
I've tried setTimeout("setSpin(arguments)",100) and setTimeout("setSpin(arg)",100) but neither work. any suggestions?

I've put a demo at www.unitingrhythms.co.uk/rotateAll.html, just rollover the red box

**davidjmedlock** · Jul 30, 2003 12:58

Love the smilies in the [CODE], really brightens it up.

**Markdidj** · Jul 30, 2003 13:16

Lol, that's what happens when you try to place code here. Tried to split it up but copy and pasting doesn't work, put the link there to help. correct code at link with no external js, so it can be copied and pasted from there. Change the size of the divs or put one inside the other, works quite well.
Any ideas on repeating the function with the same arguments? Or do you think I would be better using 2 functions, one to set the variables and a seperate to rotate?

**davidjmedlock** · Jul 30, 2003 13:24

i think it's better off having the two functions that set the variables and rotate individually. it should make it more flexible that way. pretty cool script, though. (doesn't work in opera, but is cool in IE.

)

**Markdidj** · Jul 30, 2003 13:35

cheers for that.
I was just thinking of adding another variable.
In the lines

Code:

obj[n].filters.item(0).M11 = cosRotation[n];

by changing the '-' values to positive, you can also mirror the contents of the div, so I could use 1 picture, say of a spiral, and then mirror it instead of using another pic.
I use it at my site at www.unitingrhythms.co.uk/extras/grafix4.html (ie only again, still waiting for the others)

**beetle** · Jul 30, 2003 15:31

There are already filters for horizontal and vertical flipping. Both have been encompassed into and replaced by BasicImage in IE 5.5+.

About the smilies - next time you post, just disable them. Directly beneath the editor is three checkboxes, the 2nd one being "Disable Smilies in This Post".

**Markdidj** · Jul 30, 2003 17:03

Thanks Beetle :)

Any idea on passing arguments back through a function with a setTimeout?

function doAll() {.......
setTimeout("doAll(arguments)",100)}

doesn't seem to work

**beetle** · Jul 30, 2003 17:10

Ya - you lose variable-scope that way.

The 1st argument for setTimeout doesnt have to be a string. A function-pointer is valid as well (this, unfortunately, is NOT well-known). So, we can use an anonymous function to achieve what you're after.

setTimeout( function() { doaAll( arg1, arg2 ) }, 100 );

Since the anon function introduces it's own scope, a scope chain now exists that can go back and find the arguments, regardless of what scope they reside in.

User Tag List

Thread: Rotating objects in IE

Thread Tools

Display

Rotating objects in IE

Bookmarks

Bookmarks

Posting Permissions