• Overview
• Showing and Hiding
• Moving
• Misc other stuff

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;

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"
}

<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>

Moving
You can assign the new position (top, left) to the element.
Example:

Source	Result
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?

• Catch keystroke events using document.onkeydown. Unfortunately this doesn't work on Unix (Netscape support it on Win platform only).
• Using the cliping you can change the visible parts of layers. Together with nested layers you can do a lot of fun stuff here.
• You can rewrite the text in the layer.
  e.g.:

  <SCRIPT>
  function change_text(id,text) {
    if (ns4) {
      var obj = document.layers[id].document;
      obj.open();
      obj.write(text);
      obj.close();
    }
    if (ie4) document.all[id].innerHTML = text
  }
  </SCRIPT>
  <STYLE TYPE="text/css">
  .red { color: red; }
  </STYLE>
  <a href="javascript:change_text('divRW','<B>here the new one</B>')">Change</a> |
  <a href="javascript:change_text('divRW','<B>old text here</B>')">Reset</a> |
  <DIV ID="divRW" STYLE="position:absolute;">
  <B>old text here</B></DIV>
  

  Result:
  Change | Reset |
  old text here
  
   
  
• You can change other properties of object like colors, font sizes etc.

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.