reflow as you make content appear and disappear again. Multimedia effects offer filters for transforming the appearance of content.
Dynamic Positioning
Dynamic positioning offers a three-dimensional coordinate system for controlling the display of HTML elements. Authors can also alter the display size of HTML elements through dynamic positioning attributes. By setting these attributes with a script, you can zoom and move content around the screen.
DHTML's interactive nature enables authors to let site visitors fine-tune the location and zoom factor for elements on a page. Although they support different versions of DHTML, Microsoft and Netscape jointly subscribe to consistent positioning attributes approved by the World Wide Web Consortium (
W3C).
There are five primary positioning attributes. These are
top
,
left
,
width
,
height
, and
zIndex
. The
top
and
left
attributes are pixel offsets from an element's parent. The
width
and
height
variables specify the display area for the HTML in pixels. The
zIndex
specifies the stacking order for two HTML elements that occupy the same
x
and
y
page coordinates. The element with the most positive
zIndex
stacks on top. The one with the most negative
zIndex
occupies the bottom of the stack. The element on the top of the stack is visible on the page.
The
screenshot shows
an overlaid succession of images that demonstrates a zoom based on dynamic positioning. The image, a company logo, starts out small in the top left corner of the screen. It grows larger and moves further right until it stops at its ultimate size in the lower right corner of the window.
The
"Zoom Effect"
code segment in the Code Gallery shows that a mere 12 lines of code generated the figure's effects. The
Body
section positions a GIF file in the top left corner of the window, with zero width and height. A short five-line script adjusts the image's width and height until it achieves a maximum width of 800 pixels. The
setTimeout
method for the window object determines the frequency at which the image dimensions grow. The window object's
onload
property causes an event to fire when the window opens, which invokes the procedure to zoom the image.
Dynamic Content
DHTML offers many ways to update, add, or delete text on the fly. Three broad techniques include the display property, the visibility property, and a collection of four properties and two methods that manipulate plain and HTML-formatted text.
InnerText
and
InnerHTML
are read-write properties of DHTML elements. Use these properties to assess an element'
s content, or paste over it. The difference between them is that the
InnerText
property pertains exclusively to plain text. Use the
InnerHTML
property to insert new elements within an existing tag pair.
OuterText
and
OuterHTML
function like their inner siblings, except that they apply to the HTML element as well as to its content. By replacing either "outer" property with a blank string (""), you delete the element from a page.
A matching pair of methods,
insert-AdjacentText
and
insertAdjacent-HTML
, enables content authors to add, without replacing, text and HTML to a page. These methods belong to elements, such as
A
,
DIV
, or
P
. These methods have an argument that permits developers to fine-tune the location of new content relative to an HTML element.
The
visibility
and
display
properties offer an alternative route to dynamic content. You can make content disappear and reappear with either of t
hese properties. The
visibility
property can hide content, but it reserves space on a page for the invisible material. The
display
property works like the visibility property, but it doesn't reserve space. Setting
display
to make content visible reflows other content to accommodate the newly visible material.
The
"Magic Hat"
code segment in the Code Gallery hides and restores text via the
display
attribute. Clicking either
Overview
or
Stability
causes text below each to alternately toggle between visible and invisible states. When the text below
Overview
becomes visible, the paragraph containing
Stability
automatically reflows to a new position on the page to accommodate the additional text. Site visitors toggle the visibility of associated text by invoking either the
showFirst
or
showSecond
functions. These functions serve as event handlers for clicks to the first and second paragraph element
s, respectively. Setting display to
none
makes text invisible, but equating it to "" makes text visible.
Multimedia Effects
DHTML supports multimedia effects through both filters and transitions. Filters can transform text and images. Transitions control how two images exchange positions on the same page, or how one page ends and another starts.
You can fulfill your creative urges with any of 14 filters. The
"Magic Hat"
code segment illustrates how to apply a shadow filter. The
DIV
in the Style block designates a cyan shadow for blue text. This
DIV
style applies to the
DIV
block at the beginning of the
Body
section.
There are two classes of transitions: one for content on a single page and another for moving between pages. Within a page, you can invoke reveal or blend transitions. Only reveal transitions support moves between pages. Blend transitions make content fade out and in on a page. Content authors can choose
from 24 reveal transitions that are very reminiscent of PowerPoint slide transitions.
Does DHTML Move You?
If you are a site developer, you are probably asking if it's worth learning DHTML. I think most would answer yes. Very small amounts of uncomplicated code -- or even no code -- can impressively jazz up Web pages.
Now that you know you can, the question is: Will you? The answer boils down to an issue of site envy. DHTML sites will be faster, cooler, and more interactive than non-DHTML sites. Do you care if your clients can get those capabilities only from your competitors?
Zoom Effect
<HTML><HEADER><SCRIPT>
function go() {
if (image1.width<800) {
x=window.setTimeout('go()',100)
image1.width=image1.width +20
image1.height=image1.height +10;}}
window.onload = go;
</SCRIPT><BODY>
<IMG id=image1 style=
"position:absolute;left:0;top:0"
height=0;width=0 SRC
="../cablogoc1.gif">
</BODY></HEADER></HTML>
Magic Hat
<HTML><HEAD><STYLE>
DIV {font-size:36pt; font-weight: bold;
color:blue; filter:Shadow(color=cyan);height: 25;}
</STYLE><SCRIPT LANGUAGE="JavaScript">
function showFirst() {
if (document.all.FirstList.style.display == "")
{document.all.FirstList.style.display = "none";}
else
document.all.FirstList.style.display = "";}
function showSecond() {
if (document.all.SecondText.style.display == "")
{document.all.SecondText.style.display = "none";}
else
document.all.SecondText.style.display = "";}
</SCRIPT><BODY>
<DIV>Why Retain CAB</DIV>
<P onclick="showFirst()">Overview
<UL ID=FirstList STYLE="display:none" >
<LI>Practical Experience
<LI>Outstanding Credentials
<LI>Cost Effective</UL>
<P onclick="showSecond()">Stability</P>
<SPAN ID=SecondText STYLE="display:none">
CA
B has over a dozen years experience.</SPAN>
</BODY></HTML>
screen_link (36 Kbytes)
With only 12 lines of code (see the listing "Code Gallery"), you can create dazzling effects.
Rick Dobson, Ph.D., is president of CAB, Inc., a database and Internet development consultancy.You can reach him by sending e-mail to
RickD@cabinc.win.net
.
Dynamic HTML Explained, Part II
