Platinum Edition Using HTML 4, XML, and Java 1.2:Advanced Microsoft Dynamic HTML

To access the contents, click the chapter and section titles.

Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Table of Contents

Listing 26.3 DynCon.htm—Real-time Changing of HTML Document Contents Using the innerHTML Property

<HTML>
<HEAD>
<STYLE>
SPAN,P {font-family: Verdana;
        font-size: 18pt;
        font-weight: bold}
</STYLE>
<SCRIPT>
function errortrap(msg,url,line){
   return true
}
onerror = errortrap;
</SCRIPT>
<TITLE>Dynamic Content Using innerHTML</TITLE>
</HEAD>
<BODY onload=“stuff()” onmouseover=“update()”>
<CENTER>
<H1>Dynamic Content Using <EM>innerHTML</EM></H1>
<HR>
<P>
<SPAN>This</SPAN>
<SPAN>paragraph</SPAN>
<SPAN>contains</SPAN>
<SPAN ID=wordCount>???</SPAN>
<SPAN>words</SPAN>.
<SPAN>The</SPAN>
<SPAN>mouse</SPAN>
<SPAN>is</SPAN>
<SPAN>currently</SPAN>
<SPAN>over</SPAN>
<SPAN>the</SPAN>
<SPAN>word</SPAN>
<BR><SPAN ID=currentWord STYLE=“color:#0000FF;font-size:36pt”>n/a</SPAN><BR>
<SPAN>In</SPAN>
<SPAN>this</SPAN>
<SPAN>paragraph</SPAN>,
<SPAN>this</SPAN>
<SPAN>is</SPAN>
<SPAN>word</SPAN>
<SPAN>number</SPAN>
<BR><SPAN ID=currentWordNum STYLE=“color:#0000FF;font-size:36pt”>n/a</SPAN>
</P>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
<SCRIPT LANGUAGE=“JScript”>
var oldObject
function stuff() {
   oldObject = null
   wordCount.innerHTML = document.all.tags(“SPAN”).length
}
function update() {
   if (window.event.srcElement.tagName == “SPAN”) {
      if (oldObject)
         oldObject.style.fontFamily = “Verdana”
      oldObject = window.event.srcElement
      oldObject.style.fontFamily = “Lucida Handwriting”
      for (i = 0;i < document.all.tags(“SPAN”).length;i++)
         if (oldObject == document.all.tags(“SPAN”).item(i))
            currentWordNum.innerHTML = i + 1
      currentWord.innerHTML = oldObject.innerHTML
   } else {
      if (oldObject) {
         oldObject.style.fontFamily = “Verdana”
         oldObject = null
         currentWordNum.innerHTML = “n/a”
         currentWord.innerHTML = “n/a”
      }
   }
}
function errortrap(msg,url,line){
//  alert(msg);
    return true;
}
onerror = errortrap;
</SCRIPT>
</HTML>

The three main sections of interest in this example are the main document text (contained within the container tag) and the two JavaScript functions, stuff() and update(). This application determines which word in the paragraph (if any) the mouse is over and changes the text to display this word as well as its position within the paragraph. To help accomplish this, each of these sections does the following:

• Body text within the container tag—Each separate word in this paragraph is set off by a container tag to enable you to access and manipulate it separately from the rest. In addition, three of the words are also given an ID because the JavaScripts will be using their innerHTML properties to dynamically change their contents.

• JavaScript stuff() function—This function is called when the page has completely loaded by the onload event of the <BODY> tag. It is used to fill in the total number of words in the paragraph. This is done by counting the number of tags, then inserting this number into the paragraph using the appropriate innerHTML property.

• JavaScript update() function—This function is called whenever an onmouseover event is triggered. Because the onmouseover event is given in the <BODY> tag, such an event is generated whenever the mouse passes over any element in the page!
The update() function first determines whether the element that triggered the event is one of the elements in the paragraph. If it is, it changes the font of the corresponding word and places the word and word number in the appropriate spaces in the paragraph (see Figure 26.4). If the triggering element was not one of the tags, the function changes the text to read “n/a.”

Dynamic HTML Events and the event Object

In addition to making HTML documents more responsive by enabling you to attach events and manipulate the properties of virtually any HTML tag, Microsoft’s Dynamic HTML also has increased the number of HTML events that the Web browser can sense and respond to. This section identifies what most of these events are and shows what triggers them.

FIGURE 26.4 Internet Explorer automatically adjusts the other contents of the page to correctly display dynamically altered information.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.