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.5 DataBind.htm—Dynamic HTML and Data Binding Enable Easy Client-Side Data Manipulation

<HTML>
<HEAD>
<TITLE>Data Binding with Dynamic HTML</TITLE>
</HEAD>
<BODY>
<OBJECT ID=“inputdata”
        CLASSID=“clsid:333C7BC4-460F-11D0-BC04-0080C7055A83”
        align=“baseline” border=“0” width=“0” height=“0”>
<PARAM NAME=“DataURL”   VALUE=“authors.txt”>
<PARAM NAME=“UseHeader” VALUE=TRUE>
</OBJECT>
<CENTER>
<H1>Data Binding with Dynamic HTML</H1>
<HR>
<P>
   This example shows an example of how you can use
   Dynamic HTML to bind an HTML element, in this case
   the columns of a table, to a Data Source Object.
   This enables the data to be kept separately from the
   formatting information in the HTML document. It
   also enables the data to be operated on at the client.
   In this example, if you click the table headers
   of the table below, it will be sorted by the
   elements in that column.
</P>
<HR>
<TABLE DATASRC=“#inputdata” BORDER>
<THEAD>
<TR><TH><U><DIV ID=ChapNum onclick=“sort1()”>
        Chapter<BR>Number</DIV></U></TH>
    <TH><U><DIV ID=ChapTitle onclick=“sort2()”>
Chapter<BR>Title</DIV></U></TH>
    <TH><U><DIV ID=PageCount onclick=“sort3()”>
Estimate<BR>Page Count</DIV></U></TH>
    <TH><U><DIV ID=Author onclick=“sort4()”>
Author</DIV></U></TH></TR>
</THEAD>
<TBODY>
<TR><TD ALIGN=RIGHT><DIV DATAFLD=“ChapNum”></DIV></TD>
    <TD>            <DIV DATAFLD=“ChapTitle”></DIV></TD>
    <TD ALIGN=RIGHT><DIV DATAFLD=“PageCount”></DIV></TD>
    <TD>            <DIV DATAFLD=“Author”></DIV></TD></TR>
</TBODY>
</TABLE>

<SCRIPT LANGUAGE=“JavaScript”>
function sort1() {
  inputdata.SortColumn = “ChapNum”;
  inputdata.Reset();
}
function sort2() {
  inputdata.SortColumn = “ChapTitle”;
  inputdata.Reset();
}
function sort3() {
  inputdata.SortColumn = “PageCount”;
  inputdata.Reset();
}
function sort4() {
  inputdata.SortColumn = “Author”;
  inputdata.Reset();
}
</SCRIPT>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
</HTML>

FIGURE 26.7 The Data Source Object enables you to include external data within an HTML document by Dynamic HTML.

FIGURE 26.8 Using Dynamic HTML, you can automatically sort—or otherwise operate on—and immediately redisplay data.

Position HTML Elements with Dynamic HTML

One exciting thing possible with Dynamic HTML is the capability to reposition HTML elements on the Web page. To do this, change the left and top properties of the element’s style object (which, in turn, is a property of the element). This change can be done either automatically or in response to user interaction.

Listing 26.6 shows an example of a Dynamic HTML document that enables the user to position an HTML element—in this case a group of pictures—on the Web page. In this example, a table containing three images is contained within a <SPAN> tag. An onClick event is attached to the <SPAN>, which is used to toggle whether it can be moved and to initialize the coordinates for the move. An onMouseMove event is attached to the document itself; when the <SPAN> region has moving enabled, the position of the mouse determines where the region is moved. Figure 26.9 shows the Web page immediately after it is loaded, and Figure 26.10 shows it while it is being moved. Note that the movement status and the current x,y coordinate are shown in the text boxes near the bottom of the page.

NOTE: The “x-ray” effect shown in Figure 26.10 is applied using the Internet Explorer “xray” filter. Dynamic HTML filters will be discussed in the “Dynamic HTML Filters” section later in this chapter.

FIGURE 26.9 You can use the HTML <SPAN> container tag to group other HTML elements into one region.

FIGURE 26.10 The top and left style properties make it easy to move HTML elements around the page.

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.