Often I only want a site visitor to make a single menu choice, but need their selection to populate a number of items instead of just the usual single option value. Also, I usually don’t even want them to see what their single selection has spawned such as prices changes in a shopping cart, thus eliminating just asking them for all the values.

So here is how I take advantage of using the option element’s LABEL as well as ID and TITLE to define more values.

First the form’s select pulldown menu options – note the addition of ID and TITLE tags to give us our additional values:

<option id=”Op1″ title=”01″ value=”100″>Option 1 </option>
<option id=”Op2″ title=”02″ value=”200″>Option 2 </option>
<option id=”Op3″ title=”03″ value=”300″>Option 3 </option>

Now the JavaScript that makes it happen:

<script>
function changeValues(ID,VALUE,LABEL,TITLE)
{
document.getElementById(“idvar”).value = ID;
document.getElementById(“valuevar”).value = VALUE;
document.getElementById(“labelvar”).value = LABEL;
document.getElementById(“titlevar”).value = TITLE;
}

</script>

Now to call the function, we need to add an onChange command to the select element, see how it is calling the ID, VALUE, LABEL(text) and TITLE:

<select name=”options” onChange=”changeValues(this.options[this.selectedIndex].id,
this.options[this.selectedIndex].value,this.options[this.selectedIndex].text,
this.options[this.selectedIndex].title);”>

Now here is the full code put all together:

<script language=”JavaScript”>
<!–
function changePrice(ID,VALUE,LABEL,TITLE)
{
document.getElementById(“idvar”).value = ID;
document.getElementById(“valuevar”).value = VALUE;
document.getElementById(“labelvar”).value = LABEL;
document.getElementById(“titlevar”).value = TITLE;
}

–>
</script>

<select name=”options” onChange=”changeValues(this.options[this.selectedIndex].id,
this.options[this.selectedIndex].value,
this.options[this.selectedIndex].text,
this.options[this.selectedIndex].title);”>
<option value=”100″ id=”Op1″ title=”01″>Option 1
<option value=”200″ id=”Op2″ title=”02″>Option 2
<option value=”300″ id=”Op3″ title=”03″>Option 3
</select>

ID: <input name=”idvar” id=”idvar” type=”text”>
VALUE: <input name=”valuevar” id=”valuevar” type=”text”>
LABEL: <input name=”labelvar” id=”labelvar” type=”text”>
TITLE: <input name=”titlevar” id=”titlevar” type=”text”>

(Please note that the fields you pass the values to can easily be changed to hidden type instead of text so the visitor doesn’t even see them.)

Click here to see a demo

Ever had people gripe because the second line of a list item doesn’t align under the bullet correctly? (This is only a problem in IE by the way – Firefox does the work for you.)

So here is an example of the problem (remember if your not viewing in IE you won;t see anything wrong.) :

Here is how I fixed it, first the code:

<li>Over 50 years of staffing </li>
<li class=”bullet-hidden”><span class=”bullet-visible”>industry knowledge</span></li>

Then the CSS styles:

.bullet-visible {
visibility:visible;
}

.bullet-hidden {
visibility:hidden;
}

If for some reason you can define the style sheets or don;t want ot you can do it directly in the code as follows:

<li>Over 50 years of staffing </li>
<li style=”visibility: hidden;”><span style=” visibility:visible;”>industry knowledge</span></li>

And abracadabra:

It’s common these days to take advantage of CSS Style Sheets to replace your headers like <H1> and <H2> with images. While this makes sites more attractive it also hurts some of your search engine value by losing the keywords that could be used in those important headers.

Well here is how to use images and still get your keywords picked up by the search engines.

<style type=”text/css”>
h1 {
padding-top: 35px; /* height of the replacement image */
height: 0px;
overflow: hidden;
background-image:url(“image.gif”);
background-repeat: no-repeat;
}
</style>

<h1>Keywords here</h1>

In this example your pretty image will be used but your keywords will still get picked up by the search engines. The nice thing about this approach is that you can actually get some keywords in there that you might not been able if you weren’t using images.

A handy trick I have been using since IE 7 came out and all of sudden my css was being read a tad differently across each of these browsers: IE6, IE7 and Firefox.

Typically I first design a stylesheet for Internet Explorer, then use a conditional statement to add a second stylesheet where I only include those css items that need to be modified for non-IE browsers – namely Firefox, then I place the two stylesheet calls in the <head> like this:

<link href=”style.css” rel=”stylesheet” type=”text/css” />
<![if !IE]>
<link href=”not-ie.css” rel=”stylesheet” type=”text/css” />
<![endif]>

I list them in that order because only IE reads these codes so in IE it only reads the “style.css”, but in Firefox it reads the “style.css” first then writes over what ever styles are renamed in “non-ie.css”

Here are other conditional comments you can use and what they stand for if you need to get more exact on which browser you are targeting:

<!–[if IE]>
If browser is Internet Explorer<br />
<![endif]–>
<!–[if IE 5]>
If browser is Internet Explorer 5<br />
<![endif]–>
<!–[if IE 5.0]>
If browser is Internet Explorer 5.0<br />
<![endif]–>
<!–[if IE 5.5]>
If browser is Internet Explorer 5.5<br />
<![endif]–>
<!–[if IE 6]>
If browser is Internet Explorer 6<br />
<![endif]–>
<!–[if IE 7]>
If browser is Internet Explorer 7<br />
<![endif]–>
<!–[if gte IE 5]>
If browser is Internet Explorer 5 and up<br />
<![endif]–>
<!–[if lt IE 6]>
If browser is Internet Explorer lower than 6<br />
<![endif]–>
<!–[if lte IE 5.5]>
If browser is Internet Explorer lower or equal to 5.5<br />
<![endif]–>
<!–[if gt IE 6]>
If browser is Internet Explorer greater than 6<br />
<![endif]–>
<![if (IE 6)|(IE 7)]>
If browser is Internet Explorer 6 OR 7 ( | is the OR operator )
<![endif]–>
<![if (gt IE 5)&(lt IE 7)]>
If browser is Internet Explorer 5, 5.5 OR 7 ( & is an AND operator but with the gte and lt it is used as a BETWEEN method )
<![endif]–>

Conditional comments are preferable to weightier browser detection scripts and are cross-browser friendly, so don’t forget that you can use these conditional comments to also include or exclude whatever code you want – not just stylesheets.