Chapter 8 Dynamic
Documents with Javascript
• Support for dynamic HTML is still far from uniform across
the various browsers. This chapter begins with a
discussion of how the most popular browsers differ in
their support for dynamic changes to HTML documents.
HTML elements can be initially positioned at any given
place in a document. If they're positioned in the proper
way, elements can be dynamically moved to new
positions in the document. Elements can be made to
disappear and reap-pear. The colors of the background
and the foreground (the elements) of a document can be
changed. The font, font size, and font style can be
changed. Even the content of an element can be
changed. Finally, we discuss the front-to-rear stacking of
elements in a document and the changing of their
stacking order.
©
Chapter 8 Dynamic
Documents with JavaScript
• 8.1 Browser support for Dynamic document
• 8.2 Element Positioning
• 8.3 Moving Elements
• 8.4 Element Visibity
• 8.5 Changing Colors and Fonts
• 8.6 dynamic Content
• 8.7 Stacking Elements
• 8.8 Summary
• 8.9 Review Questions
• 8.10 Exercises
©
8.1 Browser support for
Dynamic document
• The most commonly used browsers at the time
of this writing are Microsoft Internet Explorer 5
(IE5) and Netscape Navigator 4 (NN4), although
Netscape Navigator 6 (NN6) has already been
available for some time and is beginning to
displace NN4. Although it was long anticipated,
there never was a release of NN5; rather, NN6
replaced NN4. It is not clear whether NN6 will
achieve widespread use as NN4 did because
many users switched from NN4 to IE5 before
NN6 was released.
©
8.1 Browser support for
Dynamic document
• IE5 supports most of the World Wide Web
Consortium (W3C) standards for
cascading style sheets (CSS) and
dynamic HTML through JavaScript. IE5
also supports a number of advanced
visual effects, such as filters to create
wavy text and blurring of elements.
Because these are nonstandard, we do
not cover them.
©
8.1 Browser support for
Dynamic document
• NN4 supports some kinds of dynamic HTML through its
layers and its JavaScript style sheets (JSS). However,
neither of these technologies is included in W3Cs
standards for dynamic HTML, so we do not cover them.
Without layers and JSS, NN4 supports positioning
elements and moving elements within a displayed
document, but it does not allow the changing of
properties such as color and fonts. As is the case with
IE5, NN6 supports most of W3Cs standards for CSS and
JavaScript. The Web author's challenge is to provide
HTML documents that definitely can be viewed by IE5
and NN6, but also by NN4 to the extent that is possible.
Some of the example HTML documents in this chapter
can be displayed and modified by all three, but NN4
cannot handle most of them.
©
8.1 Browser support for
Dynamic document
• A dynamic HTML document is one whose
tag attributes, tag contents, or element
style properties can be changed after the
document has been and is still being
displayed by a browser. Such changes are
made with an embedded script that
accesses the elements of the document as
objects in the associated DOM structure.
©
8.1 Browser support for
Dynamic document
• The IE5 and NN6 browsers both support the W3C
standard DOM, so their access to elements is
straightforward. Unfortunately, the DOM structure
supported by NN4 is different. Any dynamic HTML
document that must work for both NN4 and those
browsers that support the W3C standard DOM must deal
with the differences. To do this, the document's code
must be capable of determining which browser is being
used. From Chapter 7, "JavaScript and HTML
Documents," you know that two properties, appName
and appVersion
, of the JavaScript navigator object can
be used for this. Next, you must deal with the differences
between the structures of the NN4 DOM and the W3C
standard DOM.
©
8.1 Browser support for
Dynamic document
• To make dynamic changes in a document, a script must
be capable of addressing the elements of the document.
The elements have DOM addresses that can be
computed. This is the part that differs between the W3C
DOM and that of NN4. The best way to compute the
base DOM address of an element with the W3C DOM is
to include an id attribute in the element and use the
JavaScript getElementById
method of the document
object. You'll often want to change the style properties of
an element. When this is the case, .style
is catenated to
the end of the DOM address of the element. When you
add the property name on the end of this address, the
result is the actual DOM address of the style property.
For example, consider the following HTML document:
©
8.1 Browser support for
Dynamic document
<html>
<head>
</head>
<body>
<form id = "myForm">
<input type = "button" id = "turnlt0n">
• • •
</form>
</body>
</html>
©
8.1 Browser support for
Dynamic document
• The W3C standard DOM address of the button
is as follows:
document.getElementById("turnItOn").style
• NN4 does not support the getElementById
method, so the DOM address must include the
entire path through the DOM hierarchy. So, for
NN4, the DOM address of the button is this:
document.my Form.turnItOn
• Notice that style is not included in the NN4 DOM
address.
©
8.1 Browser support for
Dynamic document
• To implement a script that accesses an HTML element
and must work for both W3C DOM browsers and NN4,
you compute the element's DOM address based on the
browser. In some cases, as in the previous example, the
element is referenced through its id. For example, if the
id of the element is the string "turnItOn", the following
code will construct the correct DOM address of the
element for both NN4 and browsers that support the
W3C standard DOM:
if ((
navigator.appName
== "Netscape") &&
(
parseInt(navigator.appVersion
) == 4))
dom
=
document.myForm.turnItOn
;
else
dom
=
document.getElementById("turnItOn").style
;
©
8.1 Browser support for
Dynamic document
• Changes can be made to the properties of the turnItOn
button using the dom base address, regardless of
whether NN4, IE5, or NN6 is being used.
• Another common situation is that the HTML element is
referenced through the value of a variable or function
parameter rather than by its teral id. In these cases, the
DOM address for NN4 must be built with the string
catenation operator and the JavaScript eval
function. For
example, suppose that a JavaScript function accesses
the attributes of an element, and the id of the ele-ment is
sent as a parameter. The function can determine the
proper DOM address with the following code:
©
8.1 Browser support for
Dynamic document
function
changer(elemid
) {
if ((
navigator.
appName
== "Netscape") &&
(
parseint(navigator.
appVersion
) == 4))
dom
=
eval
('document
.' +
elemid
);
else
dom
=
document.
getElementById
(elemid).style
;
©
8.1 Browser support for
Dynamic document
• These approaches to computing DOM
addresses of elements will be used in Section
8.3, "Moving Elements"; Section 8.4, "Element
Visibity"; and Section 8.7, "Stacking Elements."
• Keep in mind that there are differences among
the various browsers in how some HTML
elements are displayed. You should expect that
the examples in this chapter could appear
sghtly different when displayed by different
browsers.
©
8.2 Element Positioning
• Before the browsers that implemented HTML 4.0
appeared. Web site authors had ttle control
over how HTML elements were arranged in
documents. In many cases, the elements found
in the HTML file were simply placed in the
doc-ument the way text is placed in a document
with a word processor—fill a row, start a new
row, fill it, and so forth. HTML tables provide a
framework of columns for arranging elements,
but they lack flexibity and also take a
considerable amount of time to display. This lack
of powerful and fast element placement control
ended when cascading style sheets-positioning
(CSS-P) appeared.
©
8.2 Element Positioning
• CSS-P
is completely supported by IE5 and NN6 and is
partially supported by NN4. It provides the means not
only to position any element anywhere in the document,
but also to dynamically move an element to a new
position in the document, using JavaScript to change
certain properties of the element. The properties, in this
case, dictate the distance from the left edge and top of
the document to where the element is to appear. These
properties are appropriately named left and top. Another
property, position, interacts with left and top to provide a
higher level of control of placement and movement of
elements. The position property has three possible
values: absolute, relative, and static.
©
8.2.1 ABSOLUTE
POSITIONING
• The absolute value is specified for position when
the element is to be placed at a specific place in
the document without regard to the positions of
other elements. For example, if you want a
paragraph of text to appear 100 pixels from the
left edge of the document and 200 pixels from
the top, you could use this tag:
<p style = "position: absolute; left: 100px; top:
200px">
--text --
</p>
©
8.2.1 ABSOLUTE
POSITIONING
• Suppose that you want to superimpose some
special text over a paragraph of ordinary text, for
example, to create an effect similar to a
watermark on paper. You could do this by using
absolute positioning of the special text. A larger
ital-icized font, with space between the letters
and in a ght gray color, should be effective for
the special text, allowing both the ordinary text
and the special text to be legible. The following
HTML document provides an example that uses
this approach. In this example, a paragraph of
normal text that describes apples
©
8.2.1 ABSOLUTE
POSITIONING
• An Example:
– absPos.html
– Notice that a width property value is included
in the style for the special text. This is used
here because, in its absence, the absolutely
positioned element would stretch to the right
end of the document and the figure would not
fit on this page.
©
8.2.1 ABSOLUTE
POSITIONING
– The absPos.html document also works for
NN4, except that NN4 does not support the
letter-spacing
property of the absolutely
positioned text. So, when displayed with NN4,
the letter spacing of the absolutely positioned
text is normal, and it appears on one ne:
APPLES ARE GOOD FOR YOU
©
8.2.1 ABSOLUTE
POSITIONING
– When an element is absolutely positioned
inside another positioned element (one that
has the position property specified), the top
and left property values are measured from
the upper-left comer of the enclosing element.
– To illustrate nested element placement, you
modify the document absPos.html to place
the regular text 100 pixels from the top and
100 pixels from the left. Then nest the special
text inside the regular text by using <div>
and
<span>
tags. The modified document, which
follows, is named absPos2.html.
absPos2.html
©
8.2.2 RELATIVE
POSTIONING
• An element that has the position property set to relative
but does not specify top and left property values is
placed in the document as if the position attribute ware
not set at all. However, such an element can be moved
later. If the top
and left
properties are given values, they
displace the element by that amount from the position
where it would have been placed. For example, suppose
that two buttons are placed in a document without the
position
attribute being set to relative
. They would
appear next to each other in a row. If the second button
had its left
property set to 50px, the effect would be to
move it 50 pixels farther to the right than it otherwise
would have appeared.
©
8.2.2 RELATIVE
POSTIONING
• In both the case of an absolutely
positioned element inside another element
and the case of a relatively positioned
element, negative values of top
and left
displace the element upward and to the
left, respectively.
©
8.2.2 RELATIVE
POSTIONING
• Relative positioning can be used for a variety of special
effects in element placement. For example, it can be
used to create superscripts and subscripts by placing the
values to be raised or lowered in <span>
tags and
displacing them from their regular positions. In the
following example, a ne of text is set in a normal font
style in 24 point size. Embedded in the ne is one word
that is sets in itac, 48 point, and in red. Normally, the
bottom of the special word would agn with the bottom of
the rest of the ne. In this case, the special word will be
vertically centered in the ne, so its position property is
set to relative and its top property is set to 10 pixels,
which raises it by that amount, relative to the
surrounding text. The HTML document to specify this,
which is named
relPos.html
, is shown here:
©
8.2.3 STATIC POSITIONING
• The default value for the position
property
is static
. A statically positioned element is
placed in the document as if it had the
position
value of relative
. The difference
is that a statically positioned element
cannot have its top
or left
properties
initially set or changed later. Therefore, a
statically placed element cannot be
displaced from its normal position and
cannot be moved from that position later.
©
8.3 Moving Elements
• If the position property of an HTML element is
set to either absolute
or relative
, it can be
moved, provided that the browser supports such
move-ment. Moving an element is simple:
Changing the top
or left
property values causes
the element to move within the document. In the
following example, an image is absolutely
positioned in the document. The document
includes two text boxes labeled x coordinate and
y coordinate. The user can enter new values for
the left and top properties of the image. When
the button labeled Move It is pressed, the values
of the left and top properties of the image are
changed and it is moved to its new position.
©
8.3 Moving Elements
• A JavaScript function is used to change the
values of left and top. In this example,
JavaScript determines which browser is being
used and sets the left and top properties of the
element after building the correct DOM address
for the browser. Because the function is sent the
DOM addresses of the text boxes as a variable,
the eval function must be used to construct the
DOM address of the image for NN4 browsers.
The values of the two buttons are also sent to
the function as parameters. The actual
parameter values are the DOM addresses of the
buttons, with the value attribute attached, which
together specify the values of the buttons.
©
8.3 Moving Elements
• An Example
– mover.html
©
8.4 Element Visibity
• Document elements can be made to be
visible or hidden, depending on the value
of their visibity
property. Because
visibity is related to position (visibity is
specified in CSS-P), elements can be
made to appear or disappear in IE5, NN6,
and NN4. The two possible values for
visibity
are, quite naturally, visible and
hidden. The appearance or disappearance
of an element is often controlled by the
user through a button.
©
8.4 Element Visibity
• Unfortunately, the NN4 browser uses the
values show
and hide
rather than the
CSS-P standard values visible
and
hidden
. The standard values are
recognized, but internally show and hide
are used. Therefore, to define a
doc-ument that works for browsers that
use the standard values and the NN4
browser, any tests of the value of visibity
must include both standard and NN4
values.
©
8.4 Element Visibity
• The following example displays an image
and allows the user to toggle the image
between appearing and not appearing in
the document. Again, the DOM address of
the image is computed so that the code
will work for IE5, NN6, and NN4 browsers.
showHide.html
©
8.5 Dynamic Colors and
Fonts
• Both IE5 and NN6 browsers support
dynamic changes in the font and color
properties of HTML elements, but NN4
does not.
©
8.5.1 CHANGING COLORS
• Dynamic changes to colors are relatively simple. In the
following example the user is presented two text boxes
into which color names can be typed one for0 the
document background color and one for the foreground
color. A JavaScript function, which is called (by means of
the onchange
event) whenever one of the text boxes is
changed, makes the change in the document's color
properties, backgroundColor
and color. The first of the
two parameters to the function specifies whether the new
color is for background or foreground; the second
specifies the new color. The new color is the value
property of the text box that was changed by the user.
©
8.5 Dynamic Colors and
Fonts
• The value property for the background and
foreground text elements, which is the new color,
is addressed in the call using the this reference.
When the onChange
event object is created in
the background element, that element is the
current object, so at that time this is equivalent
to the following:
document.colorControl.background
The same is true for the foreground element.
dynColors.html
©
8.5.2 CHANGING FONTS
• Web users are accustomed to having nks in documents
change color when the cursor is placed over them. Using
the mouse event, mouseover
, to trigger JavaScript
event handlers, any property of a nk can be changed.
So, the font style and font size, as well as the color, can
be changed when the cursor is placed over a nk. The
nk can be changed back to its original form when an
event handler is triggered with the mouseout
event. In
the following example, the only element is a sentence
with an embedded nk. The foreground color for the
document is the default black. The nk is presented in
blue. When the mouse cursor is placed over the nk, its
color changes to red and its font style changes to itac.
ke the last example, this one works for IE5 and NN6.
dynnk.html
©
8.6 Dynamic Content
• We have explored the options of dynamically changing the positions
of elements, their visibity, and the colors and styles of fonts. This
section investigates changing the content of HTML elements. The
content of an element is accessed through the value
property of its
associated JavaScript object. So, changing the content of an
element is not essentially different from changing other properties of
the element. The following example illustrates changing the content
of a collection of text boxes.
• Assistance to a user filng out a form can be provided by an
associated text box, often called a help box
. The content of the help
box can change, depending on the placement of the mouse cursor.
When the cursor is placed over a particular input field, the help box
can display advice on how the field is to be filled When the cursor is
moved away from an input field, the help box content be changed to
simply indicate that assistance is available.
dynValue.html
©
8.7 Stacking Elements
• The top
and left
properties allow the placement
of an element anywhere in the display of a
document. Although the display is restricted to
two physical dimensions, the effect of a third
dimension is possible through the simple
concept of stacked elements, such as those
used with windowing systems. Although multiple
elements can occupy the same space in the
document, one is consider^ to be on top. The
top element hides the parts of the lower
elements over which it is superimposed.
©
8.7 Stacking Elements
• The placement of elements in this third
dimension is controlled by the z-index
attribute of the element. An element
whose z-index
is greater than that of an
element in the same space will be
displayed over the other element,
effectively hiding the lower element. The
JavaScript style property associated with
z-index
is zIndex
; Because stacking
elements is part of CSS-P, it is supported
by NN4, as well as IE5 and NN6.
©
8.7 Stacking Elements
• In the following example, three images are
placed in the document so that they overlap
considerably. In the HTML description of this,
each image is defined to be an anchor, allowing
it to be used to trigger the execution of a5
JavaScript handler function. The function first
determines whether the browser is NN4. It then
defines a DOM address for each of the last top
element and the new top element for each
browser. Then the function sets the z Index
value of the two elements so that the old top
element has a value of 0 and the new top
element has the value 10, effectively putting it at
the front.
stacking.html
©
8.8 Summary
• Dynamic HTML using JavaScript is not
universally supported by current browsers. The
IE5 and NN6 browsers provide a great deal of
support for dynamic HTML. NN4 browsers
support dynamic element positioning but ttle
else of dynamic HTML. Also, the IE5 and NN6
browsers use the W3C standard DOM, while the
NN4 browsers do not. To write scripts that
provide dynamic HTML in ways that work for IE5
and NN6 browsers (as well as NN4 browsers.
when possible), you must take this into account.
©
8.8 Summary
• The CSS-P
standard enables you to initially place HTML
elements wherever you want in a document and then to
move them later. Elements can be positioned at any
given location in the display of a document if their
position property is set to absolute
or relative
. Absolute
positioning is used to place an element at a position in
the display of the document relative to the upper-left
comer of the display. Relative positioning is used to
place an element where it would normally go but also
allow it to be moved later. Static positioning, which is the
default, disallows dynamic moving of an element. The
left
and top
properties specify where an element is
placed, relative to the left edge and top of the display,
respectively. The left and top properties can be
dynamically changed, resulting in the element being
moved.
©
8.8 Summary
• HTML elements can be made to disappear
and reappear by changing their visibity
property. The W3C standard values for
this property are visible and hidden. The
NN4 browser stored these internally as
show
and hide
, respectively.
©
8.8 Summary
• The color of the background of a document is stored in
its backgroundColor
property, whose DOM address is
document. body.
style.backgroundColor
The color of an element is stored it its color property.
Both of these can be dynamically changed by changing
their correspon-ding properties. The font, font size, and
font style of text also can be changed.
• The content of an element can be changed by changing
its value
property. Finally, an element in a document can
be set to appear to be in front of other elements, and this
front-to-rear stacking order can be dynamically changed.
©
8.9 Review Questioins
• 1. Define a dynamic HTML document.
• 2. If you know the id of an HTML element, how
can you get the DOM address of that element in
JavaScript?
• 3. If you have a variable that has the id of an
HTML element, how can you get the DOM
address of that element in JavaScript?
• 4. What is CSS-P and what browsers support it?
• 5. What are the differences between the three
possible values of the posi -tion property?
©
8.9 Review Questioins
• 6. What are the standard values for the visibity
property?
• 7. What properties control the foreground and
background colors of a docu -ment?
• 8. What events can be used to change a font
when the mouse cursor is moved over and away
from an element?
• 9. What property has the content of an element?
• 10. What JavaScript variable is associated with
the z-index property?
• 11. How do you call a JavaScript function from
an anchor element?
©
8.10 Exercises
• 2
• 4
• 6
• 8