SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Threaded View

  1. #1
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Rotating objects in IE

    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
    Last edited by Markdidj; Jul 30, 2003 at 12:01.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •