From: Subject: JumpStart to the Web technologies tutorial: Dynamic HTML (DHTML) Date: Thu, 14 Nov 2002 10:47:19 +0100 MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_NextPart_000_0000_01C28BCB.34B75FD0"; type="text/html" X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2800.1106 This is a multi-part message in MIME format. ------=_NextPart_000_0000_01C28BCB.34B75FD0 Content-Type: text/html; charset="Windows-1252" Content-Transfer-Encoding: quoted-printable Content-Location: http://www.sergey.com/web_course/part_9.html JumpStart to the Web technologies tutorial: Dynamic = HTML (DHTML)
Jumpstart into=20 the Web technologies: <- Prev. Start Contents References Home Next=20 ->
Dynamic HTML (DHTML)

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

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

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

Showing and Hiding
You can show and hide objects = using their=20 visibility property. Since the possible property values are = named=20 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 =3D "show"
        else if (ie4) document.all[id].style.visibility =3D "visible"
}

function hide(id) {
        if (ns4) document.layers[id].visibility =3D "hide"
        else if (ie4) document.all[id].style.visibility =3D "hidden"
}
Example:=20
Source Result
<a =
href=3D"javascript:show('divShowHide')">Show</a> |=20
<a href=3D"javascript:hide('divShowHide')">Hide</a>
<DIV ID=3D"divShowHide" STYLE=3D"
  position:relative;=20
  left:25px; top:10px;=20
  width:30px; height:30px;=20
  clip:rect(0px 30px 30px 0px);=20
  background-color:red; layer-background-color:red;">AAAA
</DIV>
Show | Hide=20
AAAA=20
Note: Funny thing = I've noticed:=20 you can't have '_' in the DIV ID. Why? I have no clue... :)

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

<a href=3D"javascript:slidex('divSlide',100)">Go Right</a>
<DIV ID=3D"divSlide" STYLE=3D"
  position:relative;=20
  left:25px; top:10px;=20
  width:30px; height:30px;=20
  clip:rect(0px 30px 30px 0px);=20
  background-color:red; layer-background-color:red;">
</DIV>
Go Left | Go Right=20

What else can you do?

  • Catch keystroke events using document.onkeydown. = Unfortunately=20 this doesn't work on Unix (Netscape support it on Win platform only).=20
  • Using the cliping you can change the visible parts of layers. = Together=20 with nested layers you can do a lot of fun stuff here.=20
  • You can rewrite the text in the layer.
    e.g.: = 
    <SCRIPT>
function change_text(id,text) {
  if (ns4) {
    var obj =3D document.layers[id].document;
    obj.open();
    obj.write(text);
    obj.close();
  }
  if (ie4) document.all[id].innerHTML =3D text
}
</SCRIPT>
<STYLE TYPE=3D"text/css">
.red { color: red; }
</STYLE>
<a href=3D"javascript:change_text('divRW','<B>here the new =
one</B>')">Change</a> |
<a href=3D"javascript:change_text('divRW','<B>old text =
here</B>')">Reset</a> |
<DIV ID=3D"divRW" STYLE=3D"position:absolute;">
<B>old text here</B></DIV>
    Result:
    here%20the%20new%20one')">= Change=20 | old%20text%20here')">Reset= |=20
    old text=20 here

     
  • You can change other properties of object like colors, font sizes = etc.=20

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

More info on DHTML can be found her= e.=20

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

Copyright =A9 2000 Sergey=20 Gribov
------=_NextPart_000_0000_01C28BCB.34B75FD0 Content-Type: text/css; charset="iso-8859-1" Content-Transfer-Encoding: quoted-printable Content-Location: http://www.sergey.com/web_course/style.css .toolbar1 { PADDING-RIGHT: 3pt; PADDING-LEFT: 3pt; FONT-WEIGHT: bold; FONT-SIZE: = 8pt; PADDING-BOTTOM: 1pt; COLOR: #002255; PADDING-TOP: 1pt; FONT-FAMILY: = Tahoma, Arial, sans-serif } .toolbar2 { PADDING-RIGHT: 4pt; PADDING-LEFT: 4pt; FONT-WEIGHT: bold; FONT-SIZE: = 8pt; PADDING-BOTTOM: 1pt; COLOR: navy; PADDING-TOP: 1pt; FONT-FAMILY: = Tahoma, Arial, sans-serif } .title1 { PADDING-RIGHT: 4pt; PADDING-LEFT: 4pt; FONT-WEIGHT: bold; FONT-SIZE: = x-large; PADDING-BOTTOM: 7pt; COLOR: navy; PADDING-TOP: 10pt; = TEXT-ALIGN: center } .title2 { PADDING-RIGHT: 4pt; PADDING-LEFT: 4pt; FONT-WEIGHT: bold; FONT-SIZE: = x-large; PADDING-BOTTOM: 7pt; COLOR: navy; PADDING-TOP: 10pt; = TEXT-ALIGN: center; TEXT-DECORATION: underline } P { PADDING-RIGHT: 5pt; PADDING-LEFT: 5pt; PADDING-BOTTOM: 7pt; = PADDING-TOP: 7pt } ------=_NextPart_000_0000_01C28BCB.34B75FD0 Content-Type: application/octet-stream Content-Transfer-Encoding: quoted-printable Content-Location: http://www.sergey.com/web_course/navig.js =0A= // Navigation function to go to the next / previous page=0A= // n is offset (1, -1 etc.)=0A= function goto_page (n) {=0A= var first =3D 0;=0A= var last =3D 14; // should be the next after the last one=0A= var part_name =3D "part_";=0A= var loc =3D window.location.href;=0A= var re =3D /(.*)\/(\w+)\.html([^\/]*)$/;=0A= var ra =3D re.exec(loc);=0A= =0A= // may be it ends with '/' instead of index.html=0A= if (ra =3D=3D null) {=0A= ra =3D re.exec(loc + "index.html");=0A= }=0A= var path =3D ra[1];=0A= var fname =3D ra[2]; =0A= =0A= // alert("=3D=3D" + ra[1] + "=3D=3D" + ra[2] + "=3D=3D" + ra[3]);=0A= =0A= if (n !=3D -1 && n !=3D 1) {=0A= alert("Hmmm... Wrong parameter to goto_page()...");=0A= }=0A= else if (fname =3D=3D "index" || fname =3D=3D "content") {=0A= if (n =3D=3D -1) {=0A= window.location.href =3D path + "/index.html";=0A= }=0A= else { // +1=0A= window.location.href =3D path + "/" + part_name + "1.html";=0A= }=0A= }=0A= else if (fname =3D=3D "reference") {=0A= if (n =3D=3D -1) {=0A= window.location.href =3D path + "/" + part_name + last + ".html";=0A= }=0A= else { // +1=0A= window.location.href =3D path + "/reference.html";=0A= }=0A= }=0A= else {=0A= var re1 =3D new RegExp("^" + part_name + "(\\d+)");=0A= var ra1 =3D re1.exec(fname);=0A= var num =3D parseInt(ra1[1]);=0A= if (num !=3D null) {=0A= num +=3D n;=0A= if (num > last) {=0A= window.location.href =3D path + "/reference.html";=0A= }=0A= else if (num <=3D first) {=0A= window.location.href =3D path + "/index.html";=0A= }=0A= else {=0A= window.location.href =3D path + "/" + part_name + num + ".html";=0A= }=0A= }=0A= else {=0A= alert("Hmmm... the filename " + fname + " looks strange...");=0A= }=0A= }=0A= }=0A= ------=_NextPart_000_0000_01C28BCB.34B75FD0--