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