Licensed under the Apache Software License 2.0

This component may be obtained, modified and distributed free of charge for personal as well as commercial use. Please see the license for the complete terms and exact wording.

2006-05-28: Changed license to Apache Software License 2.0.


The old Cool Button component was created a long time ago for Internet Explorer 4.0 and it has a few issues. The main issue is that it does not separate the behavior from the look. This made it pretty hard to modify the colors because one had to modify the javascript source code. Another annoying issue is that the visual state broke with every new version of IE due to changes in the box model as well as changes to the filters.

New features

The biggest change to the buttons is that all the different states are represented by css classes to make it easier to maintain. Another important feature is the support for Mozilla. (IE Emu is needed.) Other new features are keyboard navigation (IE only) as well as a better object model. All methods and properties are now expando methods / properties of the actual HTML element.

Page Setup

To use the cool buttons you need to include 3 (!) files. The first file to include is the CSS file to use. This file can be replaced with another CSS file that gives another look for example.

<link type="text/css" rel="StyleSheet" href="cb2.css">

Notice that the css file points to an image called "cbback.gif" that is used as the background image of a pressed toggle button. You should update this to point to where your image is located.

The second file to include is the IE Emu file. This file is only needed for Mozilla so to prevent this file from being loaded in IE you can set the language attribute to "JavaScript1.5".

<script type="text/javascript" language="JavaScript1.5" src="ieemu.js"></script>

Last but not least we need to include the actual js file for the buttons. This should be done after the IE Emu file or otherwise you will get an error in Mozilla.

<script type="text/javascript" src="cb2.js"></script>

Creating Buttons

Any element can be a button. To make an element work as a cool button you need to call the function createButton with the element as the argument. This can be done directly after the element has been created.

<span id="mySpanButton">Hello World</span>

This looks like this: Hello World

Notice that even though the button above is a SPAN I've found that TDs usually works best different browsers and versions.

Defining action

This version of the cool buttons also supports keyboard navigation and a button can be invoked using either space or the enter key as well as clicking it. Instead of using the onclick you should use the custom (fake) event called onaction. This event takes the enabled state of the button into account. The onclick event does not.

<span id="mySpanButton2" onaction="alert(this.innerHTML)">Hello World</span>

This looks like this: Hello World

Notice that this event cannot be caught using addEventListener or attachEvent because it is not a real browser event. It is just an expando property.

Disabling the button

When the button is created some expando properties are added and one is the method setEnabled.

Enable Disable Test Button

Show code for this

Toggle Buttons

Any button can be changed to a toggle button at any time by calling setToggle. Once the button is in toggle mode one can also set the value using setValue. Notice that if toggle is false the value will always be false.

A button that is acting as a toggle button fires a fake event called onchange when the value changes. To get the current value of a button you should use the method getValue(). (Notice that all set methods have get methods as well.)

Value to true Value to false Test Button

Show code for this

Always up buttons

The buttons can also be set in an always up mode which means that hover state is used all the time. This is done using the setAlwaysUp method.

Always up to true Always up to false Test Button

Show code for this

Keyboard Navigation

IE5 allows any element to receive focus if its tabIndex property is set to greater than -1. This applies to the buttons as well with one small difference. The tabIndex should be set to 1 or greater to show the focused state correctly. Once a button is focused you can use the enter key or the space key to invoke the button.

Below is the same set of buttons as we had for the toggle demo but each of them have a tabIndex of 1.

Value to true Value to false Test Button

Show code for this

Cool Button 2
The CSS Classes
Demo Page

Author: Erik Arvidsson