Last Updated:

Dynamic HTML (DHTML) Basics

As you know, cascading style sheets (CSS) have the greatest opportunities for the appearance of HTML documents. Through cascading style sheets, you can control all the basic design parameters of standard HTML, as well as many additional parameters.

Cascading Style Sheets (CSS) enable you to work with layers: html fragments that you can place on a web page by overlaying them on top of each other with pixel-deep accuracy. Each of the layers has a visibility feature that allows you to make the layers hidden (not displayed on the screen).

From the JavaScript script, it is possible to dynamically control all the stylistic properties of HTML document objects (including layers), which allows you to get a variety of effects on the page, such as colors and fonts changing under the mouse cursor, scrolling text and graphics, drop-down menus, moving objects, and so on.

This interoperability of HTML documents, Cascading Style Sheets, and JavaScript is called Dynamic HTML (DHTML). With DHTML, developers can write scripts that change the layout and content of Web pages without having to generate new pages or load them from the server.

 

Layers

To create layers, use the <DIV> tag or <SPAN>. These tags are interchangeable and differ only in the appearance in the browser. If you want to indent text before and after text, you should use the <DIV> element. When you place text inside a paragraph, the <SPAN> tag is used.

The following is an html snippet that uses layers to create the effect of overlaying one text fragment on another:

Code Listing 6.1

<html>
<body>
Слой 1 наверху
<div style="position:relative; font-size:50px; z-index:2; color: navy">Слой 1</div>
<div style="position:relative; top:-55; left:5; color:orange; font-size:80px; 
 z-index:1">Слой 2</div>
Слой 2 наверху
<div style="position:relative; font-size:50px; z-index:3; color: navy">Слой 1</div>
<div style="position:relative; top:-55; left:5; color:orange; font-size:80px; 
 z-index:4">Слой 2</div>
</body>
</html>

 

 

The positioning type of a layer is determined by the position parameter, the position of the element by the two coordinates top and left, and the order of the layer by the z-index value.

 

Layer positioning

The position property can take one of three values: staticabsolute, and relative. The default static parameter has no effect on the layout of layers.

With absolute positioning, the layer is positioned relative to the upper-left corner of the document window. If you place a layer inside another layer, the absolute coordinates are counted from the upper-left corner of the parent layer.

In addition to the <DIV> and <SPAN tags> the following elements support absolute positioning:
<APPLET>, <INPUT>, <BUTTON>, <OBJECT>, <SELECT>, <FIELDSET>, <IFRAME>, <TABLE>, <IMG>, <TEXTAREA>.

The position: relative parameter is used to offset the layer relative to the parent element. Setting this value does not change the placement of the element, but if the top or left property values are set, the layer shifts from its normal position in the document.

 

Layer position

 

While the position property specifies the type of coordinate system, the top and left parameters determine the exact position of the layer. The values of these parameters can be determined as a percentage or pixels, take positive and negative values. This makes it possible to place content higher or lower on the page regardless of the physical position of the HTML code. That is, you can place the layer at the top of the page that is described at the bottom of the HTML document.

 

z-index property

 

The z-index property determines the order of the layers, or their overlap with other layers. By default, all layers are positioned with a z-index value of zero. Other layers can be placed lower by setting a negative z-index value (See Figure 1). For layers where z-index is not set, this value is assigned implicitly according to their position in the document. Therefore, the layer that is placed in the document later is placed above the rest of the elements positioned earlier.

Z Index

Rice. 1. Layer layout

Listing 6.1 shows how to use the z-index parameter to change the position of layers relative to each other.

 

Visibility property

To show or hide a layer, use the visibility parameter. It can take the default visible values to show the layer, and hidden, which hides it.

For example, a hidden block of text can be formatted as follows:

<div style="visibility: hidden">Спрятанный слой</div>

  

Dynamic layer management

JavaScript allows you to dynamically control the settings of installed layers. This allows you to get effects such as hiding and displaying a layer, changing the display order, moving the layer in a browser window. All of these effects are achieved by changing the appropriate style settings of the installed layers.

To access layers from JavaScript, it is most convenient to give each layer its own name using the id parameter. For example:

<div id="div1">
...
</div>

To hide the display of div1, you can use the following command:

div1.style.visibility='hidden';

To re-image the layer, perform the following assignment:

div1.style.visibility='visible';

The following is an example document that uses dynamic layer change to change the text in an html page. In this example, to display a layer, click on the appropriate link. This idea can also be applied to the organization of drop-down menus.

Code Listing 6.2

<HTML>
<HEAD>
<STYLE type="text/css">
div {
position: absolute;
top: 20;
left: 160
visibility: hidden;
}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function show_d(d)
{
div1.style.visibility='hidden';
div2.style.visibility='hidden';
div3.style.visibility='hidden';
div4.style.visibility='hidden';
div5.style.visibility='hidden';

d.style.visibility='visible';
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<a href="javascript:void(0)" onClick="show_d(div1);">show layer 1</a><br>
<a href="javascript:void(0)" onClick="show_d(div2);">show layer 2</a><br>
<a href="javascript:void(0)" onClick="show_d(div3);">show layer 3</a><br>
<a href="javascript:void(0)" onClick="show_d(div4);">show layer 4</a><br>
<a href="javascript:void(0)" onClick="show_d(div5);">show layer 5</a><br>
<div id="div1">
<h3>Layer number one</h3>
Some text, located on the layer. It can be hidden and shown. The text can contain multiple lines.
</div>
<div id="div2">
<h3>Layer number two</h3>
Contains your own text. If shown, the text on other layers is not visible.
</div>
<div id="div3">
<h3>Layer three</h3>
Also text. When working with layers, you need to make sure that the text of one layer does not "peek out" from under another layer with a variety of browser window sizes and fonts used.
</div>
<div id="div4">
<h3>Layer number four</h3>
There is no text here.
</div>
<div id="div5">
<h3>Layer number five</h3>
And even more so here.
</div>
</BODY>
</HTML>