How'd they do this?

[Sparkie]

Check this out, its an article about the release of the MS XBox:

XBox Unveiled

My web-design related question is.. see where it has "Compare the Consoles"? You choose one from the list and it automatically updates the specs. Can someone tell me, specifically, how this is done?

Thanks

Sparkie

[aspen]

Here is the code in question:

<!-------ART HEADLINE, CAPTION AND  CREDIT---><FONT FACE="Times New Roman, Georgia, Times" SIZE=3></FONT><FONT FACE="Arial, Trebuchet MS, Helvetica" SIZE=1>
<!-- Game consoles brill
http://www.msnbc.com/news/wld/dhtml/GameConsole.htm --><BR></FONT></TD><TD WIDTH=23>  </TD><!---ART AND BODY TEXT CONTINUES---><TD WIDTH=361 ALIGN=left VALIGN=top><FONT FACE="Times New Roman, Times" SIZE=3><IMG SRC="http://a799.ms.akamai.net/7/799/388/2ebefc7104d681/www.msnbc.com/news/631979.gif" border=0  HSPACE=1 vspace=3 ALIGN=left ALT=""><!-- poptext code v. 2.0

	Author - Brenden West; updated 3-1-00
	template 2 - Swap text below drop down.

-->
<SCRIPT language=JavaScript SRC="/modules/poptext/poptext_codeV2.js">
<!--
	var sUA = navigator.appName.toLowerCase();
	if (sUA.indexOf("webtv") == -1) { bValidClient=false; }
//-->
</SCRIPT><SCRIPT language="javascript">

<!--
	if (bIE3) { var rows = 19; var cols = 43; }
	else { var rows = 15; var cols = 25; }

	var appHeader = "Comparing the consoles";
	var appDeck = "<font face=arial,helvetica size=2><b>Select a system below</b></font>";

	var console = new Array();
	console[0] = "<font face=arial,helvetica size=2><b>Processor:</b> 200 Megahertz,Hitachi-built SH4 RISC with 128-bit graphic engine<br><b>Polygons per second:</b> 3 million<br><b>Modem:</b> 56.6 kbps (packed in with console) broadband peripheral to be sold separately<br><b>Storage medium and capacity:</b> Proprietary GD-ROM(a double-density CD that holds over one gigabyte of information.)<br><b>U.S. launch date and price:</b> Released last year.  Price is dropping to $149.<br><b>Special features:</b> Proven ease of programming to attract designers, best existing library, first to have online games and built-in modem.</font>";

	console[1] = "<font face=arial,helvetica size=2><b>Processor:</b> 405 Megahertz, 0.18 micron, copper wire technology custom chip that was co-designed with IBM.<br><b>Polygons per second:</b> 6 to 12 million &quot;useable&quot; polygons per second<br><b>Modem:</b> 56K and broadband peripherals will be available<br><b>Storage medium and capacity:</b> Mini DVD discs that will hold 1.58 gigabytes.  No decision has been made about double density. <br><b>U.S. launch date and price:</b> Japanese launch is set for July 2001, U.S. launch will be in October<br><b>Special features:</b> Interfaces with Game Boy Advance, Will have DD-drive ability, revolutionary controller with built in camera button, only console that gets games from legendary designer Shigeru Miyamoto.</font>";

	console[2] = "<font face=arial,helvetica size=2><b>Processor:</b> 300 Megahertz, 0.18 micron, custom chip that will be manufactured by Toshiba.<br><b>Polygons per second:</b> 66 million raw polygons; 38 million with lighting; 36 million with fogging; 16 million with curved surfaces<br><b>Modem:</b> An Ethernet/hard drive peripheral will be sold separately<br><b>Storage medium and capacity:</b> DVD-ROM-standard DVDs hold 8 gigabytes of information, multi-layerd ones hold up to 17 gigabytes.  <br><b>U.S. launch date and price:</b> Released in Japan March 4, for 39,900 yen.  Slated for U.S. launch in October at $299.<br><b>Special features:</b> Backwards compatibility with original PlayStation, plays DVD movies.</font>";

	console[3] = "<font face=arial,helvetica size=2><b>Processor:</b> 733 megahertz 300 megahertz graphics chip called X-Chip.<br><b>Polygons per second:</b> 150 million polygons<br><b>Modem:</b> 100 megabit Ethernet connection.<br><b>Storage medium and capacity:</b> DVD drive plus 8 gigabyte hard drive<br><b>U.S. launch date and price:</b> Fall 2001<br><b>Special features:</b> Comes with 64 megabytes  of unified RAM-all systems can draw from it providing developers the ability to draw more power to graphics, sound or other areas, plays DVD movies.</font> ";

	SelectList = new Array("Dreamcast","Nintendo Gamecube","Playstation 2","X-Box");

 if (bValidClient) {
	Poptext2("console");
 }
//-->
</SCRIPT>

Now its obvious they are using an external JS file to generate the dropdown and all that.

But I'm betting its the same basic concept used to dynamically change the contents of 1 drop down by selecting from another.

Basically the dropdown's are generated with the OnChange event handler. This handler calls a predefined JS function that does whatever. Write text, changes the contents of another drop down, etc.

Here is the same concept used to control drop downs for selecting car makes and models. The user would first select which make they would want, and then the lower drop down is populated with the corresponding models.

<SCRIPT LANGUAGE="JavaScript">

