How would I do this?

**espfutbol98** · 03-21-2010 01:37 PM

First of all, I have a website with different languages and different types of materials depending on the language. I was wondering how to make a selector somewhat what Rosetta Stone has (screenshot included). I know Rosetta Stone is written in Java I think but I want to know how I would achieve the same function out of Javascript and possibly AJAX.

Now, I will describe how the box works because I don't expect everyone to have used the expensive Rosetta Stone program. First, there's a table with 2 columns and a continue button on the bottom. You first select a language from the left column. Until that is done, the right column is blank. Also when you click/hover the language/material the background changes color of the whole <li>. The continue button is disabled until both language and material are selected.

Thanks for the help!

**essellar** · 03-21-2010 05:03 PM

Forget Ajax. Unless you have a truly mind-bogglingly large set of choices for the user, Ajax is just a wasted trip to the server. All you need is a compact bit of JavaScript, two <select> fields, a bit of CSS and -- worst-case scenario -- some server-side code in your favorite language to generate the JavaScript arrays you need to use on the web page.

To make the <select> appear like the lists on the Rosetta Stone example, set a size attribute (say size="10") that will display the number of elements you need in the longer list. If you test plain HTML at this point, you'll see a scroll bar on the right-hand side of each, and because of the nature of the field widget you'll need to put a wrapper div around each of the fields. Using CSS, make both the field and the wrapper div the same height, but make the wrapper twenty or thirty pixels less in width and set its overflow to hidden. Make the margin-right on the select elements negative twenty or thirty (whatever you chose as the width difference above) to make sure that the scroll bar neatly tucks itself away under the edge of the wrapper. Set the border of the select to 0, and use a border on the wrapper if you want an outline. Et, voila (how does one add accented characters here?), you have usable fields that don't look like fields.

The language selector should have an onchange attribute to call a function that sets the options for the area selector (which can stay blank when the page is first loaded -- that is, you can add the <select></select> tags without having to add any options). The attribute would look something like this:

<select name="language" size="10" onchange="setAreaOptions(this)">

The individual language options would look like:

<option value="English">English</option>

and the function might look like this:

function setAreaOptions(langField) {
language = langField.options[langField.selectedIndex].value;
areaField = langField.form.elements["area"];
areaField.options.length = 0; //resets field to blank
areas = areaArray[language].split(";");
for (var i=0; i<areas.length; ++i) {
areaField.options[i] = new Option(areas[i], areas[i]);
}
}

As for the area array, it's just a matter of doing this:

areaArray = new Array();
areaArray["English"] = "Dogs;Cats;Elephants;Grapefruits;Mediaeval Literature;Obscure Laws";
areaArray["French"] = "Cheins;Chats;...";

and so forth. Your Continue button is just an <input type="submit"> that is loaded with a "disabled" attribute:

<input type="submit" name="submit" value="Continue" disabled>

The onchange of the area selector would set the disabled attribute of the button to false, which would enable the button. The rest is all CSS to make it look pretty -- or you could use a <button> or an <input type="image">, which will both operate the same way.

**espfutbol98** · 03-21-2010 06:32 PM

Alright, thanks for the help, this should get me started.

**espfutbol98** · 03-21-2010 07:58 PM

So far this is what I have but as you can see, it still has a ways to go and I'm a little stuck here:

HTML Code:

<html>
<head>
<style type="text/css">
html {
  background-color: rgb(193,189,177);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
.wrapper {
	position: absolute;
	overflow: hidden;
	margin-left: 350px;
	margin-right: -40px;
	margin-top: 0px;
	border-color: rgb(193,189,177);
	border-width: 1px;
	border-style: solid;
}
.wrapper2 {
	position: absolute;
	overflow: hidden;
	margin-right: -40px;
	margin-left: 650px;
	margin-right: -40px;
	margin-top: 0px;
	border-color: rgb(193,189,177);
	border-width: 1px;
	border-style: solid;
}
select {
  border: 0px;
}
#box {
  padding: 20px;
  margin-top: 200px;
  margin-left: 100px;
  margin-right: 100px;
  margin-bottom: 200px;
  background-color: rgb(249,249,247);
}
</style>
<script type="text/javascript">
	areaArray = new Array();
    areaArray["Chinese"] = "Basic;Aircrew";
    areaArray["Russian"] = "Navy;Civil Affairs";
	areaArray["Serbian"] = "Public Affairs;Weapons";
	areaArray["Arabic"] = "Marine Operations;Military Police";
	areaArray["Urdu"] = "Medical;Cordon & Search";
  function setAreaOptions(langField) {
    language = langField.options[langField.selectedIndex].value;
    areaField = langField.form.elements["area"];
    areaField.options.length = 0; //resets field to blank
    areas = areaArray[language].split(";");
    for (var i=0; i<areas.length; ++i) {
      areaField.options[i] = new Option(areas[i], areas[i]);
      }
  }
</script>
</head>
<body>
<div id="box">
  <div class="wrapper">
    <select name="language" size="5" style="width:200px;" onChange="setAreaOptions(this)">
      <option value="Chinese">Chinese</option>
      <option value="Russian">Russian</option>
      <option value="Russian">Serbian</option>
      <option value="Russian">Arabic</option>
      <option value="Russian">Urdu</option>
    </select>
  </div>
  <div class="wrapper2">
    <select size="5" style="width:150px;">
    	<option value=""></option>
    </select>
  </div>
  <input type="submit" name="submit" value="Continue" disabled="disabled" />
</div>
</body>
</html>

Thread: How would I do this?

LinkBack

Thread Tools

Display

How would I do this?

Re: How would I do this?

Re: How would I do this?

Re: How would I do this?

Posting Permissions