Articles | Dynamic Positioning
| back
Dynamic Positioning
Web pages are pages of text - or so they were when
first introduced. Then Netscape introduced the <IMG> tag, and
since then we have been on a slippery slope leading us screaming and kicking
into Dynamic HTML (DHTML). DHTML, available in both Netscape Navigator 4 and
Microsoft Internet Explorer 4 allows, among other things, the ability for whole
parts of a Web page - text and graphics - to move around the screen, disappear,
and reappear at will.
In my previous article on DHTML, What
is So Dynamic About Dynamic HTML?, we described the main components of
DHTML as:
- HTML: The basic building block.
- Document Object Model: The objects that make
up the contents of any Web page.
- JavaScript: A scripting language that can
manipulate the objects.
- Positioning: The placement of objects within
the document.
This article will show more DHTML techniques and
discuss positioning in more detail.
To create a cross-browser layer (i.e., a layer that
works in either NN4 or MSIE4) we can use the style attribute (<...
STYLE="position: absolute;" ...>) in conjunction with the DIV
or SPAN elements. For example:
Example 1:
<P>
<STRONG>This is the first sentence.
<SPAN STYLE="position: absolute;">
<FONT COLOR="red">Layer Text</FONT>
</SPAN>
This is the second sentence.</STRONG>
</P>
|
Click
here to see Example 1...
As the layer text is no longer part of the main document no space is reserved
for it in the main document, and the main document text is rendered as if the
layer did not exist. If you click on the demo button, you'll see that the layer
of red text floats above the black text. This is due to the the z-order,
i.e., the stacking order of the layers. The layer can be considered to be
floating above the main document.
We could repeat the above example using the <DIV> element. The
only difference would be that the <DIV> element causes an intial
line break to occur. This can be useful, however, depending on the effect you
are trying to create.
Example 2:
<P>
<STRONG>This is the first sentence.
<DIV STYLE="position: absolute;">
<FONT COLOR="red">Layer Text</FONT>
</DIV>
This is the second sentence.</STONG>
</P>
|
Click
here to see Example 2...
Once a layer has broken free from the main document it is possible to adjust
the layers properties to move the layer around the screen, to alter the
properties to hide the layer, or to change the stacking order of the layers
(i.e., place one layer behind another).
Layer properties
As with most technologies on the Internet, things aren't as simple as one
would wish. There are two browser vendors Microsoft and Netscape both battling
it out to produce the best browser, and trying to get one step ahead of each
other. The result: Standards, which often lag behind in this frenzy to get the
latest version of the browser released, are not always adhered to.
Before we even attempt to alter the properties of a layer, we must first know
which object to modify. Here comes the first hurdle: Microsoft and Netscape use
different versions of the Document Object Model (DOM), which are incompatible
with each other. Microsoft chose to create an all object and Netscape a
layer object.
To address the different DOMs, we must check to see which object is available
for us to use. The following JavaScript allows us to do this:
<SCRIPT LANGUAGE="JavaScript"><!--
if (document.all) {
// MSIE4+
}
else if (document.layers) {
// NN4+
}
else {
// not a version 4 or greater browser
}
//--></SCRIPT>
|
To address a layer property we then use either of the following two
hiearachical syntax:
document.all(layerIdentify).propertyName
or:
document.layers[layerIdentify].propertyName
Where propertyName is the name of the property you wish to gain
access to, and layerIdentity is the identity of the layer itself. For
example, the layer <SPAN ID="myLayer">This is my
layer</SPAN> is identified as myLayer.
View
the source code for Example 3...
Click
here to see Example 3...
Example 3 is an effective technique for finding out the properties and
property values of a layer for yourself. The code demonstrates the use of the
for/in loop, in this instance looping around all the properties of the layer
identified as myLayer:
Suffice to say, there are not many (if any) properties with identical names.
The layer objects even have nested objects. In NN4, we have: clip, window,
layers and parentLayer. Meanwhile, MSIE4 uses: all, children,
document, filters, offsetParent, parentElement,
parentTextEdit and style.
Some of these objects are self-explanatory (e.g., window, layers,
all, and document). One or two require closer examination. clip
holds the clipping properties of the layer, while style holds the
Cascading Style Sheet (CSS) properties of the layer. We can now draw up a compatibility
table for for like properties:
| clip.left |
style.clip |
The left edge of the clipping rectangle (the
part of the layer that is visible.) |
| clip.top |
style.clip |
The top edge of the clipping rectangle (the
part of the layer that is visible.) |
| clip.right |
style.clip |
The right edge of the clipping rectangle
(the part of the layer that is visible.) |
| clip.bottom |
style.clip |
The bottom edge of the clipping rectangle
(the part of the layer that is visible.) |
| id |
id |
The layer identifier |
| left |
posLeft |
The horizontal position of the layer's left
edge, in pixels, relative to the origin of its parent layer. |
| top |
posTop |
The vertical position of the layer's top
edge, in pixels, relative to the origin of its parent layer. |
| pageX |
left |
The horizontal position of the layer, in
pixels, relative to the page. |
| pageY |
top |
The vertical position of the layer, in
pixels, relative to the page. |
| visibility |
style.visibility |
Whether or not the layer is visible --
visible|hidden |
| zIndex |
style.zIndex |
The relative z-order of this layer with
respect to its siblings. |
| bgColor |
style.backgroundColor |
The color to use as a solid background color
for the layer's canvas. |
Dynamic "Tooltips"
Developers are constantly striving to create pages that work in as many
browsers as possible -- so I won't bore you with versions that only work on NN4
or only on MSIE4. I'll try and show solutions that work on both at once and fail
gracefully on others.
One thing to be aware of is that NN4 Cascading Style Sheet (CSS) support can
be disabled independently of JavaScript. It is possible to discover that the
layer object you are intending to manipulate is not present. Therefore always
check the existence of the object before attempting to access its properties.
This can easily be achieved by testing whether the object reference is equal to null.
For example: if (document.layers[layerId] != null). In this case, the
layer is present, so it can be manipulated.
View
the source code for Example 4...
Click
here to see Example 4...
Example 4 illustrates an effective "tooltips" working example. When
the mouse pointer is moved over the link text, a hidden layer suddenly becomes
visible. When the mouse moves off the link, the layer disappears again. It may
at first look extremely complicated, but it is a generic solution that can be
used many times throughout the same document.
Each "tooltip" is initially created following the link text that it
is associated with (in this example as a table with a bright background to
obscure any text behind the layer). If the browser does not support CSS or if
CSS support is disabled, the "tooltip" text would be visible right
away. For CSS-enabled browsers, the "tooltip" text would be converted
into invisible layers by initially setting CSS visibility property to hidden,
and the CSS position property to absolute for all myStyle
class references.
Dynamic Placement
It is possible to place a layer anywhere within the current document -- this
can either be an absolute or a relative placement. The placing of layers can be
achieved using CSS style attributes:
Example 5:
<SPAN ID="myLayer" STYLE="position:absolute; top:0; left:0;">
<IMG SRC="sphere.gif" WIDTH="43" HEIGHT="43">
</SPAN>
|
Example 6:
<SPAN ID="myLayer" STYLE="position:absolute; top:50; left:50;">
<IMG SRC="sphere.gif" WIDTH="43" HEIGHT="43">
</SPAN>
|
Click
here to see Example 5...
Click
here to see Example 6...
View
the source code for Example 7...
Click
here to see Example 7...
View
the source code for Example 8...
Click
here to see Example 8...
Click
here to see Example 9...
The code for Example 5 places the sphere image in the top left corner of the
current document. But the code for Example 6 offsets the image from the top
left-hand corner by 50 pixels in both the x and y axis.
Once a layer has been placed on the page it can be repositioned elsewhere
with JavaScript by using the left and top layer properties in
NN4 and the style.posLeft and style.posTop layer properties in
IE4. Example 7 positions the sphere image relative to its previous position.
Example 7 works fairly well, as the initial starting position when the layer
is known (e.g., top:50; left:50;). However, there is a slight problem
in IE4 when trying to place layers relative to their current position when the
current position is not known.
For example, the Example 8 does not specify top and left
positions in the CSS style attributes. When altering the placement of the image,
NN4 works correctly, but IE4 doesn't. The reason being is that in IE4 the
initial values of style.posLeft and style.posTop are set to
zero. Any addition or subtraction results in the layer being positioned relative
to the top left-hand corner of the screen rather than its initial starting
position.
In NN4, Example 8 works as expected by placing the layers to the right of the
links and aligned with the top of the first link, whereas in MSIE4 the layers
are positioned 60 pixels above the start of the document, and thus do not show
correctly.
The solution? Always place the layer in an absoulte position (e.g., top:50;
left:50;), and then move it relative to its last known position. By making
the following two changes to Example 8, we can produce a script that works the
same in both NN4 and MSIE4 (see Example 9 below):
Example 9:
<STYLE TYPE="text/css"><!--
.myStyle {
position: absolute;
visibility: hidden;
top: 0;
left: 0;
}
//--></STYLE>
|
and:
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
reposition('text1',100,10);
reposition('text2',100,10);
reposition('text3',100,10);
//--></SCRIPT>
|
Adding Motion
We are now getting to the interesting part of DHTML - movement - something
not possible in previous browser versions, but now possible in NN4 and MSIE4.
Once a layer has been positioned within the document it can be positioned again
and again, ad nauseum. As with anything that moves or blinks on the
screen, it's best to use it sparingly, as moving objects can detract from the
rest of the page, and can annoy your visitors.
View
the source code for Example 10...
Click
here to see Example 10...
Example 10 demonstrates a ball bouncing inside a box. Apart from a bit of
math, the example only makes use of what we have learned thus far. The example
has two layers box and sphere, both of which are positioned 50
pixels from the top and left-hand sides of the main document. The layers are
independent of one another (i.e., there has been no attempt made to place one
layer inside another -- although this is possible). Because the box
layer was defined before the sphere layer, it appears beneath the sphere
layer, (i.e., the zIndex of the box layer is less than that of
the sphere layer).
The example makes use of a timer to repeatedly call the moveit()
function, which calculates the next position of the sphere layer and
then repositions it.
Layering with zIndex
In Example 10, we saw a demonstration of how the zIndex is generated when
creating layers -- the first layer is defined as the lowest zIndex and appears
at the bottom of the pile of layers. We can, however, manipulate the zIndex to
shuffle the order of the images in the document, bringing layers to the top, or
pushing layers to the bottom, or anywhere in between.
View
the source code for Example 11...
Click
here to see Example 11...
Example 11 is an amended version of the bouncing ball demo -- it defines
three layers box1, box2 and sphere. As before the
zIndex is implicit, so sphere appears above box2 which appears
above box1. But in this example, one of the first things we do after
repositioning the layers is alter the zIndex properties in NN4 and the style.zIndex
properties in MSIE4 to change the zIndex order of the three layers. This places box2
above sphere which is above box1. The higher the zIndex value,
the higher it appears in the main document.
The ball then bounces above the box1, but below the box2,
layer. The stripe effect is achieved by placing a table with alternating colored
columns. Those with a background color obscure the bouncing ball; those without
a background color are effectively transparent. The form button, when clicked,
invokes the swp() function which changes the order of the box1
and box2 layers.
Clipping Layers
Note: Microsoft Internet Explorer on the Mac does NOT support clipping.
The clipping region defines the part of the layer that is visible. Any part
of the layer that is outside the clipping region is transparent. A clipping
region is defined with the use of four attributes that make up the shape of a
rectangle: top, right, bottom and left.
Again, NN4 and MSIE4 implement these in totally different manners.
View
the source code for Example 12...
Click
here to see Example 12...
Example 12 demonstrates a simple clipping example you can use toexperiment
with this clipping rectangle. NN4 has a clip object for each layer,
which has four properties: clip.top, clip.right, clip.bottom
and clip.left. MSIE4, on the other hand, has only one clip property: style.clip
for each layer. However, style.clip has a string value that represents
the four clip values. For example, style.clip = 'rect(top right bottom
left)'.
This may seem complicated at first, but it only requires string concatenation
to turn integer values into the required clipping string. For example, the
following code will create a clipping rectangle in the top right-hand corner of
the layer that's 50 pixels wide and 100 pixels deep.
style.clip = 'rect(' + 0 + ' ' + 50 + ' ' + 100 + ' ' 0 + ')';
Conclusion
In this article, I have shown you how to position layers, how to hide and
reveal layers, and how to move the layers in the x, y and z directions. With
these abilities dynamic Web pages can come to life. Before you get too carried
away with your creations -- think about whether your page needs to be dynamic,
and for how long. You may find that your visitors do not appreciate the effects
the same way you do. However, a little bit of Dynamic HTML used in the
appropriate places can offer an attractive alternative to a static Web page.
Articles | Dynamic Positioning
|
back
|
