Inside Technique : Circular Layout Manager
By Scott Isaacs

Demonstrates how to separate the presentation and layout from the contents of your document. This page uses simple algorithm to define a custom layout for standard HTML.

This demonstration requires Internet Explorer 4.0. With Internet Explorer 4.0, anchors would automatically layout into a circle.

Description

This example demonstrates how you can separate custom layout behavior from the content. In this example, all the contents are defined within DIV elements. These DIV elements by themselves render as standard HTML. Once the page is loaded, a function is called that takes the elements and moves them into their appropriate place on the screen. In this example, the contents are layed out in a circle or an ellipse depending upon the specified dimensions.

To use this function, the first step is to include a style sheet on the page. The stylesheet defines a fixed size for the element with the ID of circle. Within this element all the contained DIV's will be layed out. The style sheet is defined as follows:

  #circle {position: relative; width: 300; height: 250; visibility: hidden}
  #circle DIV {position: absolute; }
  #circle DIV A {text-decoration: none; font: arial; color: navy}
  #circle DIV A:hover {color: red}

The stylesheet also defines that each DIV within the CIRCLE element is defined with absolute positioning. This allows the function to later move the element to its correct location. Below is the HTML containing the content to layout:

  <DIV id=circle>
    <DIV><A HREF="/dhtml/insideDHTML.htm">Book Info</A></DIV>
    <DIV><A HREF="/tips/tip.htm">Inside Techniques</A></DIV>
    <DIV><A HREF="/scriptlets/home.htm">Inside Scriptlets</A></DIV>
    <DIV><A HREF="/links/links.htm">Resources</A></DIV>
    <DIV><A HREF="/css/tutor.htm">CSS Online</A></DIV>
    <DIV><A HREF="/xml/xml.htm">XML Online</A></DIV>
    <DIV><A HREF="/demo/10kdemo.htm">The 10K Demo</A></DIV>
    <DIV><A HREF="/home.htm">Home Page</A></DIV>  
  </DIV;>

Once the page is finished loading, a function is called that repositions the elements into a circle or an ellipse. The function, layoutCircle, is called and takes 3 arguments, the width and height of the circle, and an array of elements that need to be positioned. The function is called for this page as follows:

  function layout() {
    // Get all the DIV elements contained within the element with ID of circle.
    var circleList = document.all.circle.children.tags("DIV")
    layoutCircle(400,250,circleList)
  }

Code

  function layoutCircle(w, h, circleList) {
    var xradius = w/2
    var yradius = h/2
    for (var i = 0; i 
Discuss and Rate this Article
© 1997-2000 InsideDHTML.com, LLC. All rights reserved.