Web Analytics Made Easy - StatCounter Spinning Iframes...possible? - CodingForum

Announcement

Collapse
No announcement yet.

Spinning Iframes...possible?

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Spinning Iframes...possible?

    Okay, here is some code Vladdy wrote to demonstrate arc movement, and then I bastardized it for my own evil purposes.

    PHP Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <    head>
    <    title>Spinne the Iframe</title>
    <    style>
    body
          { font-family: Arial,sans-serif;
        
      }

    iframe
          { height: 130px;
            width: 192px;
      }

    #target1
          { position: absolute;
            background-color: transparent;
      }

    #target2
          { position: absolute;
            background-color: transparent;
      }

    #target3
          { position: absolute;
            background-color: transparent;
      }

    #target4
          { position: absolute;
            background-color: transparent;
      } 

    </    style>
    <    script>
    var     angle = 0;
    var     angleStep = 1;
    var     longR = 200;
    var     shortR = 150;
    var     Xo = 250;
    var     Yo = 150;
    var     objects=new Array({id:'target1',delay:0},{id:'target2',delay:1.0},{id:'target3',delay:2.0},{id:'target4',delay:3.0});

    function     advanceTarget()
      {     a = angle*Math.PI/180;
        for(var     i=0; i<objects.length; i++)
          {     X = Math.floor(longR*Math.cos(a - objects[i].delay));
                Y = Math.floor(shortR*Math.sin(a - objects[i].delay));
                with(document.getElementById(objects[i].id).style)
             {     top = (Yo + Y) + 'px';
                   left = (Xo + X) + 'px';
             }
          }
            angle+=angleStep;
            angle = angle>359? angle-360:angle;
        return;
      }
    function     regressTarget()
      {     a = angle*Math.PI/180;
        for(var     i=0; i<objects.length; i++)
          {     X = Math.floor(longR*Math.cos(a - objects[i].delay));
                Y = Math.floor(shortR*Math.sin(a - objects[i].delay));
                with(document.getElementById(objects[i].id).style)
             {     top = (Yo + Y) + 'px';
                   left = (Xo + X) + 'px';
             }
          }
            angle-=angleStep;
            angle = angle>359? angle-360:angle;
        return;
      }

    </    script>
    </    head>
    <    body onload="setInterval('advanceTarget()',0)">
    <    div id="target1"><iframe frameborder=0 src="C:\Documents and Settings\jcapra\Desktop\CDCI Web\smallgreen.htm" scrolling="no" allowTransparency="true"></iframe></div>
    <    div id="target2"><iframe frameborder=0 src="C:\Documents and Settings\jcapra\Desktop\CDCI Web\smallorange.htm" scrolling="no" allowTransparency="true"></iframe></div>
    <    div id="target3"><iframe frameborder=0 src="C:\Documents and Settings\jcapra\Desktop\CDCI Web\smallpurple.htm" scrolling="no" allowTransparency="true"></iframe></div>
    <    div id="target4"><iframe frameborder=0 src="C:\Documents and Settings\jcapra\Desktop\CDCI Web\smallyarl.htm" scrolling="no" allowTransparency="true"></iframe></div>
    <    input type="button" onmousedown="return advanceTarget()">
    <    input type="button" onmousedown="return regressTarget()">
    </    body>
    </    html> 
    First, I'm sure I don't need that whole regressTarget() function to make the iframes spin in the opposite direction, but I don't know where else to change it.

    Second, the angleStep increment is set to 1 for maximum fluidity of motion, but you'd have to click a button many many times this way to produce just a little bit of movement. Is there a way to make one click of the button call a function many times instead? I can't seem to find the words to produce a satisfactory search in Google.

    Thanks for your help, whoever you may be.

    Assenheimer
    Hey, look at my signature. It's how I'd like to be remembered if I die, and those odds are good.
    Tags: None
  • #2
    something like this.


    function advanceTargetFloat(aI,aEnd)
    {
    advanceTarget();
    aI+=1;
    if(aI<aEnd)
    {
    setTimeout('advanceTarget('+aI+','+aEnd+')',150);
    }
    }


    On 2nd note in your regress
    angle = angle>359? angle-360:angle;
    that line will always assingn angle to angle.
    I think this is the line your searching for.
    angle = angle<0? angle+360:angle;

    on 3rd note: you shouldn't have to check on the angle seing as cos and sin to angles above or below the max angles automaticly translates to an angle equivalent in the allowed range, but I assume vladdy made it for a purposs beyond me

    Comment

    • #3
      Thanks for taking this on

      Garadon,

      I'm about to splice your bits of code together with the bigger mess I've created.

      But, if you have time, could you be so kind as to explain play-by-play what function targetFloat is doing?

      Next, am I keeping the regressTarget function and changing
      [angle = angle>359? angle-360:angle;]
      to [angle = angle<0? angle+360:angle;]?
      Hey, look at my signature. It's how I'd like to be remembered if I die, and those odds are good.

      Comment

      • #4
        More Thanks

        Garadon,

        The general behavior I seek is this. Each link calls up a different webpage with an Iframe spinner on it, and each page is going to have a different number of frames depending on how much information it needs to display.

        For example, the entire "About Us" section will fit in 3 Iframes, so about.htm would be 3 Iframes that travel 360 degrees in 3 clicks...

        ...whereas the "Pictures From Recent Trips" may have 30 frames, and now it takes 30 clicks to make one complete rotation.


        Again, if you have time, could you also explain what you mean when you say that checking for angles is unnecessary after a certain rotation point?

        Thanks
        Hey, look at my signature. It's how I'd like to be remembered if I die, and those odds are good.

        Comment

        • #5
          Code:
           
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Spinne the Iframe</title>
<style>
body
  { font-family: Arial,sans-serif;
    
  }

