Inside Technique : WebFX DHTML Demos : Coolbar Toolbar

Create html toolbars. This cool bar script supports standard buttons, toggle buttons, and the ability to selectively enable and disable individual buttons. The cool bar uses simple onmouseover/out and some element tree checking.

Draggable Coolbar Demonstration requires Internet Explorer 4.0 or later

To use you need the coolbuttons.js library. To make a button, add the class="coolButton" to an element (this can be any element although some elements may not work very well). All images are gray while the mouse isn't over the button no matter if they are nested within other tags.

To group buttons as in the above example, place SPAN tags inside a DIV that has the class="coolBar". Another effective way to group buttons is to include them inside of a TABLE element and add the class="coolbar" to each table cell (TD element). This causes the browser to automatically size the buttons for you.

The drag and drop is added using the genericMove.js function that was discussed earlier in the genericMove article.

Sample

Demonstration requires Internet Explorer 4.0 or later

Enabling and Disabling Buttons

You can also disable/enable Cool Button 1 above using disable(id) and enable(id). To initially disable an element, you must call the disable(id) function. It isn't sufficient to just add the HTML attribute DISABLED. We initialized the above cool bar by including the following script on the page immediately after the toolbars definition:

<script>
addToggle(coolButton2); // Create a toggle button. Discussed below
disable(coolButton1); // Disable a button
</script>

Just as easy as you can disable a button, you can reenable the button by calling the enable method. With the following cool bar, you can enable and disable the button above.

Demonstration requires Internet Explorer 4.0 or later

The disable(id) does not actually happen until the document has finished rendering. The reason for this the processing of the button must be complete before you can manipulate it. You can still call the disable(id) anytime because this is taken care of in the script but it won't cancel mouse clicks until the document is done.

Toggle Buttons

You can also toggle Cool Button 2 using the function addToggle(id) or remove the toggle with removeToggle(id). If you want to change the state of the button (pressed or not) you can call the button's click() method, id.click(), to simulate a click, or call the toggle(id) function directly.

Demonstration requires Internet Explorer 4.0 or later

The Coolbar

Below is the HTML used to create the cool bar used by the initial example:

<table class="coolBar" style="position: relative; z-index: 99; top: 0px; left: 10px;" id="toolbar1" cellpadding=0>
<tr>
 <td style="width: 3px; padding: 0px;"><span class="handle" for="toolbar1"></span></td>
 <td class="coolButton" onclick="window.open('http://www.insideDHTML.com', '_top')">
   <nobr><img src="../ts06/images/home.gif">Home</nobr>
 </td>
 <td class="coolButton" onclick="alert('This can do anything')">
   <nobr><img src="../ts06/images/htmlicon.gif"> <b>Cool Button</b></nobr>
 </td>
</tr>
</table>

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