modelinfo = new Array(
	new Array(

		new Array("CENTURY", "Century"),
		new Array("LESABRE", "LeSabre"),
		new Array("PARK AVENUE", "PARK AVE"),
		new Array("REGAL", "Regal")



	),
	new Array(

		new Array("ASTRO", "Astro"),
		new Array("BLAZER", "Blazer"),
		new Array("CAMARO", "Camaro"),
		new Array("CAVALIER", "Cavalier"),
		new Array("CORVETTE", "Corvette"),
		new Array("EXPRESS", "Express"),
		new Array("FLEET P/U", "Fleet"),
		new Array("IMPALA", "Impala"),
		new Array("MALIBU", "Malibu"),
		new Array("MONTE CARLO", "Monte carlo"),
		new Array("PRIZM", "Prizm"),
		new Array("S10", "s10"),
		new Array("SILVERADO", "Silverado"),
		new Array("SUBURBAN", "Suburban"),
		new Array("TAHOE", "Tahoe"),
		new Array("TRACKER", "Tracker"),
		new Array("VENTURE", "Venture")

	),
	new Array(

		new Array("ALERO", "Alero"),
		new Array("AURORA", "Aurora"),
		new Array("BRAVADA", "Bravada"),
		new Array("CUTLASS", "Cutlass"),
		new Array("EIGHTY EIGHT", "88"),
		new Array("INTRIGUE", "Intrigue"),
		new Array("SILHOUETTE", "Silhouette")


	),
	new Array(

		new Array("AZTEK", "Aztek"),
		new Array("BONNEVILLE", "Bonneville"),
		new Array("FIREBIRD", "Firebird"),
		new Array("GRAND AM", "GRAND AM"),
		new Array("GRAND PRIX", "GRAND PRIX"),
		new Array("MONTANA", "Montana"),
		new Array("SUNFIRE", "Sunfire")

	
	),
	new Array(

		new Array("ESTEEM", "Esteem"),
		new Array("GRAND VITARA", "Vitara"),
		new Array("SWIFT", "Swift")

	),
	new Array(
		new Array("Any", "%")
	)


);

function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem) {
	var i, j;
	var prompt;

	// empty existing items
	for (i = selectCtrl.options.length; i >= 0; i--) {
		selectCtrl.options/[i/] = null; 
	}
	prompt = (itemArray != null) ? goodPrompt : badPrompt;
	if (prompt == null) {
		j = 0;
	} else {		
		selectCtrl.options[0] = new Option(prompt);
		j = 1;
	}
	if (itemArray != null) {
		// add new items
		for (i = 0; i < itemArray.length; i++) {
			selectCtrl.options[j] = new Option(itemArray[i][0]);
			if (itemArray[i][1] != null) {
				selectCtrl.options[j].value = itemArray[i][1]; 
			}
			j++;
		}
		// select first item (prompt) for sub list
		selectCtrl.options[0].selected = true;
	}
}
</SCRIPT>
</head>

<div align = "Center">
<font face="Arial" size="4" color="#009900">
SELECT YOUR VEHICLE TYPE:</font><br><P>
<table border = "0">
<tr>
<td align = "Center" width = "250">
<font face="Arial" color="#0000FF">
NEW VEHICLE:</font>
			<FORM METHOD="post" ACTION="new.cfm">
			<div align = "left">
	&nbsp;&nbsp;MAKE: <SELECT NAME="Make" onChange="fillSelectFromArray(this.form.Model, ((this.selectedIndex == -1) ? null : modelinfo[this.selectedIndex-1]));">
			<OPTION VALUE="6">ANY
			<OPTION VALUE=1>BUICK
			<OPTION VALUE=2>CHEVROLET
			<OPTION VALUE=3>OLDSMOBILE
			<OPTION VALUE=4>PONTIAC
			<OPTION VALUE=5>SUZUKI


			</SELECT>
			<p>
			MODEL: <SELECT NAME="Model" SIZE="1">
			<OPTION VALUE="%">ANY


			<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
			<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
			<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
			<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
			<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
			</SELECT><p>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT TYPE="Submit" VALUE="GET IT"></form>

See it in action

So for that console game comparison they're probably using similar logic, only instead of filling in a select list they are filling in a table cell.




<Edited by aspen on 01-08-2001 at 02:04 PM>

[Hierophant]

It is using DHTML. The actual implementation is similar to text boxes that change in scripts from DynamicDrive.com.

However instead of being triggered by the onMouseOver event it is triggered by the onChange event of the form tag.

[Sparkie]

I still don't really understand it.. I am by no means a Javascript wizard. Of course, if some kind soul out there would like to help me customize such a script, I'd be eternally grateful. I'd even make a logo or banner for you in exchange

Or if you can point me to a script on Dynamic Drive which can do this, I might be able to sort through that.

/me thinks I've gotten in waaay over my head this time!

[isuru]

If no one else has done it, I'll give it a go.

I recently learnt Javascript and I think I know how to do it

Sparkie, if I figured it out, do you want me to email the code to you or just post it here?

[diacono]

i'm no js wizrd either but i do remember making to following page http://www.knotthat.com/new.html which does something similar.

i'm sure you could just mix a pull down menu with it to get what you want... (the messy way)

but because it uses layers its a mess with nn, try it out yourself.


ps. i got the code from http://www.dynamicdrive.com