Floating/movable Table of Contents

I've had the idea that it would be nice if the TOC would be visible at all times, thus making navigation in a document a bit easier. Based on version: 2005-02-18a

• If document page is scrolled down/up, left/right the TOC will automatically adjust its position
• TOC can be moved around on page - to reposition TOC move mouse cursor over TOC area and press and hold down Ctrl key - now move TOC ;) - to end move release Ctrl

• Firefox 1.0.3 [ Windows XP Pro SP2 / Linux ]
• IE 6 [ Windows XP Pro SP 2 ]

div.float_toc {
  margin: 0px;
  float:right;
  width: 200px;
  font-size: 80%;
  clear:both;
  z-index: 1;
  position: absolute;
}

$conf['float_toc']   = 1;                 //produce toc that is visibile at all times and can be moved around in doc? 0|1

• new js include

//after this
<script language="JavaScript" type="text/javascript" src="<?=getBaseURL()?>script.js"></script>
//added this
<script language="JavaScript" type="text/javascript" src="<?=getBaseURL()?>toc.js"></script>

• function toc_html($toc) modfications

function html_toc($toc){
  global $lang;
  global $conf; // added this
 
  $ret  = '';
 
  // replaced this: $ret .= '<div class="toc">'; with following if block
  if ( $conf['float_toc'] == 1 ){
    $ret .= '<div class="float_toc" id="tocbox">';
  }else{
    $ret .= '<div class="toc">';
  }
 
  $ret .=   '<div class="tocheader">';
  $ret .=      $lang['toc'];
  $ret .=     ' <script type="text/javascript">';
  $ret .=     'showTocToggle("+","-")';
  $ret .=     '</script>';
  $ret .=   '</div>';
  $ret .=   '<div id="tocinside">';
  $ret .=   html_buildlist($toc,'toc','html_list_toc');
  $ret .=   '</div>';
  $ret .= '</div>';
  return $ret;
}

/**
* Floating/movable TOC
*
* @author Oliver S6ro <seem.iges@mail.ee>
* @copyright Copyright (C) 2005, Oliver S6ro
* @license GPL v2 http://www.gnu.org/copyleft/gpl.html
*/
 
// GLOBALS
// Id of first div element of TOC.
var TOC_ID = "tocbox";
 
// State flag for mouse cursor. True if in TOC area otherwise false.
var inToc = false;
 
// State flag for Ctrl. True if inToc == true && Ctrl is held down, otherwise false.
var tocCtrlDown = false;
 
// Initial TOC x (style.left), y (style.top) coordinates
var tocXOffset = 1;
var tocYOffset = 100;
 
// Store difference between mouse X,Y and TOC x,y if Ctrl is first pressed in TOC area.
var tocXDiff = 0;
var tocYDiff = 0;
 
// Quick browser check
var isIE = document.all ? true : false;
 
 
/**
* Called if mouse cursor is over TOC area.
*/
function tocOver()
{
    inToc = true;
    tocCtrlDown = false;
}
 
/*
* Called if mouse cursor moved out of TOC area.
*/
function tocOut()
{
    inToc = false;
    tocCtrlDown = false;
}
 
/**
* Move TOC - duh ;)
*/
function moveToc( pEvent )
{
    var TOC = document.getElementById( TOC_ID );
 
    if ( TOC && inToc )
    {
        // TOC found in page and mouse cursor in TOC area
        if ( tocCtrlDown )
        {
            // Ctrl is held down - move sucker ;)
            if ( !isIE )
            {
                var tocX = pEvent.pageX - tocXDiff;
                var tocY = pEvent.pageY - tocYDiff;
 
                tocCtrlDown = pEvent.ctrlKey;
            }
            else
            {
                var tocX = window.event.clientX - tocXDiff;
                var tocY = window.event.clientY - tocYDiff;
 
                tocCtrlDown = window.event.ctrlKey;
            }
 
            tocXOffset = tocX;
            tocYOffset = tocY;
 
            TOC.style.left = new String( tocX + "px" );
            TOC.style.top = new String( tocY + "px" );
        }
        else
        {
            // check if Ctrl is pressed down, is so get x,y diffs
            if ( !isIE )
            {
                tocCtrlDown = pEvent.ctrlKey;
                if ( tocCtrlDown )
                {
                    tocXDiff = pEvent.pageX - parseInt( TOC.style.left );
                    tocYDiff = pEvent.pageY - parseInt( TOC.style.top );
                }
            }
            else
            {
                tocCtrlDown = window.event.ctrlKey;
                if ( tocCtrlDown )
                {
                    tocXDiff = window.event.clientX - parseInt( TOC.style.left );
                    tocYDiff = window.event.clientY - parseInt( TOC.style.top );
                }
            }
        }
    }
 
    return true;
}
 
/**
* Firefox/Mozilla have limited support of onscroll so instead this function
* is used and called every X ms specified in initTocScroll.
*/
function tocScroll()
{
    var TOC = document.getElementById( TOC_ID );
    if ( TOC )
    {
        if ( !inToc )
        {
            if ( !isIE )
            {
                var tocX = tocXOffset + window.pageXOffset;
                var tocY = tocYOffset + window.pageYOffset;
            }
            else
            {
                var tocX = tocXOffset + document.documentElement.scrollLeft;
                var tocY = tocYOffset + document.documentElement.scrollTop;
            }
 
            TOC.style.top = new String( tocY + "px" );
            TOC.style.left = new String( tocX + "px" );
        }
    }
}
 
/**
* Scrolling setup
*/
function initTocScroll()
{
    var TOC = document.getElementById( TOC_ID );
    if ( TOC )
    {
        TOC.style.left = new String( tocXOffset + "px" );
        TOC.style.top = new String( tocYOffset + "px" );
 
        TOC.onmouseover = tocOver;
        TOC.onmouseout = tocOut;
 
        var tid = setInterval( "tocScroll()", 1 );
    }
 
    return true;
}
 
 
/**
* Capture document events and set handlers
*/
if ( !isIE ) document.captureEvents( Event.MOUSEMOVE );
document.onmousemove = moveToc;
window.onload = initTocScroll;