Inside Technique : Positioning with IE5 Expressions
By Scott Isaacs

Internet Explorer 5.0 adds support for expressions on any HTML attribute or CSS property value. This feature allows you to enhance your page without requiring indepth knowledge of DHTML or the event model.

For example, a very popular question with DHTML is how do I position an element that stays on the screen? Prior to Internet Explorer 5, this involves adding an absolutely positioned element, giving the element an ID, and adding script that moves the element relative to the screen every time the window resizes or is scrolled.

With Internet Explorer 5.0, you can eliminate all the script and define the entire action with just CSS and expressions. To show you how easy this is let's start with the psuedo-code expression required to position an element in the lower right hand corner. This expression normally would be called when the page loads, after the user scrolls the page, and after the user resizes the window.

top  = position of the vertical scrollbar + 
       height of the client area - 
       height of the contents
left = position of the horizontal scrollbar + 
       width of the client area - 
       width of the contents 

Now you need to translate the above description to an expression using DHTML properties. As we convert the statement, we will add a little extra syntax. As an expression the values are automatically recalculated. No longer do you have to track any events.

top: expression(document.body.scrollTop + 
               document.body.clientHeight - 
               offsetHeight);
left:expression(document.body.scrollLeft + 
                document.body.clientWidth - 
                offsetWidth)

Top and Left are CSS properties. As such, the CSS property values are specified after the ":". IE5 adds a special property value, expression() that takes a script expression. These expressions are evaluated and reassigned to the property every time they change.

Below we create a working sample to position a go home link in the lower right corner:

<STYLE>
  .logo {text-align: right; font:8pt verdana,geneva,arial;
     top:expression(document.body.scrollTop + 
                    document.body.clientHeight - 
                    offsetHeight);
     left:expression(document.body.scrollLeft +  
                     document.body.clientWidth - 
                     offsetWidth);
     position: absolute;
  }
</STYLE>
<P class=logo>
  <NOBR><A HREF="/home.asp">
    Go Home
  </A></NOBR>
</P>

We created a class logo. Any element with this class is displayed in the lower right of the screen even if the page scrolls. In our logo sample, we surrounded the content with a NOBR element. This is to ensure that the browser does not break any content into multiple lines. Internet Explorer 5 users should see a Go Home link in the lower-right corner of this window. All other browser users will find this link at the end of the page.

This provides you with some basics for positioning elements. By modifying the formula you can force an element to appear at any location in your page. Next we enhance our positioning example by separating it into an Internet Explorer 5.0 behavor. Our behavior has the capabilities to position an element in 9 locations (from the upper-left through the lower-right) all by setting a few attributes.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.