Inside Technique : WebFX DHTML Demos : SelectBox Demo

Below we created two custom select boxes. The dropdown version uses the coolButton script (for the button), adds drag support using the Generic Move script, and the swipe.js for the drop-down animation. This version calls on another CSS file and overloads the description of how the options should be displayed when selected/hovered:

This demonstration requires Internet Explorer 4.0

Examining the HTML you will notice that we inserted it statically rather than used the generator scripts. This allowed us complete control over the drop-down's appearance.

<!-- Styles and scripts necessary -->
<link rel="STYLESHEET" type="text/css" href="menuLike.css">
<script type="text/javascript" src="select.js"></script>
<script src="genericMove.js" type="text/javascript"></script>
<script src="../ts07/coolbuttons.js" type="text/javascript"></script>
<script src="swipe.js" type="text/javascript"></script>
<script type="text/javascript">
<!--

document.onmousedown = initDown; //some extra handling for the genericMove 
document.onmouseup   = initUp;
document.onmousemove = initMove;

function initDown() {
	doDown();
	moveme_onmousedown();
}

function initUp() {
	doUp();
	moveme_onmouseup();
}

function initMove() {
	moveme_onmousemove();
}

// Override the CSS used when hovering over elements

var overOptionCss = "background: buttonhighlight; color: black;\
					border: 1 inset window;\
					padding-left: 2; padding-right: 0; padding-bottom: 0; padding-top: 2";
var sizedBorderCss = "1 outset buttonhighlight";


//-->
</script>
<STYLE>
<!--
/* Style for the grab handle */
.handle	{cursor: move;
		border-top: 1px solid buttonhighlight;
		border-left: 1px solid buttonhighlight;
		border-bottom: 1px solid buttonshadow;
		border-right: 1px solid buttonshadow;
		width: 3px;
		height: 100%;
		margin-left: 1px;
		margin-right: 3px;}
-->
</STYLE>

<!-- Create the coolbar with the dropdown -->
<table class="coolBar" style="position: relative; z-index: 99; left: 10px;" id="toolbar1" cellpadding=0 cellspacing=0>

  <!-- The grab-handle for dragging -->
  <td style="width: 3px; padding: 0px;"<
    >span class="handle" for="toolbar1"></span>
  </td>
  <td>
    <!-- Create the drop-down -- >
    <span class="select" id="select1" siZE="1" onchange="alert(this.options[this.selectedIndex].value)" style="position: relative; ">
      <table class="selectTable" cellspacing="0" cellpadding="0"
             onclick="toggleDropDown(this.parentElement)" STYLE="border: none">
        <tr>
          <td class="selected"> </td>
          <td align="CENTER" valign="MIDDLE" class="coolButton">
              <span style="position: relative; left: 0; top: -2; width: 100%;">6</span></td>
        </tr>
      </table>
      <!-- Create the drop-down list. By defining it manually, 
              we have complete control over its appearance -->
      <div class="dropDown" onclick="optionClick()" onmouseover="optionOver()" onmouseout="optionOut()">
        <div class="option" value="1" nowrap><img src="images/foldericon.gif" width=16 height=16 border=0 align="absmiddle"> Item 1</div>
        <div class="option" value="2" nowrap><img src="images/foldericon.gif" width=16 height=16 border=0 align="absmiddle"> Item 2</div>
        <div class="option" value="3" nowrap><img src="images/foldericon.gif" width=16 height=16 border=0 align="absmiddle"> Item 3</div>
        <div class="option" value="4" nowrap><img src="images/foldericon.gif" width=16 height=16 border=0 align="absmiddle"> Item 4</div>
        <div class="option" value="5" nowrap><img src="images/foldericon.gif" width=16 height=16 border=0 align="absmiddle"> item 5</div>
        <div class="option" value="6" nowrap><img src="images/foldericon.gif" width=16 height=16 border=0 align="absmiddle"> item 6</div>
        <div class="option" value="7" nowrap><img src="images/foldericon.gif" width=16 height=16 border=0 align="absmiddle"> item 7</div>
      </div>
    </span>
  </td></tr>
</TABLE>

Custom List Box

In the following example is similar to the above by using the coolbutton script to handle the button's appearance. We also supplied a size attribute that turns the drop-down combo box into a list box.

This demonstration requires Internet Explorer 4.0

As demonstrated, by combining the different WebFX scripts you now have limitless control over your user-inteface.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.