This is just a plain dockable container

Set up the page

First you need to include the file dockbar.js like this:

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

Then you should probably change some of the constants because most likely the default values wont fit your page. This should be added after the previous script tag.

<script type="text/javascript">

var floatWidth = 200;
var floatHeight = 24;    // extra 4 for the border

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

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

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


There is no need to include a CSS file because I've added the style information in the javascript file. The js file changes the following elements: BODY, #handle, #toolbar, #contentDiv, so if you want to set the style for them make sure you do it after the script tags.

The next step is to define the necessary HTML. First you need to add scroll="no" to the body tag. Then you should set up the toolbar and finally add the contentDiv. It should look something like this:

<body scroll="no" ...>
   <div id="toolbar"><span id="handle"></span>This is my toolbar content</div>

   <div id="contentDiv">
      <!-- The following script tag isn't necessary but it speeds up the layout-->
      <script type="text/javascript" src="dockbar.js">

      ... Here goes my content

Next I'll show you how to combine this script with the Cool Buttons script to make a real toolbar

Set up the page
Combine it with Cool Buttons