Jumpstart into the Web technologies: <- Prev. Start Contents References Home Next ->
Dynamic HTML (DHTML)

Dynamic HTML is the sum of HTML, CSS and JavaScipt, which make the Web pages interactive. So how we can actually use it all together?

Note, since many things in DHTML aren't standard, here comes incompatability of Netscape and MS IE... Till there is some standard we'll have to write a separate code for NS and IE. In order to make it work, always check who is it you are dealing with:

ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
The trick here is that document.layers is object, which exists only in Netscape 4.x and document.all exists only in IE4.x.
Also, use <DIV> tag only, since <LAYER> tag is Netscape specific.

Showing and Hiding
You can show and hide objects using their visibility property. Since the possible property values are named differently in NS and IE it's useful to use the following functions:

// Show/Hide functions for non-pointer layer/objects
function show(id) {
        if (ns4) document.layers[id].visibility = "show"
        else if (ie4) document.all[id].style.visibility = "visible"
}

function hide(id) {
        if (ns4) document.layers[id].visibility = "hide"
        else if (ie4) document.all[id].style.visibility = "hidden"
}

Example:
SourceResult
<a href="javascript:show('divShowHide')">Show</a> | 
<a href="javascript:hide('divShowHide')">Hide</a>
<DIV ID="divShowHide" STYLE="
  position:relative; 
  left:25px; top:10px; 
  width:30px; height:30px; 
  clip:rect(0px 30px 30px 0px); 
  background-color:red; layer-background-color:red;">AAAA
</DIV>
Show | Hide
AAAA
Note: Funny thing I've noticed: you can't have '_' in the DIV ID. Why? I have no clue... :)

Moving
You can assign the new position (top, left) to the element.
Example:
SourceResult
Moving
<SCRIPT>
function move (id, x, y) {
  if (ns4) obj = document.layers[id];
  if (ie4) obj = document.all[id].style;
  obj.xpos = parseInt(obj.left) + parseInt(x);
  obj.ypos = parseInt(obj.top) + parseInt(y);
  obj.left = obj.xpos;
  obj.top = obj.ypos;
}
</SCRIPT>
<a href="javascript:move('divMove',-20,0)">Left</a> | 
<a href="javascript:move('divMove',20,0)">Right</a> |
<a href="javascript:move('divMove',0,-20)">Up</a> | 
<a href="javascript:move('divMove',0,20)">Down</a> 
<DIV ID="divMove" STYLE="
  position:relative; 
  left:25px; top:10px; 
  width:30px; height:30px; 
  clip:rect(0px 30px 30px 0px); 
  background-color:red; layer-background-color:red;">
</DIV>
Left | Right | Up | Down
Animation
<SCRIPT>
function slidex (id, x) {
  step = 5;
  if (ns4) obj = document.layers[id];
  if (ie4) obj = document.all[id].style;
  obj.xpos = parseInt(obj.left);
  if (Math.abs(obj.xpos - x) > step) {
    if (x < 0) step = - step;
    obj.xpos += step;
    obj.left = obj.xpos;
    setTimeout("slidex('" + id + "'," + x + ")", 30);
  }
}
</SCRIPT>
<a href="javascript:slidex('divSlide',-200)">Go Left</a> | 
<a href="javascript:slidex('divSlide',100)">Go Right</a>
<DIV ID="divSlide" STYLE="
  position:relative; 
  left:25px; top:10px; 
  width:30px; height:30px; 
  clip:rect(0px 30px 30px 0px); 
  background-color:red; layer-background-color:red;">
</DIV>
Go Left | Go Right

What else can you do?

Summary:
You can do a lot of cool client-side stuff with DHTML. Visit DHTML links in the reference section and you'll see that 'the sky is the limit'.

More info on DHTML can be found here.

Jumpstart into the Web technologies: <- Prev. Start Contents References Home Next ->

Copyright © 2000 Sergey Gribov