SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid 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

  2. #2
    SitePoint Wizard davidjmedlock's Avatar
    Join Date
    Dec 2002
    Location
    Nashville, TN USA
    Posts
    1,688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Love the smilies in the [CODE], really brightens it up.

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    SitePoint Wizard davidjmedlock's Avatar
    Join Date
    Dec 2002
    Location
    Nashville, TN USA
    Posts
    1,688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. )

  5. #5
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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)
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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".

    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •