Any element predefined with absolute or relative positioning can be dynamically moved and resized through scripting. This technique allows positioned elements to be animated by repositioning, resizing, and dynamically changing the clipping region of the element. Manipulating an element's position and clipping region is done through the style sheet object models.
The CSS position property in Internet Explorer 4.0 is read-only. For a script to move an element, the element must be defined to have relative or absolute positioning when it is created, whether it is created from the source code or inserted using dynamic contents, the topic of Chapter 13, "Dynamic Contents." This rule holds true even if the style sheet is modified through the CSS object model after the element is rendered.
Each CSS size or position property is exposed through a set of properties that make it more convenient and simpler to access and manipulate the element's size and location. Like the other CSS properties, top, left, width, and height are exposed through the style property on the element. These properties are strings and return the values and the specified units—for example, an element with a top value of 20 points returns 20pt.
Manipulating this string can be fairly difficult, especially when your code is trying to reposition an element on the screen. Therefore, in addition to the string-value properties, four properties that represent just the specified value are exposed: posTop, posLeft, posWidth, and posHeight. If the top value is the string 20pt, the posTop value is the number 20; as a number, it can be manipulated more directly.
Because many measurements in the Dynamic HTML object model use pixels, four additional properties are exposed that return the size and position values converted to pixels: pixelTop, pixelLeft, pixelWidth, and pixelHeight. Assigning a value to one of these properties causes the value to be converted back to the originally specified units when it is exposed through the pos* and string-value properties.
These twelve style sheet properties are determined when a document is parsed. In the section "The Rendering Context" later in this chapter, properties for accessing the rendered size and position of the element are explained. Together, these properties let you create completely custom layouts in which the script controls the entire rendering of the document.
The following examples demonstrate how to manipulate absolutely positioned elements. Absolutely positioned elements are used to enable drag-and-drop operations and to position elements at fixed locations on the screen.
Static Logo
Using the CSS background property, you can fix the position of the background image to create a static logo that won't scroll with the window. For example, this code fixes an image in the lower right corner of the client window:
BODY {background:URL(logo.gif) fixed bottom right no-repeat}
Using CSS alone, you cannot fix elements other than background images so that they won't scroll with the window. However, using absolute positioning and a simple script you can add this behavior. This example creates static text that always sits in a fixed position relative to the upper left corner of the current window. The code for positioning the text tracks the onscroll events in order to move the element when the document is scrolled.
This example text logo is similar to the television logos that appear randomly throughout the broadcast of a show. Although this example displays the logo constantly, it can easily be revised to cause the logo to disappear and reappear after a scheduled amount of time by simply swapping the display property between none and block using a timer. (If an element's display property is set to none by a global style sheet, a script cannot change its value to an empty string to display the element. Instead, the script must explicitly set the display property to block or inline, as appropriate for the element.)
The following code is the simplest implementation of a text logo. It places the logo in the upper left corner of the screen, which requires only tracking the scroll event and does not require any calculations to determine the logo's position. To display the logo in any of the other corners, you must also track the onresize event. When the user resizes the page, the logo's position must be recalculated based on the new window size, and the width or height of the element itself must be taken into consideration.
<HTML>
<HEAD>
<TITLE>Static Logo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function resetLogo() {
document.all.Logo.style.posTop = document.body.scrollTop;
document.all.Logo.style.posLeft =
document.body.scrollLeft;
}
</SCRIPT>
</HEAD>
<BODY ONSCROLL="resetLogo()">
<DIV ID="Logo" SRC="logo.gif"
STYLE="position:absolute; z-index:-1; top:0px; left:0px;
color:gray">
Inside DHTML
</DIV>
<P>Add HTML document here.</P>
</BODY>
</HTML>
The logo works best with light-colored text; otherwise, it may obscure relevant contents on the page. The logo can be positioned either behind or on top of the contents by setting the z-index property: a -1 value positions the logo behind the contents; 1 (the default) positions the logo on top of the contents. The logo can fall either behind or on top of other elements depending on the other elements' z-index values.
Bouncing Ball
This example illustrates the relationship between the position properties and the size of the window. The following code is an extension of the static logo example—here an image moves around on the screen and bounces off the edges of the window:
<HTML>
<HEAD>
<TITLE>Bouncing Ball</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var x = 0;
var y = 0;
var offsetx = 4;
var offsety = 4;
function bounceIt() {
var el = document.all.bounce;
x += offsetx;
y += offsety;
if ((x + el.offsetWidth >= document.body.clientWidth +
document.body.scrollLeft) ||
(x <= document.body.scrollLeft)) {
offsetx = -offsetx;
if (x <= document.body.scrollLeft)
x = document.body.scrollLeft;
else
x = document.body.clientWidth - el.offsetWidth +
document.body.scrollLeft;
}
if ((y + el.offsetWidth >= document.body.clientHeight +
document.body.scrollTop) ||
(y <= document.body.scrollTop)) {
offsety = -offsety;
if (y <= document.body.scrollTop)
y = document.body.scrollTop;
else
y = document.body.clientHeight - el.offsetHeight +
document.body.scrollTop;
}
el.style.posLeft = x;
el.style.posTop = y;
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="window.tm = setInterval('bounceIt()', 10);"
ONUNLOAD="clearInterval(window.tm);">
<IMG SRC="ball.gif" ID="bounce"
STYLE="position:absolute; top:0; left:0; z-index:-1">
<H1>Bouncing Ball</H1>
<P>The ball bounces around and around under the text.</P>
<P>This page works even if you resize
or scroll the window.</P>
<P>This page takes advantage of:
<UL>
<LI>Absolute positioning
<LI>Moving elements based on the timer
<LI>Z-indexing
<LI>Client size and scrollbar position properties
</UL>
</BODY>
</HTML>
A timer controls the movement of the image on the screen. The image moves behind the text because its z-index value is lower. This example animates an image, but any HTML can be animated across the screen. For example, you can replace this image with a DIV element, supply the DIV element with a width, add some HTML contents, and animate it.
Wipe Effects
Scripting the CSS clip property lets you create interesting wipe effects. For a wipe-in effect, the contents of an element gradually appear on the screen, beginning with one edge and ending with the opposite edge. For a wipe-out effect, the contents disappear in the same manner. The following document provides a function for creating different vertical and horizontal wipe effects on an absolutely positioned element as well as buttons for testing the wipe effects:
<HTML>
<HEAD>
<TITLE>Wipe Effects</TITLE>
<STYLE TYPE="text/css">
BODY {text-align:center}
#wipe {position:absolute; top:200pt; left:40%;
clip:rect(0 100% 100% 0); border:2pt navy solid;
width:100pt; background:white}
P {margin-top:0pt; margin-bottom:0pt}
INPUT {width:100%}
</STYLE>
<SCRIPT LANGUAGE="JavaScript" ID="WipeEffects">
function wipe(direction) {
var el = document.all.wipe;
/* The second argument is optional and specifies whether a
wipe-in or wipe-out occurs. The default is a
wipe-in. */
var into = true;
if (arguments[1] != null)
into = arguments[1];
if (null == el.init) {
// Initialize effect.
// All wipe information is stored in the element.
el.init = true;
el.clipTop = 0;
el.clipRight = 0;
el.clipBottom = 0;
el.clipLeft = 0
el.inc = 4;
if (into) // Set up wipe-in.
switch (direction) {
case "clipBottom":
el.clipRight = "100%";
el.size = el.offsetHeight
break;
case "clipRight":
el.clipBottom = "100%";
el.size = el.offsetWidth;
break;
case "clipTop":
el.clipBottom = "100%";
el.clipRight = "100%";
el.clipTop = el.offsetHeight;
el.inc *= -1;
el.size = 0;
break;
case "clipLeft":
el.clipBottom = "100%";
el.clipRight = "100%";
el.clipLeft = el.offsetWidth;
el.inc *= -1;
el.size = 0;
break;
}
else // Set up wipe-out.
switch (direction) {
case "clipBottom":
el.clipRight = "100%";
el.clipBottom = el.offsetHeight;
el.size = 0;
el.inc *= -1;
break;
case "clipRight":
el.clipBottom = "100%";
el.clipRight = el.offsetWidth;
el.size = 0;
el.inc *= -1;
break;
case "clipTop":
el.clipBottom = "100%";
el.clipRight = "100%";
el.clipHeight = el.offsetHeight;
el.size = el.offsetHeight;
break;
case "clipLeft":
el.clipBottom = "100%";
el.clipRight = "100%";
el.clipLeft = 0;
el.size = el.offsetWidth;
break;
}
}
// Increment clip.
el[direction] += el.inc;
// Set clip.
el.style.clip = "rect(" + el.clipTop + " " +
el.clipRight + " " + el.clipBottom + " " +
el.clipLeft + ")";
// Check whether finished.
if (((el.size >= el[direction]) && (el.inc > 0)) ||
((el[direction] >= 0) && (el.inc < 0)))
setTimeout("wipe(`" + direction + "`, " + into + ")",
10);
else
el.init = null;
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Wipe Effects</H1>
<P STYLE="padding-bottom:5pt">
<INPUT TYPE=BUTTON STYLE="width:260pt" VALUE="Display"
ONCLICK=
"document.all.wipe.style.clip=`rect(0 100% 100% 0)'">
<FIELDSET STYLE="width:130pt">
<LEGEND>Wipe-In Effects</LEGEND>
<P><INPUT TYPE=BUTTON VALUE="Wipe to Bottom"
ONCLICK="wipe(`clipBottom')">
<P><INPUT TYPE=BUTTON VALUE="Wipe to Right"
ONCLICK="wipe(`clipRight')">
<P><INPUT TYPE=BUTTON VALUE="Wipe to Top"
ONCLICK="wipe(`clipTop')">
<P><INPUT TYPE=BUTTON VALUE="Wipe to Left"
ONCLICK="wipe(`clipLeft')">
</FIELDSET>
<FIELDSET STYLE="width:130pt">
<LEGEND>Wipe-Out Effects</LEGEND>
<P><INPUT TYPE=BUTTON VALUE="Wipe from Bottom"
ONCLICK="wipe(`clipBottom', false)">
<P><INPUT TYPE=BUTTON VALUE="Wipe from Right"
ONCLICK="wipe(`clipRight', false)">
<P><INPUT TYPE=BUTTON VALUE="Wipe from Top"
ONCLICK="wipe(`clipTop', false)">
<P><INPUT TYPE=BUTTON VALUE="Wipe from Left"
ONCLICK="wipe(`clipLeft', false)">
</FIELDSET>
<DIV ID=wipe>
<P>Home
<P>News
<P>Info
<P>About
<P>Demo
</DIV>
</BODY>
</HTML>
Creating Pop-Up Menus
Using absolute positioning, you can create menus that are displayed when the user clicks on a keyword or an HTML-defined menu bar. You can extend the following code, which creates an expandable menu of URLs, for use in your own documents. The pop-up menus can be easily enhanced to slide into view using the wipe effects code in the preceding example.
<HTML>
<HEAD>
<TITLE>Pop-Up Menu</TITLE>
<STYLE TYPE="text/css">
/* Make the menu float to the left of the text. */
#menu {float:left; width:50pt; background:lightgrey;
border:2px white outset; cursor:default}
/* Hide the pop-up menus initially. */
#menu .popup {position:absolute; display:none;
background:lightgrey; border:2px white outset;
width:135pt; margin:2pt}
#menu P {margin-top:0pt; margin-bottom:0pt}
.over {color:navy; font-weight:bold}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var curPop = null;
function clearCurrent() {
// Hide the pop-up menu that is currently displayed.
if (null != curPop)
curPop.style.display = "";
curPop = null;
}
function popup() {
var el = event.srcElement;
clearCurrent();
// Display a new menu option.
if (("P" == el.tagName) &&
("menu" == el.parentElement.id)) {
// Position and display the pop-up menu.
var elpop = document.all[el.sourceIndex + 1];
elpop.style.pixelLeft = document.all.menu.offsetLeft +
document.all.menu.offsetWidth - 7;
elpop.style.pixelTop = el.offsetTop +
document.all.menu.offsetTop;
elpop.style.display = "block";
curPop = elpop;
}
event.cancelBubble = true;
}
function highlight() {
// Highlight the menu options.
if (null != event.fromElement)
if ((event.fromElement.tagName == "P") &&
(event.fromElement.parentElement.id == "menu"))
event.fromElement.className = "";
if (null != event.toElement)
if ((event.toElement.tagName == "P") &&
(event.toElement.parentElement.id == "menu"))
event.toElement.className = "over";
}
</SCRIPT>
</HEAD>
<BODY ONCLICK="clearCurrent()">
<H1>Menu Example</H1>
<DIV ID="menu" ONCLICK="popup()" ONMOUSEOVER="highlight()"
ONMOUSEOUT="highlight()">
<P>Navigate
<DIV CLASS="popup">
<P><A HREF="home.htm">Home</A>
<P><A HREF="insideDHTML.htm">Inside DHTML Information
</A>
<P><A HREF="tip.htm">Tip of the Week</A>
</DIV>
<P>News
<DIV CLASS="popup">
<P><A HREF="headlines.htm">Headlines</A>
<P><A HREF="internet.htm">Internet News</A>
<P><A HREF="rumors.htm">Rumor Mill</A>
</DIV>
</DIV>
<P>Click on a menu option in the box on the left.</P>
</BODY>
</HTML>
Adding Drag Support
By combining absolute positioning with the mouse events, you can simulate the dragging and dropping of elements. A simple way to add drag-and-drop support is to write a script that looks for a dragEnabled attribute on any element. The script in the following code automatically handles dragging for all elements that have this attribute, including nested positioned elements, so the code doesn't have to be modified every time you add another element to drag. If the user holds down the mouse button on an element that has the dragEnabled attribute and then moves the mouse, the element will follow. An alternative technique is to use a special class name value instead of the dragEnabled attribute.
<HTML>
<HEAD>
<TITLE>Adding Drag Support</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// This code allows any absolutely positioned element
// with the custom attribute dragEnabled to be dragged.
var elDragged = null // Element to drag
function doMouseMove() {
// Check whether mouse button is down and whether
// an element is being dragged.
if ((1 == event.button) && (elDragged != null)) {
// Move the element.
// Save mouse's position in the document.
var intTop = event.clientY + document.body.scrollTop;
var intLeft = event.clientX + document.body.scrollLeft;
// Determine what element the mouse is really over.
var intLessTop = 0;
var intLessLeft = 0;
var elCurrent = elDragged.offsetParent;
while (elCurrent.offsetParent != null) {
intLessTop += elCurrent.offsetTop;
intLessLeft += elCurrent.offsetLeft;
elCurrent = elCurrent.offsetParent;
}
// Set new position.
elDragged.style.pixelTop =
intTop - intLessTop - elDragged.y;
elDragged.style.pixelLeft =
intLeft - intLessLeft - elDragged.x;
event.returnValue = false;
}
}
function checkDrag(elCheck) {
// Check whether the mouse is over an element
// that supports dragging.
while (elCheck != null) {
if (null != elCheck.getAttribute("dragEnabled"))
return elCheck;
elCheck = elCheck.parentElement;
}
return null;
}
function doMouseDown() {
// Store element to be dragged.
var elCurrent = checkDrag(event.srcElement);
if (null != elCurrent) {
elDragged = elCurrent;
// Determine where the mouse is in the element.
elDragged.x = event.offsetX;
elDragged.y = event.offsetY;
var op = event.srcElement;
// Find real location with respect to element being
// dragged.
if ((elDragged != op.offsetParent) &&
(elDragged != event.srcElement)) {
while (op != elDragged) {
elDragged.x += op.offsetLeft;
elDragged.y += op.offsetTop;
op = op.offsetParent;
}
}
}
}
function doSelectTest() {
// Don't start text selections in dragged elements.
return (null == checkDrag(event.srcElement) &&
(elDragged!=null));
}
// Hook up mouse event handlers.
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
// Reset element when mouse button is released.
document.onmouseup = new Function("elDragged = null;");
document.ondragstart = doSelectTest;
document.onselectstart = doSelectTest;
</SCRIPT>
</HEAD>
<BODY>
<H1>Dragging Positioned Elements</H1>
<P>These contents are static and can't be dragged. The
following image can be dragged even though it is behind
this text.
<IMG SRC="ball.gif" dragEnabled
STYLE="position:absolute; top:10px; left:20px; cursor:hand;
z-index:-1;">
<DIV STYLE="position:absolute; top:150px; left:20px;
border:2px navy solid; width:100; cursor:hand"
dragEnabled>
This text can be dragged.
</DIV>
</BODY>
</HTML>
To move an element, this code calculates the element's new position relative to the document based on the mouse's position relative to the document. The mouse's position is calculated by adding the clientX and clientY properties to the scrollTop and scrollLeft properties of the Body element. The element's position relative to the document is the sum of its offsets and the offsets of all of its offset parents relative to their respective rendering contexts. The offset properties are discussed in the section "The Rendering Context" later in this chapter.
Elements that are relatively positioned take up space in the normal flow of the document. These elements are positioned offset from their normal flow position. The primary function of this feature is to animate elements into their correct location in the document.
The following two examples demonstrate animating text onto the screen. The first example provides an introduction to animating text; the second example is more comprehensive and provides a set of functions for creating a sequence of presentation effects. An example in the section "Aligning Relatively Positioned Elements" later in this chapter demonstrates how to cause all relatively positioned elements to be animated from a single point on the screen.
Flying Text
In general, when you want text to fly in from beyond an edge of the screen, the text should be invisible initially and then appear after a reasonable amount of time. To create text that animates in from the edge of the screen, the best technique is to start with the text off screen at a distant negative coordinate and then set its initial position based on the state of the browser when the animation is about to begin.
Because Dynamic HTML does not specify a concrete size for the contents and because the user can scroll anywhere within the document, the initial position of the element is very important. The initial position of the element must take into account the physical size of the screen and the position of the scrollbars. The following code demonstrates how to make text fly in from the right edge of the screen. This example starts with the text somewhere in the negative coordinate space so that the user cannot reach the text using the scrollbars. At the time the animation is about to begin, the element is repositioned beyond the right edge of the screen. This way, regardless of where the user is in the document, the element always appears to animate onto the page without a long delay, and under no circumstances can the user accidentally view the element before the animation.
<HTML>
<HEAD>
<TITLE>Flying Text</TITLE>
<STYLE TYPE="text/css">
H1 {text-align:center}
#tip {position:relative; left:-1000px}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function slideIn() {
var el = document.all.tip;
// Test whether element is off screen.
if (-1000 == el.style.pixelLeft) {
el.style.fontStyle = "italic";
// Reposition element beyond right edge of screen.
el.style.pixelLeft = document.body.offsetWidth +
document.body.scrollLeft;
}
if (20 <= el.style.pixelLeft) {
el.style.pixelLeft -= 20;
setTimeout("slideIn();", 50);
}
else {
el.style.pixelLeft = 0;
el.style.fontStyle = "";
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="slideIn();">
<H1 ID="tip">Tip of the Week</H1>
<P>Animating text from off screen
</BODY>
</HTML>
Presentation Effects
By expanding on the preceding example, you can easily create presentation style effects that animate text onto the page. This example demonstrates how to add custom presentation behavior that can iterate through elements either automatically or through the user clicking the mouse. The sequencing is defined by taking advantage of Dynamic HTML's ability to expose unrecognized elements. A Sequence element defines a set of elements to animate and specifies whether they should animate automatically or in response to mouse clicks. Multiple sequences can be defined by specifying multiple Sequence elements.
The following document demonstrates two sequences—the first sequence occurs based on a timer, and then the second sequence occurs based on the user clicking the mouse:
<HTML>
<HEAD>
<SEQUENCE order="Text1, Text2, Text3, Text4, Text5" speed="20"
type="auto" increments=15>
<SEQUENCE order="Text6, Text7" speed="20" type="click"
increments=15>
<TITLE>Presentation Effects</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var slideShow = new Object();
function initSequence(s) {
var sTemp = s.sequences[s.currentSequence];
if (null != sTemp) {
// Get list of element IDs to sequence.
s.sequencer = new Array();
s.sequencer = sTemp.getAttribute("order").split(", ");
// Initialize sequence.
for (var intLoop = 0; intLoop < s.sequencer.length;
intLoop++)
if (null != document.all[s.sequencer[intLoop]]) {
var el = document.all[s.sequencer[intLoop]];
el.initTop = el.style.posTop;
el.initLeft = el.style.posLeft;
}
s.speed = (null == sTemp.getAttribute("speed")) ?
20 : sTemp.getAttribute("speed");
s.type = ("auto" == sTemp.getAttribute("type"));
s.increments =
(null == sTemp.getAttribute("increments")) ?
15 : sTemp.getAttribute("increments");
s.inc = 0;
s.position = -1;
}
else {
s.position = null;
if (document.onclick == doFly)
document.onclick = new Function();
}
}
function nextSequence(s) {
// If sequence is available, run it.
if (null != s.position) {
// s.position represents an element in a sequence.
// Run until no more elements are found; then look for
// next sequence.
s.position++
if (s.position < s.sequencer.length) {
s.inc = 0;
if (s.type) // Runs on a timer
window.setTimeout("doFly();", s.speed)
else // Runs on the click event
document.onclick = doFly;
}
else {
s.currentSequence++;
initSequence(s);
nextSequence(s);
}
}
else {
s.position = null;
if (document.onclick == doFly)
document.onclick = null;
}
}
function slide() {
// Initialize sequencer--get all <SEQUENCE> tags.
slideShow.sequences = document.all.tags("SEQUENCE");
slideShow.sequencer = new Array();
if (0 < slideShow.sequences.length) {
slideShow.currentSequence = 0;
initSequence(slideShow); // Initialize.
nextSequence(slideShow); // Start first sequence.
}
}
function doFly() {
var dt, dl;
var el =
document.all[slideShow.sequencer[slideShow.position]];
document.onclick = null; // Stop click events
// until complete.
// Reposition the element.
slideShow.inc++;
dt = el.initTop / slideShow.increments;
dl = el.initLeft / slideShow.increments;
el.style.posTop = el.style.posTop - dt;
el.style.posLeft = el.style.posLeft - dl;
if (slideShow.inc < slideShow.increments)
window.setTimeout("doFly();", slideShow.speed)
else {
el.style.top = 0;
el.style.left = 0;
nextSequence(slideShow);
}
}
</SCRIPT>
<STYLE TYPE="text/css">
BODY {color:white}
DIV {position:relative; width:100%; font-size:16pt;
height:40px}
H1 {text-align:center; font-size:18pt}
</STYLE>
</HEAD>
<BODY BACKGROUND="img001.gif" ONLOAD="slide();">
<H1>Inside Dynamic HTML</H1>
<DIV ID="Text1" STYLE="top:0px; left:-350px">
Overview of HTML and CSS</DIV>
<DIV ID="Text2" STYLE="top:0px; left:-350px">
Fundamentals of HTML Scripting</DIV>
<DIV ID="Text3" STYLE="top:0px; left:-350px">
Dynamic HTML Event Model</DIV>
<DIV ID="Text4" STYLE="top:0px; left:-350px">
Dynamic Styles</DIV>
<DIV ID="Text5" STYLE="top:0px; left:-350px; color:yellow">
Click to Continue</DIV>
<DIV ID="Text6" STYLE="top:0px; left:-350px">
Dynamic Contents</DIV>
<DIV ID="Text7" STYLE="top:0px; left:-350px">
Dynamic Presentations!</DIV>
</BODY>
</HTML>
The custom <SEQUENCE> tag, which should be defined in the head of the document, supports the following attributes. The only required attribute is order; the other attributes will be provided with default values if they are omitted.
| Attribute Name | Description |
| order | Defines the element IDs that should be sequenced. Each item must be explicitly separated using a comma followed by a space. |
| speed | Defines how fast the items are animated in. This same speed is used to determine the delay between elements that are autosequenced. |
| type | Specifies whether the sequence occurs automatically through the timer (auto, the default) or manually in response to clicks (click). |
| increments | Specifies how many intermediate positions each image will assume as it animates to its final position. More increments with faster speed can create a smoother animation. |