SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Positioning with IE5 Expressions : IE5 Positioning Behavior

To make our positioning sample really useful we show you how to turn it into a reusable behavior. With the positioning behavior, you can position content anywhere on your screen simply by associating a CSS rule with the behavior and setting a few HTML properties. Below we create a page that fully demonstrates all the features of our behavior: 

<HTML>
<HEAD>
<STYLE>
  P {behavior:url(pos.htc);
     border:1px black solid;
     font:10pt geneva, arial;
     padding:2pt}
</STYLE>
</HEAD>
<BODY>
  <P STYLE="behavior:url(pos.htc)" vpos="top" hpos="left">
    Top-Left</P>
  <P STYLE="behavior:url(pos.htc)" vpos="top" hpos="center">
    Top-Center</P>
  <P STYLE="behavior:url(pos.htc)" vpos="top" hpos="right">
    <NOBR>Top-Right</NOBR></P>
  <P STYLE="behavior:url(pos.htc)" vpos="middle" hpos="left">
    <NOBR>Middle-Left</NOBR></P>
  <P STYLE="behavior:url(pos.htc)" vpos="middle" hpos="center">
    Middle-Center</P>
  <P STYLE="behavior:url(pos.htc)" vpos="middle" hpos="right">
    <NOBR>Middle-Right</NOBR></P>
  <P STYLE="behavior:url(pos.htc)" vpos="bottom" hpos="left">
    <NOBR>Bottom-Left</NOBR></P>
  <P STYLE="behavior:url(pos.htc)" vpos="bottom" hpos="center">
    Bottom-Center</P>
  <P STYLE="behavior:url(pos.htc)" vpos="bottom" hpos="right">
    <NOBR>Bottom-Right</NOBR></P>
</BODY>
See this page in action

All the script for positioning the element is contained within the pos.htc behavior. The complete script for pos.htc is provided below. In this script, we dynamically set the expression for the top and left properties using the setExpression method. This method allows you to dynamically add an expression to any property. 

<PUBLIC:COMPONENT NAME="ID_POSITION">
<PUBLIC:PROPERTY NAME="vpos">
<PUBLIC:PROPERTY NAME="hpos">
<SCRIPT>
// Copyright 1999 InsideDHTML.com, LLC. All rights reserved.
// For more information, see www.insideDHTML.com
// This behavior can be reproduced as long as this copyright
// notice is not removed.

var hExpr = "",vExpr = ""

switch (vpos) {
  case "top":
    vExpr="document.body.scrollTop+offsetHeight-offsetHeight"
    break;
  case "middle":
    vExpr="document.body.scrollTop+((document.body.clientHeight-offsetHeight)/2)"
    break;
  default:
    vExpr="document.body.scrollTop+document.body.clientHeight-offsetHeight"
}

switch (hpos) {
  case "left":
    hExpr="document.body.scrollLeft+offsetLeft-offsetLeft"
    break;
  case "center":
    hExpr="document.body.scrollLeft+((document.body.clientWidth-offsetWidth)/2)"
    break;
  default:
    hExpr="document.body.scrollLeft+document.body.clientWidth-offsetWidth"
}

style.position = "absolute"
style.setExpression("top",vExpr)
style.setExpression("left",hExpr)
</SCRIPT>
</PUBLIC:COMPONENT>
Download pos.htc

If you examine the above code closely you will see an interesting expression, document.body.scrollTop+offsetHeight-offsetHeight. We added and subtracted the offsetHeight intentionally. We discovered that scrolling the page does not cause the scroll* properties to be recalculated. When we added the offset* information to the expression, the browser updated the properties correctly.

In general, we have found that the expression recalculating sometimes does not occur when you would expect it. Therefore, you should always test your scripts. If you discover that your expression is not being recalculated and can't find a way to trick the browser, you can always use the recalc() method on the document. By calling document.recalc(true) you can force all expressions to be recalculated.

In conclusion, IE5 expressions are a powerful way to express properties that can change in response to the environment. You can even create expressions that are based on values of other elements on your page. This allows you to create custom complex layouts without requiring you to understand the entire DHTML event model. By combining expressions with IE5 behaviors you can separate the behavior and definition of your layout into a separate file allowing your authors to focus on writing HTML and to not worry about how to express the underlying layout.

Page 1:Positioning with IE5 Expressions
Page 2:IE5 Positioning Behavior
Page 3:Download pos.htc

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