STYLE SHEETS

A More Complex Way of Building Replacement Combo Boxes

In part one we looked at an easy way to recreate the functionality of combo boxes, while also creating the ability to style them effectively across browsers. In this part, we're going to work on getting rid of the hard coding of option values in the event handlers for the options, and look at dealing with combo boxes that have more options. You'll need the source files from part one to build on, and your trusty text editor at your side.

Author Info:

By: Dan Wellman

Poor Best

Rating:

/ 3

April 10, 2007

TABLE OF CONTENTS:

In this example, there are just ten options, and it is easy enough to include them directly in the page while still being entirely visible, even on displays with low resolution. Many more options, though, and the options div would become taller than the display. One thing we can do is break the combo div down into smaller divs, and allow the user to access them as necessary. Add the code in bold below to the replacementcombos.html file:

<div id="combodiv">
<a class="option" href="#" onclick="setOption(this)">Option 1</a>
<a class="option" href="#" onclick="setOption(this)">Option 2</a>
<a class="option" href="#" onclick="setOption(this)">Option 3</a>
<a class="option" href="#" onclick="setOption(this)">Option 4</a>
<a class="option" href="#" onclick="setOption(this)">Option 5</a>
<a class="option" href="#" onclick="setOption(this)">Option 6</a>
<a class="option" href="#" onclick="setOption(this)">Option 7</a>
<a class="option" href="#" onclick="setOption(this)">Option 8</a>
<a class="option" href="#" onclick="setOption(this)">Option 9</a>
<a class="option" href="#" onclick="setOption(this)">Option 10</a>
<a class="option" href="#" onclick="openNextPage()">more options -></a>
</div>
<div id="combodiv2">
<a class="option" href="#" onclick="setOption(this)">Option 11</a>
<a class="option" href="#" onclick="setOption(this)">Option 12</a>
<a class="option" href="#" onclick="setOption(this)">Option 13</a>
<a class="option" href="#" onclick="setOption(this)">Option 14</a>
<a class="option" href="#" onclick="setOption(this)">Option 15</a>
<a class="option" href="#" onclick="setOption(this)">Option 16</a>
<a class="option" href="#" onclick="setOption(this)">Option 17</a>
<a class="option" href="#" onclick="setOption(this)">Option 18</a>
<a class="option" href="#" onclick="setOption(this)">Option 19</a>
<a class="option" href="#" onclick="setOption(this)">Option 20</a>
</div>

So now we have two combo divs and an extra a element at the bottom of the first div. We'll need some additional CSS for the second div, and I've adjusted each div so that it is big enough to hold all 11 options without a scroll bar. Alter the combo.css file so that the selectors that match the option divs are as follows. I've highlighted the changes in bold to make them obvious:

#combodiv {
   padding:0px;
   display:none;
   position:relative;
   left:151px;
   height:200px;
   width:120px;
   border-style:solid;
   border-width:0px 1px 1px 1px;
   border-color:blue;
   background-color:white;
}

#combodiv2 {
   padding:0px;
   display:none;
   position:relative;
   top:-201px;
   left:272px;
   height:200px;
   width:120px;
   border-style:solid;
   border-width:1px 1px 1px 1px;
   border-color:blue;
   background-color:white;
}

Finally, the combo.js file will need an extra line of code in the setOption() function to close both option divs, as well as a new function to handle a click on the more options > option:

function setOption(element) {
   var selection = element.childNodes[0].nodeValue;
   var combo = document.getElementById('combofield').value = selection;
   document.getElementById('combodiv').style.display = "none";
   document.getElementById('combodiv2').style.display = "none";
   comboopenflag = "off";
}

function openNextPage() {
document.getElementById('combodiv2').style.display = "block";
}

Next: Data Storage Format >>