// JavaScript Document
   1. <script type="text/javascript"><!--  
   2. /* Script by: www.jtricks.com 
   3.  * Version: 20071017 
   4.  * Latest version: 
   5.  * www.jtricks.com/javascript/navigation/floating.html 
   6.  */  
   7. var floatingMenuId = 'onmyown';  
   8. var floatingMenu =  
   9. {  
  10.     targetX: -250,  
  11.     targetY: 10,  
  12.   
  13.     hasInner: typeof(window.innerWidth) == 'number',  
  14.     hasElement: typeof(document.documentElement) == 'object'  
  15.         && typeof(document.documentElement.clientWidth) == 'number',  
  16.   
  17.     menu:  
  18.         document.getElementById  
  19.         ? document.getElementById(floatingMenuId)  
  20.         : document.all  
  21.           ? document.all[floatingMenuId]  
  22.           : document.layers[floatingMenuId]  
  23. };  
  24.   
  25. floatingMenu.move = function ()  
  26. {  
  27.     floatingMenu.menu.style.left = floatingMenu.nextX + 'px';  
  28.     floatingMenu.menu.style.top = floatingMenu.nextY + 'px';  
  29. }  
  30.   
  31. floatingMenu.computeShifts = function ()  
  32. {  
  33.     var de = document.documentElement;  
  34.   
  35.     floatingMenu.shiftX =    
  36.         floatingMenu.hasInner    
  37.         ? pageXOffset    
  38.         : floatingMenu.hasElement    
  39.           ? de.scrollLeft    
  40.           : document.body.scrollLeft;    
  41.     if (floatingMenu.targetX < 0)  
  42.     {  
  43.         floatingMenu.shiftX +=  
  44.             floatingMenu.hasElement  
  45.             ? de.clientWidth  
  46.             : document.body.clientWidth;  
  47.     }  
  48.   
  49.     floatingMenu.shiftY =   
  50.         floatingMenu.hasInner  
  51.         ? pageYOffset  
  52.         : floatingMenu.hasElement  
  53.           ? de.scrollTop  
  54.           : document.body.scrollTop;  
  55.     if (floatingMenu.targetY < 0)  
  56.     {  
  57.         if (floatingMenu.hasElement && floatingMenu.hasInner)  
  58.         {  
  59.             // Handle Opera 8 problems  
  60.             floatingMenu.shiftY +=  
  61.                 de.clientHeight > window.innerHeight  
  62.                 ? window.innerHeight  
  63.                 : de.clientHeight  
  64.         }  
  65.         else  
  66.         {  
  67.             floatingMenu.shiftY +=  
  68.                 floatingMenu.hasElement  
  69.                 ? de.clientHeight  
  70.                 : document.body.clientHeight;  
  71.         }  
  72.     }  
  73. }  
  74.   
  75. floatingMenu.calculateCornerX = function()  
  76. {  
  77.     if (floatingMenu.targetX != 'center')  
  78.         return floatingMenu.shiftX + floatingMenu.targetX;  
  79.   
  80.     var width = parseInt(floatingMenu.menu.offsetWidth);  
  81.   
  82.     var cornerX =  
  83.         floatingMenu.hasElement  
  84.         ? (floatingMenu.hasInner  
  85.            ? pageXOffset  
  86.            : document.documentElement.scrollLeft) +   
  87.           (document.documentElement.clientWidth - width)/2  
  88.         : document.body.scrollLeft +   
  89.           (document.body.clientWidth - width)/2;  
  90.     return cornerX;  
  91. };  
  92.   
  93. floatingMenu.calculateCornerY = function()  
  94. {  
  95.     if (floatingMenu.targetY != 'center')  
  96.         return floatingMenu.shiftY + floatingMenu.targetY;  
  97.   
  98.     var height = parseInt(floatingMenu.menu.offsetHeight);  
  99.   
 100.     // Handle Opera 8 problems  
 101.     var clientHeight =   
 102.         floatingMenu.hasElement && floatingMenu.hasInner  
 103.         && document.documentElement.clientHeight   
 104.             > window.innerHeight  
 105.         ? window.innerHeight  
 106.         : document.documentElement.clientHeight  
 107.   
 108.     var cornerY =  
 109.         floatingMenu.hasElement  
 110.         ? (floatingMenu.hasInner    
 111.            ? pageYOffset  
 112.            : document.documentElement.scrollTop) +   
 113.           (clientHeight - height)/2  
 114.         : document.body.scrollTop +   
 115.           (document.body.clientHeight - height)/2;  
 116.     return cornerY;  
 117. };  
 118.   
 119. floatingMenu.doFloat = function()  
 120. {  
 121.     // Check if reference to menu was lost due  
 122.     // to ajax manipuations  
 123.     if (!floatingMenu.menu)  
 124.     {  
 125.         menu = document.getElementById  
 126.             ? document.getElementById(floatingMenuId)  
 127.             : document.all  
 128.               ? document.all[floatingMenuId]  
 129.               : document.layers[floatingMenuId];  
 130.   
 131.         initSecondary();  
 132.     }  
 133.   
 134.     var stepX, stepY;  
 135.   
 136.     floatingMenu.computeShifts();  
 137.   
 138.     var cornerX = floatingMenu.calculateCornerX();  
 139.   
 140.     var stepX = (cornerX - floatingMenu.nextX) * .07;  
 141.     if (Math.abs(stepX) < .5)  
 142.     {  
 143.         stepX = cornerX - floatingMenu.nextX;  
 144.     }  
 145.   
 146.     var cornerY = floatingMenu.calculateCornerY();  
 147.   
 148.     var stepY = (cornerY - floatingMenu.nextY) * .07;  
 149.     if (Math.abs(stepY) < .5)  
 150.     {  
 151.         stepY = cornerY - floatingMenu.nextY;  
 152.     }  
 153.   
 154.     if (Math.abs(stepX) > 0 ||  
 155.         Math.abs(stepY) > 0)  
 156.     {  
 157.         floatingMenu.nextX += stepX;  
 158.         floatingMenu.nextY += stepY;  
 159.         floatingMenu.move();  
 160.     }  
 161.   
 162.     setTimeout('floatingMenu.doFloat()', 20);  
 163. };  
 164.   
 165. // addEvent designed by Aaron Moore  
 166. floatingMenu.addEvent = function(element, listener, handler)  
 167. {  
 168.     if(typeof element[listener] != 'function' ||   
 169.        typeof element[listener + '_num'] == 'undefined')  
 170.     {  
 171.         element[listener + '_num'] = 0;  
 172.         if (typeof element[listener] == 'function')  
 173.         {  
 174.             element[listener + 0] = element[listener];  
 175.             element[listener + '_num']++;  
 176.         }  
 177.         element[listener] = function(e)  
 178.         {  
 179.             var r = true;  
 180.             e = (e) ? e : window.event;  
 181.             for(var i = element[listener + '_num'] -1; i >= 0; i--)  
 182.             {  
 183.                 if(element[listener + i](e) == false)  
 184.                     r = false;  
 185.             }  
 186.             return r;  
 187.         }  
 188.     }  
 189.   
 190.     //if handler is not already stored, assign it  
 191.     for(var i = 0; i < element[listener + '_num']; i++)  
 192.         if(element[listener + i] == handler)  
 193.             return;  
 194.     element[listener + element[listener + '_num']] = handler;  
 195.     element[listener + '_num']++;  
 196. };  
 197.   
 198. floatingMenu.init = function()  
 199. {  
 200.     floatingMenu.initSecondary();  
 201.     floatingMenu.doFloat();  
 202. };  
 203.   
 204. // Some browsers init scrollbars only after  
 205. // full document load.  
 206. floatingMenu.initSecondary = function()  
 207. {  
 208.     floatingMenu.computeShifts();  
 209.     floatingMenu.nextX = floatingMenu.calculateCornerX();  
 210.     floatingMenu.nextY = floatingMenu.calculateCornerY();  
 211.     floatingMenu.move();  
 212. }  
 213.   
 214. if (document.layers)  
 215.     floatingMenu.addEvent(window, 'onload', floatingMenu.init);  
 216. else  
 217. {  
 218.     floatingMenu.init();  
 219.     floatingMenu.addEvent(window, 'onload',  
 220.         floatingMenu.initSecondary);  
 221. }  
 222.   
 223. //--></script>