A border layout manager for HTML/CSS in JavaScript.

Want layouts for desktop like applications running in your browser? Used to layout managers of standard GUI toolkits, e.g Java AWT, Fox, TK? RUZEE.LayoutManager is the right toy for you. Here’s an example and a screen shot:

Some details

RUZEE.LayoutManager is a JavaScript library that allows you to implement “desktop-style” applications in your web browser. Usually a web page is meant to scroll on the highest level, i.e. the body of an HTML page gets scrolled if it doesn’t fit into the browser window.

When using desktop applications however, a user is used to a different layout. Usually there is some menu on the top, a status on the bottom, different frames that can be scrolled independently from each other, etc.

If you want to have such a layout with HTML, you may use inner frames (IFRAMEs) and percentual widths and heights, but if you ever tried that you know why you never wanna do that again ;-).

And with RUZEE.LayoutManager you won’t have to. It’s as simple as adding some classes to your HTML elements and including a JavaScript file and you’re done. If you are familiar with Java’s BorderLayout you’ll almost feel like home.

Requirements

RUZEE.LayoutManager requires Prototype, one of the coolest JavaScript libs out there.

Another requirement is a specific basic style you need to have in your HTML file. First, you need to put your browser into standards compliant mode by putting the following line as the very first one into your HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Then put the following statements into your stylesheet:

body { overflow:hidden; }
body, html { height:100%; margin:0; padding:0; }

That’s it for the requirements.

How-To

RUZEE.LayoutManager uses CSS classes to figure out how to layout the HTML elements in your source file. You may supply these classes to almost every block element. The classes are:

  • lm_top, lm_bottom: align an element at the top/bottom of the parent element. The height may be supplied via the CSS style. If you don’t provide a height, RUZEE.LayoutManager will calculate it based on the content of the element.
  • lm_left, lm_right: align an element at the left/right of the parent element. You need to provide a width in your CSS stylesheet in order to make it work!
  • lm_center: Will always fill the remaining space of the parent element, i.e. the space that is not take by any top/bottom/left/right element. No width or height has to be provided in your CSS!

top/bottom are stronger than left/right, i.e. they will always occupy the full width of the parent element. If you want left/right to use the full height, simply put top/bottom into the centered child – every depth is possible 😉

Centered and left/right elements may also contain scrollable content. It’s as simple as adding the CSS property “overflow:auto” to the specific element.

By using CSS class properties, the HTML source can be fully W3C compliant.

Example

Here’s some example HTML code (for a more complicated example check out test.html):

<!-- header, js includes, ... (all the required stuff) -->
<body>
  <div class="lm_top">
    Some text at the top (header)
  </div>
  <div class="lm_left" style="width:100px">
    Some text on the left
  </div>
  <div class="lm_center" style="overflow:auto">
    Some text in the center, scrollable
  </div>
  <div class="lm_right" style="width:100px">
    Some text on the right
  </div>
  <div class="lm_bottom">
    Some text at the bottom
  </div>
</body>

That’s it – pretty simple, huh? What about getting it?

Download

Get version 0.1! It’s released under an MIT style license included in the archive.

Caveats

The order of right and bottom aligned elements is logical but not intuitive. RUZEE.LayoutManager always adds elements from the outside to the inside. For right and bottom this means, that the elements appear in the reverse order as defined in your HTML file.

History

  • 0.1: 2006-11-03: Initial version