Combining scripts

The first thing to do when combining scripts is to find the conflicts. These are most often event handling conflicts but there could be name conflicts and other conflicts as well.

IE5 has added a really nice solution that will remove the event handling conflict and this is done with a special method called attachEvent that takes two arguments. The first is the event name and the second is the function to call when the event occurs. In IE4 (and Navigator) you have to create a special function that replaces the event handlers and this function then calls the separate event handlers. This is the method I'll use (so this will work in IE4). But first you need to include the scripts and set the variables for the dockbar.

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

var floatWidth = 97;
var floatHeight = 26;    // extra 4 for the border

var snapHorizSize = 22;  // This is how far from the edge the
var snapVertSize = 22;   // the mouse is before the toolbar docks

var horizDockWidth = 22; // When docked to the left or right
var vertDockHeight = 22;

var toolbarPos = "top";  // Start at this position

</script>

Defining new event handlers

When looking at the code for the two scripts I found that both scripts use the document.onmousedown and document.onmouseup events so I'll have to overload these event handlers.

document.onmousedown = newDownHandler;
document.onmouseup = newUpHandler;

function newDownHandler() {
   doDown();
   dockBarOnMouseDown();
}

function newUpHandler() {
   doUp();
   dockBarOnMouseUp();
}

Creating the toolbar

This is really simple. All you need to do is create some spans with class coolButton and remember to define the width or the borders wont show (IE bug). I set the following style declaration:

.coolButton	{width: 20; height: 20; margin: 1px;}

The html for the toolbar looks like this:

<div id="toolbar" onselectstart="return false"><span id="handle" title="Drag to move the container"></span
><span class="coolButton" title="Previous" onclick="window.location='dockbar2.shtml'"><img src="/images/arrowleft.gif" align="absmiddle" width=16 height=16></span
><span class="coolButton" title="Next" id="next"><img src="/images/arrowright.gif" align="absmiddle" width=16 height=16></span
><span class="coolButton" title="Home" onclick="window.open('/index.htm/','_top')"><img src="/favicon.gif" width=16 height=16 align="absmiddle"></span
><span class="coolButton" title="Discuss this article"><img src="/images/desktop.gif" align="absmiddle" width=16 height=16></span
></div>

The reason for the compact code and the odd line breaks is that I don't want any white space between the buttons.

Docking
Set up the page
Combine it with Cool Buttons