js/ui/kcls/circ/selfcheck/floating.js

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