This is just a plain dockable container

This was created by a request from one of our readers. It is basically the docking code extracted from the DHTML Menu but I've cleaned up the code and added docking to the left and right as well. This script is basically a drag and drop script so I recommend that you read the article about Generic Move first.

Docking

Docking is created by checking the position in the drag part of the drag and drop procedure. If it is close to the top I set a global variable called toolbarPos to "top". Then I just call a function called fixPos() that fixes the size and position of the toolbar and the content area. Below is the code that test the position during the move.

function dockBarOnMouseMove() {
   if(dragging) {
      // Top
      if((window.event.clientY) <= snapVertSize
         && toolbarPos != "left" && toolbarPos != "right") {
         toolbarPos = "top";
         fixSize();
      }

      // Bottom and Left...
		
      // Right
      else if (window.event.clientX >= document.body.clientWidth - snapHorizSize
         && toolbarPos != "top" && toolbarPos != "bottom") {

         toolbarPos = "right";
         fixSize();	
      }
      else {	// Float
         toolbar.style.left = window.event.clientX;
         toolbar.style.top = window.event.clientY - ty;
         toolbarPos = "float";
         fixSize();
      }

      window.event.returnValue = false;
      window.event.cancelBubble = true;
   }
}

Then the actual sizes of the toolbar is calculated in the fixSize() function. I'll only show part of this function because it is so easy

function fixSize() {
   // Some error testing

   switch (toolbarPos) {
      case"top":
      //...

      case "right":
      toolbar.style.border = "0 solid buttonface";
      toolbar.style.width = horizDockWidth;
      toolbar.style.height = "100%";
      toolbar.style.top = 0;
      toolbar.style.left = document.body.clientWidth - horizDockWidth;

      contentDiv.style.top = 0;
      contentDiv.style.left = 0;
      contentDiv.style.height = "100%";
      contentDiv.style.width = document.body.clientWidth - horizDockWidth;

      handle.style.height = 3;
      handle.style.width = horizDockWidth -2;
      break;

      case "float":
      //...
   }
}

The next step is to set up the event handlers but this is nothing new so I'll jump directly to setting the page up.

Docking
Set up the page
Combine it with Cool Buttons

Author: Erik Arvidsson