11/03/1998 Lecture

Dynamic HTML

Dynamic HTML represents a whole new level in web page creation. Although you have probably heard a lot of hype about dynamic HTML, the underlying truth is no less impressive. It really does make web pages 'come alive' in a way that was impossible before. When the web first started, web pages were static affairs with text and graphics only. Then a web page became an arrangement of static elements with some active objects (Java applets, or ActiveX controls) embedded in it. Things have gine to the next logical level now: everything is active.

This lecture will take you ona guided tour of dynamic HTML. Two major implementations of dynamic HTML are in use today: Netscape's Navigator, and Microsoft's Internet Explorer. If you want to work with Dynamic HTML you should be familiar with both implementations. It would be great if the two major dynamic HTML implementations were similar, but, unfortunately, they're not. They go well beyond the WWW Consortium specifications for new tags and style sheets. In fact there are such major differences between the two that it's almost impossible to get any but the most basic dynamic HTML page working for both browsers (although you can outsmart them by checking what browser your page is running in and actually rewriting your page on the fly, tailoring it to the user's browser.

Nevertheless HTML programmers should be familiar with both implementations. Internet Explorer's dynamic HTML implementation is far larger. Almost every tag has "come alive" with added properties and events. Netscape Navigator has added new properties and events as well, but fewer of them.

There's another difference between these two implementations: scripting languages. Internet Explorer uses both VBscript and JavaScript. Netscape Navigator uses only JavaScript at present.

Plan:

Basic HTML tags
Basic Scripts
Rewriting Pages
Mouse and Text Effects
Active HTML Tags
Graphics Events
Animation
Dialog Boxes and Windows
Data Binding

Sites to check:

1. Basic HTML tags

We review:

<HTML>
<!-- Comments >
validators
<HEAD>
<TITLE>
<BODY > (attributes, predefined colors, backgrounds)
<H1> (visible headings)
<IMG ... > (attributes)
<BR>
<A ...> (anchor, attributes)
<FONT ...> (attributes)
<TABLE ...> (attributes)
<UL> (unordered lists, also ordered, definition lists)
<A HREF="MAILTO: ..."> (sending mail)
example web page

All attributes are listed by browser.

2. Basic Scripts

Plan:

embed scripts
use scripting properties, methods, and events
hook scripts up to web controls

Text Boxes

<INPUT TYPE = BUTTON | CHECKBOX | HIDDEN |
              IMAGE  | TEXTBOX  | RADIO  | 
              ...
>

Netscape requires forms, IE doesn't. Forms are collections of controls that we want to keep together.

Initializing Pages We'll add some VBScript code that the web browser will run when the web page is first loaded. We'll use dynamic HTML events. A list of events by browser. The <SCRIPT> tag.

Visual Basic code. (IE only)

<HTML>
<HEAD>
<TITLE>
VBScript Initialization 
</TITLE> 
</HEAD> 
<BODY LANGUAGE=VBScript onLoad=Page_Initialize()> 
<CENTER>
<INPUT TYPE=TEXT NAME=Textbox SIZE=20>
</CENTER>
<SCRIPT LANGUAGE=VBScript>
SUB Page_Initialize() 
    Textbox.Value = "Hello from VBScript"; 
END SUB
</SCRIPT>
</BODY>
</HTML>

JavaScript code.

<HTML>
<HEAD>
<TITLE>
JavaScript Initialization
</TITLE> 
</HEAD> 
<BODY onLoad="Page_Initialize()"> 
<FORM NAME="Form1">
<CENTER>
<INPUT TYPE=TEXT NAME=Textbox SIZE=20>
</CENTER>
</FORM> 
<SCRIPT LANGUAGE=JavaScript>
function Page_Initialize() {
    document.Form1.Textbox.value = "Hello from JavaScript"; 
}
</SCRIPT>
</BODY>
</HTML>

Related topics:

Using Buttons in VBScript
Using Buttons in JavaScript
Using Check Boxes with VBScript
Using Check Boxes with JavaScript
Using Radio Buttons with VBScript
Using Radio Buttons with JavaScript
Using List Boxes with VBScript
Using List Boxes with JavaScript

3. Changing Your Web Page On The Fly.

Airport Schedule with VBScript. (IE only)

<html>
 <head><title>VBAirport</title></head>
<body bgcolor="white">
<script language=vbscript>
  document.write "<center>"
  document.write "<h1>"
  document.write "Welcome to the Dynamic HTML Airport!"
  document.write "</h1>"
  document.write "<h2>"
  document.write Time
  document.write "</h2>"
  document.write "<center>"
  if hour(now) < 6 or hour(now) > 22 then
    document.write "The airport is closed. The time is between 10pm-6am."
  end if 
  if hour(now) >= 6 and hour(now) < 12 then  
    document.write "The airport is open. Morning schedule available."
  end if 
  if hour(now) >= 12 and hour(now) < 17 then  
    document.write "The airport is open. Afternoon schedule available."
  end if 
  if hour(now) >= 17 and hour(now) < 22 then  
    document.write "The airport is open. Evening schedule available."
  end if 
</script> 
</body>
</html>

Airport Schedule with JavaScript

Loading Graphics on the Fly with VBScript (IE only)

<html>
<head>
<title>
Load Conditional Graphics
</title>
<body bgcolor=white>
<center>
<h1>Loading Graphics on Demand</h1> 
<script language=vbscript>
If (confirm("Load Bloomington picture?")) Then 
  document.write "<img src=""http://www.indiana.edu/image/iub.3.gif"">"
Else 
  document.write "<img src=""http://www.indiana.edu:80/iu/allcamp.jpg"">"
End If 
</script> 
</center>
</body>
</html>

Loading Graphics on the Fly with JavaScript

Rewriting HTML at Any Time with VBScript (IE only)

<html>
<head>
<title>Rewriting documents on the fly</title>
</head>
<body bgcolor=white>
<center>
<input type=button value="Rewrite the page's HTML" onClick=rewrite()>
</center>
</body>
<script language=vbscript>
sub rewrite()
  document.write("<html><head><title>Done</title></head><body>")
  document.write("<h1>This page was rewritten.</h1></body></html>") 
end sub
</script>
</html>

Rewriting HTML at Any Time with JavaScript

Pasting HTML by Elements (IE only)

Using IE Marquees

The Code

<html>
<head>
<title>
Rewrite Header 
</title>
</head>
<body id=body1 bgcolor=white>
<center>
<h1 id=header onclick="changeheader()">Click me!</h1> 
</center>
</body>
<script language=vbscript>
sub changeheader() 
  header.innerHTML = "<marquee>This is a marquee...</marquee>" 
end sub 
</script> 
</html>

Targeted Frames with VBScript

Writing HTML to Targeted Frames with JavaScript

Rewriting a Web Page Depending on the Browser

Essentially we use Javascript since that is the common denominator.

<html>
  <head>
    <title>
      Your browser... 
    </title>
  </head>
  <body bgcolor=white>
    <script language=JavaScript>
    document.write(navigator.appName + " " + navigator.appVersion); 
    </script> 
  </body>  
</html>

4. Powerful Mouse and Text Effects

Using the Mouse in Internet Explorer (IE only)

<html>
  <head>
    <title>Mouse Demo</title>
  </head>
  <body bgcolor=white>
  <center>
    <input id=textbox type=text size=20>  
  </center> 
  </body>
  
<script language=vbscript>
sub document_onMouseOver() 
  textbox.value= "mouse over" 
end sub
sub document_onMouseOut() 
  textbox.value = "mouse out" 
end sub
sub document_onMouseDown()
  textbox.value = "mouse down at:" & window.event.x & "," & window.event.y
end sub
sub document_onMouseMOve()
  textbox.value = "mouse moved: " & window.event.x & "," & window.event.y 
end sub 
</script>
</html>

Using the Mouse in Netscape Navigator

You can achieve almost the same thing with JavaScript.

Selecting, Highlighting and Enlarging Text in IE (IE only)

This combines two examples in one page.

<html>
<head>
<title>
Select, Highlight, Enlarge 
</title>
</head>
<body bgcolor=white>
Example 1: Select some text with the mouse... <br>
<input type=text name=textbox size=40> <p> ...or move
the mouse over a hyperlink: <ul>
<li> <a href="http://www.cs.indiana.edu" name=link1> Link One </a> 
<li> <a href="http://www.cs.indiana.edu" name=link2> Link Two </a> 
</ul> 
</body>
<script language=vbscript>
sub document_onclick()
  dim textrange
  set textrange = document.selection.createrange()
  textbox.value = textrange.text
end sub
sub link1_onmouseover 
  link1.style.color="red"
  link1.style.fontsize=24
end sub
sub link1_onmouseout
  link1.style.color="blue"
  link1.style.fontsize=16
end sub 
sub link2_onmouseover 
  link2.style.color="red"
  link2.style.fontsize=24
end sub
sub link2_onmouseout
  link2.style.color="blue"
  link2.style.fontsize=16
end sub 
</script>
</html>

Reading Keys from the Keyboard in Internet Explorer (IE only)

<html>
  <head>
    <title>Keyboard Input</title>
  </head> 
  <body id=body1 bgcolor=white> 
  <center>
  Type some characters... <p>
  <input type=text name=textbox size=40>
  <p> Don't expect <em>too</em> much, this is very simple.</center>
  </body>
  <script language=vbscript>
  dim instring
  private function body1_onkeypress()
    instring = instring & chr(window.event.keycode)
    textbox.value = instring
  end function 
  </script> 
</html>

Reading Keys in Netscape Navigator

Using Style Sheets

5. Active HTML Tags

Every object you see in a web page in Internet Explorer can be manipulated in code. This is an IE only section. It describes things that Netscape for various reasons cannot do yet. Our focus here should be the technical side of it, though. From this point of view the implementation is, well, reasonably good.

The IE <HTML> tag.

The IE <HEAD>, <TITLE>, <BODY> tags.

The IE <H1> tag. Properties.

The IE <IMG> tag. (IE only)

<html>
  <head>
    <title>
    IMG example 
    </title> 
  </head>
  <body bgcolor=white>
  <center> 
  <img name=img1 src="http://www.cc.columbia.edu/low3.gif"> <p>
  <input type=button value="Change Image" onclick="change_image()"> 
  </center> 
  </body> 
  <script language=vbscript>
  sub change_image()
    img1.src="http://www.cs.indiana.edu/l/www/dept/img/lh00bevel3.gif"
  end sub 
  </script> 
</html>

The <DIV> tag. (IE only)

The <DIV> tag can enclose any section of the web page you want, not just text.

<html>
  <head>  
    <title>
    DIV example
    </title>
  </head>
  <body bgcolor=white>
  <center>
    <div id=div1>
      Here's the text you can color. 
    </div> <br> 
    <input type=button value="make text red" onclick="makered()"> <p>
    <input type=button value="make text blue" onclick="makeblue()">
  </center>
  </body>
  <style>
   .redtext {color:Red}
   .bluetext  {color:Blue}
  </style>
  <script language=vbscript>
    sub makered ()
      div1.classname = "redtext"
    end sub
    sub makeblue ()
      div1.classname = "bluetext"
    end sub 
  </script>
</html>

The <FONT>, <TABLE>, <INPUT> tags.

6. Graphic Effects

Overlapping text in web pages.

Using Graphics Filters

<html>
  <head>
    <title>
      Filter Test
    </title>
  </head>
  <body bgcolor=white> <table> <tr> <td> 
  <img src="http://www.cc.columbia.edu/low3.gif" 
       name=img1 
       </td> <td> 
  Click a button to apply a filter... <p> 
  <input type=button 
         value="Flip Vertical" 
         onclick="img1.style.filter='flipv(enabled=1)'">
  <input type=button
         value="Blur"
         onclick="img1.style.filter='blur(direction=45,strength=10,enabled=1)'">
  </td> </tr> </table> 
  </body>
</html>

Dissolving In and Out with Transitions (IE only)

<HTML> <HEAD> <TITLE>Fader Example</TITLE> </HEAD> <BODY bgcolor=white>
<DIV STYLE="POSITION:ABSOLUTE;WIDTH:500;HEIGHT:100;TOP:20;LEFT:0">
<CENTER>
<input value="Dissolve" type=button onMouseDown="ApplyEffect(12)">
<input value="Vertical In" type=button onMouseDown="ApplyEffect(13)">
<input value="Vertical Out" type=button onMouseDown="ApplyEffect(14)">
<input value="Horizontal In" type=button onMouseDown="ApplyEffect(15)">
<input value="Horizontal Out" type=button onMouseDown="ApplyEffect(16)">
<input value="Left Down" type=button onMouseDown="ApplyEffect(17)">
<input value="Left Up" type=button onMouseDown="ApplyEffect(18)">
</CENTER>
</DIV>
<DIV     ID="Div1" 
    STYLE="POSITION:ABSOLUTE; WIDTH:250; HEIGHT:200; Left:200; Top:100;
    FILTER:revealTrans(Duration=2.0)">
    <DIV ID="targetText1" 
        STYLE="POSITION:ABSOLUTE;WIDTH:250;HEIGHT:210;TOP:0;LEFT:0">
        <FONT SIZE=6 FACE="Arial">
        With filters, you can create wipes and dissolves and many 
        additional visual effects. 
    </DIV>
    <DIV ID="targetText2" 
        STYLE="POSITION:ABSOLUTE;WIDTH:250;HEIGHT:210;TOP:0;LEFT:0">
        <FONT SIZE=6 FACE="Arial">
        <IMG SRC="http://www.cc.columbia.edu/low3.gif" width=250 height=210>         
    </DIV>
</DIV>
</BODY>
<SCRIPT LANGUAGE="VBScript">
Dim useText1
useText1 = true
Sub Window_onLoad()
    targetText1.style.visibility = "hidden"
End Sub
Sub ApplyEffect(Transition)
    call Div1.filters(0).Apply()
    Div1.filters(0).Transition = Transition
    If (useText1) = true then
        targetText1.style.visibility = ""
        targetText2.style.visibility = "hidden"
        useText1 = false
    else
        targetText2.style.visibility = ""
        targetText1.style.visibility = "hidden"
        useText1 = true
    end if
    Div1.filters(0).play(2.0)    
End Sub 
</SCRIPT>
</HTML>

Using the Structured Graphics Control

Using Layers in Netscape Navigators

7. Animation

Drag and Drop

In the example below one picture is fixed the other one can be moved.

<html>
  <head>
    <title>
    Drag and Drop
    </title>
  </head>
  <body bgcolor=white>
  <center>
  Drag and Drop Example (make the browser full screen for best functionality) <p> 
  </center>
  <div id=Div1 style="position:relative; width:100%; height:500px">
    <img id="image2" style=
         "container:positioned; position:absolute; top:80px; left:150px;"
         src="http://www.cc.columbia.edu/low3.gif"> 
    <img style=
         "container:positioned; position:absolute; top:0pt; left:0pt;"
         src="http://www.cs.indiana.edu/dept/img/lh00bevel3.gif">
  </div> 
  </body> 
  <script language=vbscript>
  sub document_onmousemove() 
    Dim source, left, top
    Set source = Window.Event.srcElement
    if source.tagName = "IMG" And window.event.Button = 1 then 
      left = window.event.X - source.Width/2 - document.all.Div1.offsetleft
      top = window.event.Y - source.Height/2 - document.all.Div1.offsettop
      source.style.pixelLeft = left
      source.style.pixelTop = top 
      window.event.returnValue = FALSE
    end if 
  end sub
  sub image2_onmousemove()
    window.event.cancelBubble = TRUE
  end sub
  </script> 
</html>

Creating Animations with IEs Sequencer Control

<html>
<head><title>Sequencer</title></head>
<body bgcolor=white>
 
<OBJECT ID=graphics 
   STYLE="POSITION:ABSOLUTE;HEIGHT:300;WIDTH:450;TOP:30;LEFT:60;VISIBILITY:VISIBLE;ZINDEX:-1"
   CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
 <PARAM NAME="Line0001" VALUE="SetLineColor(255, 0, 0)">
 <PARAM NAME="Line0002" VALUE="SetFillColor(0, 0, 255)">
 <PARAM NAME="Line0003" VALUE="SetFillStyle(1)">
 <PARAM NAME="Line0004" VALUE="Oval(-75, -75, 80, 80, 0)">
 <PARAM NAME="Line0005" VALUE="SetFillColor(255, 0, 0)">
 <PARAM NAME="Line0006" VALUE="Pie(-75, -75, 80, 80, 0, 55, 0)">
 <PARAM NAME="Line0007" VALUE="Pie(-75, -75, 80, 80, 0, 55, 120)">
 <PARAM NAME="Line0008" VALUE="Pie(-75, -75, 80, 80, 0, 55, 240)">
</OBJECT>
 
<OBJECT ID="Sequencer"
   CLASSID="CLSID:B0A6BAE2-AAF0-11d0-A152-00A0C908DB96"
   STYLE="WIDTH:2;HEIGHT:2">
</OBJECT>
</body>
 
<script language="VBScript">
sub Sequencer_oninit
  call Sequencer("ActionSet1").At(0.000, "rotateGraphic", -1, 0.100, 1) 
  call Sequencer("ActionSet1").Play 
end sub 
sub rotateGraphic
  call graphics.rotate(10, 10, 0) 
end sub 
</script>
 
</html>

Animations Using Layers (Netscape only)

8. Working with Dialogs

Alert boxes and such, windows.

9. Pages That Work Offline and with Databases

This section covers the Internet Explorers' tabular data control. Using the data control you can bind data to a web page and so avoid the necessity of multiple downloads as the user peruses a database or a set of pages. Data can be downloaded at once and your web page can work with the data you bind to it, sorting, selectively displaying, and filtering that data.

Note: this is up to the web page author, which knows how much data the user might need to look at and how much data is in the entire database. Tradeoffs.

Sorting Data (IE only)

In this example a file with grades is retrieved from a URL and the user can work with in her browser (the transfer time is minimized, most of the work happens on the client side).

<html><head><title>Sorting Data</title></head>
<body bgcolor=white> <center>
 
<OBJECT ID="gradelist" 
   CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
   BORDER="0" WIDTH="0" HEIGHT="0">
   <PARAM 
     NAME="DataURL" 
     VALUE=
     "http://www.cs.indiana.edu/l/www/classes/a348/lectures/dhtml/grades.txt">
   <PARAM
     NAME="UseHeader" VALUE="True"> 
</OBJECT>
 
Click the table headers to sort rows... <br>
<table border datasrc="#gradelist">
<thead> 
<tr>
  <td> <div id=FirstName>First Name </div></td> 
  <td> <div id=LastName>Last Name </div></td> 
  <td> <div id=ID>ID </div></td> 
  <td> <div id=Score>Score</div></td> 
</tr> 
</thead>
<tbody>
<tr> 
<td><div datafld="FirstName"></div></td> 
<td><div datafld="LastName"></div></td> 
<td><div datafld="ID"></div></td> 
<td><div datafld="Score"></div></td> 
</tr> 
</tbody>
</table>
                     </center>
</body>
<script language="vbscript">
sub FirstName_onClick()
  gradelist.sortcolumn = "FirstName"
  gradelist.reset()
end sub
sub LastName_onClick()
  gradelist.sortcolumn = "LastName"
  gradelist.reset()
end sub
sub ID_onClick()
  gradelist.sortcolumn = "ID"
  gradelist.reset()
end sub
sub Score_onClick()
  gradelist.sortcolumn = "Score"
  gradelist.reset()
end sub
</script>
</html>