SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Skills to Pay the Bills Sparkie's Avatar
    Join Date
    Jul 1999
    Location
    A cave with 47 computers and an internet feed
    Posts
    3,559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  2. #2
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,939
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the code in question:

    Code:
    <!-------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.

    Code:
    <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>
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  3. #3
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Wayne Luke
    ------------


  4. #4
    Skills to Pay the Bills Sparkie's Avatar
    Join Date
    Jul 1999
    Location
    A cave with 47 computers and an internet feed
    Posts
    3,559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  5. #5
    SitePoint Addict isuru's Avatar
    Join Date
    Nov 2000
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    cd /pub; more beer diacono's Avatar
    Join Date
    Dec 2000
    Location
    Horsham, West Sussex, UK
    Posts
    277
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •