A More Complex Way of Building Replacement Combo Boxes - Increasing our Options

(Page 2 of 4 )

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 >>
 

More Style Sheets Articles
More By Dan Wellman

Comments On: A More Complex Way of Building Replacement Combo Boxes

· In the first of these two articles, we looked at a quick and easy way of replacing...   >>> Post your comment now!