[vox-tech] webpage element positioning via coordinates

[Ken Bloom]

On Tue, Aug 01, 2006 at 09:31:10PM -0700, Rod Roark wrote:
> On Tuesday 01 August 2006 21:00, Peter Jay Salzman wrote:
> ...
> > Is it possible to position things via coordinates like this on a web page?
> 
> Yes.  It's called absolute positioning.  You'll need to read up on
> the DOM and CSS, and also JavaScript if you want to position elements
> dynamically.
> 
> Just to get you started, this will define an image positioned 100
> pixels from the left and 50 pixels from the top edge of a page:
> 
>   <img src='...' id='myimage' style='position:absolute;left:100px;top:50px;' />
> 
> You can reposition it with JavaScript like this:
> 
>   var myimage = document.getElementById('myimage');
>   myimage.style.left = 110;
>   myimage.style.top = 60;
> 
> BTW if you like backgammon and want to see a cool application of this
> stuff, check out www.parlorplay.com.

<style>
#round {position:absolute;left:0px;top:0px;width:200px;height:200px;
   list-style-type:none}
#round li {position:absolute}
</style>
<ul id="round">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>
<script>
var linker=document.getElementById("round");
var children=linker.getElementsByTagName("li");
var l=children.length;
for (var i=0;i<children.length;i++){
   children[i].style.left=100+100*Math.sin(i *2*Math.PI/l);
   children[i].style.top=100-100*Math.cos(i *2*Math.PI/l);
}
</script>

I was having trouble getting more of this off into a self-contained
function, however.

--Ken

-- 
Ken Bloom. PhD candidate. Linguistic Cognition Laboratory.
Department of Computer Science. Illinois Institute of Technology.
http://www.iit.edu/~kbloom1/
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: application/pgp-signature
Size: 189 bytes
Desc: Digital signature
Url : http://localhost.localdomain/pipermail/vox-tech/attachments/20060802/d5a27657/attachment.pgp