Auction Demo Architecture: Dynamic HTML

Dynamic HTML is used to implement the overall user interface for the online Auction weblication. For example, the following code allows us to highlight each table row as the mouse moves over it:

    <TR ONMOUSEOVER=mousemove('over') 
	ONMOUSEOUT=mousemove('out') 
	ONCLICK=selectCell()>

The mousemove function sets the backgroundColor style to orange for the row the mouse is over, and back to transparent when the mouse leaves the item.

        function mousemove(which)
{
	var e = window.event.srcElement;
	while (e.tagName != "TR" && e.tagName != "TABLE") {
		e = e.parentElement;
	}
	if (which == "over")
		e.style.backgroundColor = "orange";
	else
		e.style.backgroundColor = "";
}

Similarly, when the mouse button is pressed, showProduct is called for the selected item, and a backgroundImage is used to show when the item is currently selected. showProduct is described in the ECMAScript examples (see XML object model).

        function selectCell()
{
	var row = window.event.srcElement;
	while (row.tagName != "TR")
		row = row.parentElement;	
	var table = row;
	while (table.tagName != "TABLE")
		table = table.parentElement;
	var rows = table.rows;
	for (i=0; i < rows.length; i++) {
		if (row == rows(i)) {
			showProduct(i);
			rows(i).style.backgroundImage = "url(images/swallows2.jpg)";
		} else {
			rows(i).style.backgroundColor = "";
			rows(i).style.backgroundImage = "";
		}
	}
}

Here's another neat trick: When an update is received from the server, a fading red background is used to indicate which items bids are being made on. This code uses the window setTimeout function to add an animation effect.

        function handleFade()
{
	var i;
	for (i = 0; i < numFading; i++)
	{
		fadingItems[i].style.backgroundColor =	
			getFadingColor(fadingColors[i], fadingSteps[i]);
	}
	window.setTimeout( "handleFade();", fadingTimeout);
}

HomeBack to the XML Auction Demo overview.

© 1997 Microsoft Corporation. All rights reserved. Terms of use.