iframe
  { height: 130px;
    width: 192px;
  }

#target1
  { position: absolute;
    background-color: transparent;
  }

#target2
  { position: absolute;
    background-color: transparent;
  }

#target3
  { position: absolute;
    background-color: transparent;
  }

#target4
  { position: absolute;
    background-color: transparent;
  } 

</style>
<script>
var angle = 0;
var angleStep = 1;
var longR = 200;
var shortR = 150;
var Xo = 250;
var Yo = 150;
var objects=new  Array({id:'target1',delay:0},{id:'target2',delay:1.0},{id:'target3',delay:2.0},{id:'target4',delay:3.0});
var End=Math.floor(360/objects.length);
var speed=150;
var rotation=null;
function advanceTargetFloat(aI,aWay)
{
  if(rotation!=null)
  {
    clearTimeout(rotation);
  }	
advanceTarget(aI,aWay);


}

function advanceTarget(aI,aWay)
{ 
  a = angle*Math.PI/180;
  for(var i=0; i<objects.length; i++)
  { 
	  X = Math.floor(longR*Math.cos(a - objects[i].delay));
    Y = Math.floor(shortR*Math.sin(a - objects[i].delay));
    with(document.getElementById(objects[i].id).style)
    { 
			top = (Yo + Y) + 'px';
      left = (Xo + X) + 'px';
    }
  }
  angle+=aWay*angleStep;
	aI+=1;
  if(aI<End)
  {
    rotation=setTimeout('advanceTarget('+aI+','+aWay+')',speed);
  } 
}
	


</script>
</head>
<body onload="setInterval('advanceTarget(End,1)',0)">
<div id="target1"><iframe frameborder=0 src="C:Documents and SettingsjcapraDesktopCDCI Websmallgreen.htm" scrolling="no" allowTransparency="true"></iframe></div>
<div id="target2"><iframe frameborder=0 src="C:Documents and SettingsjcapraDesktopCDCI Websmallorange.htm" scrolling="no" allowTransparency="true"></iframe></div>
<div id="target3"><iframe frameborder=0 src="C:Documents and SettingsjcapraDesktopCDCI Websmallpurple.htm" scrolling="no" allowTransparency="true"></iframe></div>
<div id="target4"><iframe frameborder=0 src="C:Documents and SettingsjcapraDesktopCDCI Websmallyarl.htm" scrolling="no" allowTransparency="true"></iframe></div>
<input type="button" onmousedown="advanceTargetFloat(0,1)">
<input type="button" onmousedown="advanceTargetFloat(0,-1)">
</body>
</html>
          Last edited by Garadon; Feb 23, 2004, 04:08 PM.

          Comment

          • #6
            Garadon, thanks.

            This looks awesome. You've done nearly the whole thing for me, although I'm guessing it didn't take you too long.

            Thanks again.
            Hey, look at my signature. It's how I'd like to be remembered if I die, and those odds are good.

            Comment

            Previous template Next
            Working...
            X