bubble.js

   1 /*\r
   2     WebSnapr - Preview Bubble Javascript\r
   3     Written by Juan Xavier Larrea \r
   4     http://www.websnapr.com - xavier@websnapr.com   \r
   5     \r
   6 */\r
   7 \r
   8 // Point this variable to the correct location of the bg.png file\r
   9 var bubbleImageUp = 'resources/bubble_up.png';\r
  10 var bubbleImageDown = 'resources/bubble_down.png';\r
  11 \r
  12 if(typeof Array.prototype.push!="function"){\r
  13    Array.prototype.push=ArrayPush;\r
  14 \r
  15    function ArrayPush(_1){\r
  16       this[this.length]=_1;\r
  17    }\r
  18 }\r
  19 \r
  20 function WSR_getElementsByClassName(_2,_3,_4){\r
  21 \r
  22    var _5=(_3=="*"&&_2.all)?_2.all:_2.getElementsByTagName(_3);\r
  23    var _6=new Array();\r
  24    _4=_4.replace(/\-/g,"\\-");\r
  25    var _7=new RegExp("(^|\\s)"+_4+"(\\s|$)");\r
  26    var _8;\r
  27    for(var i=0;i<_5.length;i++){\r
  28       _8=_5[i];\r
  29       if(_7.test(_8.className)){\r
  30          _6.push(_8);\r
  31       }\r
  32    }\r
  33    return (_6);\r
  34 }\r
  35 \r
  36 function bindBubbles(e){\r
  37    lbActions=WSR_getElementsByClassName(document,"a","bubble");\r
  38    for(i=0;i<lbActions.length;i++){\r
  39       if(window.addEventListener){\r
  40          lbActions[i].addEventListener("mouseover",attachBubble,false);\r
  41          lbActions[i].addEventListener("mouseout",detachBubble,false);\r
  42       }else{\r
  43          lbActions[i].attachEvent("onmouseover",attachBubble);\r
  44          lbActions[i].attachEvent("onmouseout",detachBubble);\r
  45       }\r
  46    }\r
  47 }\r
  48 \r
  49 function attachBubble(_b){\r
  50    var _c;\r
  51    if(_b["srcElement"]){\r
  52       _c=_b["srcElement"];\r
  53    }else{\r
  54       _c=_b["target"];\r
  55    }\r
  56    if (_c.href == undefined){\r
  57       _c=_c.parentNode;\r
  58    }\r
  59 \r
  60    var _d=_c.href;\r
  61    var _10=document.createElement("div");\r
  62    document.getElementsByTagName("body")[0].appendChild(_10);\r
  63    _10.className="bubble";\r
  64 \r
  65    _iH = window.innerHeight;\r
  66    var _e=findPos(_c)[0]+5;\r
  67 \r
  68    // should the bubble be displayed above or below the object\r
  69    if(findPos(_c)[1] + 240 >= _iH) {\r
  70       var _f=findPos(_c)[1]-283;\r
  71       var _mT=16;\r
  72       var _mL=12;\r
  73       bubbleImage = bubbleImageUp;\r
  74    }\r
  75    else {\r
  76       var _f=findPos(_c)[1]+17;\r
  77       var _mT=27;\r
  78       var _mL=12;\r
  79       bubbleImage = bubbleImageDown;\r
  80    }\r
  81 \r
  82    if (BrowserDetect.browser == 'Explorer') {\r
  83       _10.style.width="240px";\r
  84       _10.style.position="absolute";\r
  85       _10.style.top=_f;\r
  86       _10.style.zIndex=99999;\r
  87       _10.style.left=_e;\r
  88       _10.style.textAlign="left";\r
  89       _10.style.height="190px";\r
  90       _10.style.paddingTop="0";\r
  91       _10.style.paddingLeft="0";\r
  92       _10.style.paddingBottom="0";\r
  93       _10.style.paddingRight="0";\r
  94       _10.style.marginTop="0";\r
  95       _10.style.marginLeft="0";\r
  96       _10.style.marginBottom="0";\r
  97       _10.style.marginRight="0";\r
  98       _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImage + "',sizingMethod='image')";\r
  99    } else {\r
 100       _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+_f+"px ; left: "+_e+"px ; background: url("+ bubbleImage +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");\r
 101    }\r
 102 \r
 103    if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {\r
 104 \r
 105       var _height = _f;\r
 106     \r
 107       _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+ _height +"px ; left: "+_e+"px ; background: url("+ bubbleImage +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");\r
 108     \r
 109    }\r
 110 \r
 111    var img=document.createElement("img");\r
 112    _10.appendChild(img);\r
 113 \r
 114    if (BrowserDetect.browser == 'Explorer') {\r
 115       img.style.paddingTop="0";\r
 116       img.style.paddingLeft="0";\r
 117       img.style.paddingBottom="0";\r
 118       img.style.paddingRight="0";\r
 119       img.style.margin="auto";\r
 120       img.style.marginTop=_mT;\r
 121       img.style.marginLeft=_mL;\r
 122       img.style.marginBottom="0";\r
 123       img.style.marginRight="0";\r
 124       img.style.borderTop="0";\r
 125       img.style.borderLeft="0";\r
 126       img.style.borderBottom="0";\r
 127       img.style.borderRight="0";\r
 128    } else {\r
 129       img.setAttribute("style","padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; margin-top: " + _mT +"px; margin-left: " + _mL +"px; margin-bottom: 0; margin-right: 0; border: 0");\r
 130    }\r
 131    img.setAttribute("src","phpfspot_img.php?idx=" + _c.id + "&width=200");\r
 132    img.setAttribute("width",202);\r
 133    img.setAttribute("height",152);\r
 134    img.setAttribute("alt","Snapshot");\r
 135 }\r
 136 \r
 137 function detachBubble(_12){\r
 138    lbActions=WSR_getElementsByClassName(document,"div","bubble");\r
 139    for(i=0;i<lbActions.length;i++){\r
 140       lbActions[i].parentNode.removeChild(lbActions[i]);\r
 141    }\r
 142 }\r
 143 \r
 144 /*if(window.addEventListener){\r
 145    addEventListener("load",bindBubbles,false);\r
 146 }else{\r
 147    attachEvent("onload",bindBubbles);\r
 148 }*/\r
 149 \r
 150 function findPos(obj){\r
 151    var _14=curtop=0;\r
 152    if(obj.offsetParent){\r
 153       _14=obj.offsetLeft;\r
 154       curtop=obj.offsetTop;\r
 155       while(obj=obj.offsetParent){\r
 156          _14+=obj.offsetLeft;\r
 157          curtop+=obj.offsetTop;\r
 158       }\r
 159    }\r
 160    return [_14,curtop];\r
 161 }\r
 162 \r
 163 var BrowserDetect = {\r
 164         init: function () {\r
 165                 this.browser = this.searchString(this.dataBrowser) || "An unknown browser";\r
 166                 this.version = this.searchVersion(navigator.userAgent)\r
 167                         || this.searchVersion(navigator.appVersion)\r
 168                         || "an unknown version";\r
 169                 this.OS = this.searchString(this.dataOS) || "an unknown OS";\r
 170         },\r
 171         searchString: function (data) {\r
 172                 for (var i=0;i<data.length;i++) {\r
 173                         var dataString = data[i].string;\r
 174                         var dataProp = data[i].prop;\r
 175                         this.versionSearchString = data[i].versionSearch || data[i].identity;\r
 176                         if (dataString) {\r
 177                                 if (dataString.indexOf(data[i].subString) != -1)\r
 178                                         return data[i].identity;\r
 179                         }\r
 180                         else if (dataProp)\r
 181                                 return data[i].identity;\r
 182                 }\r
 183         },\r
 184         searchVersion: function (dataString) {\r
 185                 var index = dataString.indexOf(this.versionSearchString);\r
 186                 if (index == -1) return;\r
 187                 return parseFloat(dataString.substring(index+this.versionSearchString.length+1));\r
 188         },\r
 189         dataBrowser: [\r
 190                 {       string: navigator.userAgent,\r
 191                         subString: "OmniWeb",\r
 192                         versionSearch: "OmniWeb/",\r
 193                         identity: "OmniWeb"\r
 194                 },\r
 195                 {\r
 196                         string: navigator.vendor,\r
 197                         subString: "Apple",\r
 198                         identity: "Safari"\r
 199                 },\r
 200                 {\r
 201                         prop: window.opera,\r
 202                         identity: "Opera"\r
 203                 },\r
 204                 {\r
 205                         string: navigator.vendor,\r
 206                         subString: "iCab",\r
 207                         identity: "iCab"\r
 208                 },\r
 209                 {\r
 210                         string: navigator.vendor,\r
 211                         subString: "KDE",\r
 212                         identity: "Konqueror"\r
 213                 },\r
 214                 {\r
 215                         string: navigator.userAgent,\r
 216                         subString: "Firefox",\r
 217                         identity: "Firefox"\r
 218                 },\r
 219                 {\r
 220                         string: navigator.vendor,\r
 221                         subString: "Camino",\r
 222                         identity: "Camino"\r
 223                 },\r
 224                 {               // for newer Netscapes (6+)\r
 225                         string: navigator.userAgent,\r
 226                         subString: "Netscape",\r
 227                         identity: "Netscape"\r
 228                 },\r
 229                 {\r
 230                         string: navigator.userAgent,\r
 231                         subString: "MSIE",\r
 232                         identity: "Explorer",\r
 233                         versionSearch: "MSIE"\r
 234                 },\r
 235                 {\r
 236                         string: navigator.userAgent,\r
 237                         subString: "Gecko",\r
 238                         identity: "Mozilla",\r
 239                         versionSearch: "rv"\r
 240                 },\r
 241                 {               // for older Netscapes (4-)\r
 242                         string: navigator.userAgent,\r
 243                         subString: "Mozilla",\r
 244                         identity: "Netscape",\r
 245                         versionSearch: "Mozilla"\r
 246                 }\r
 247         ],\r
 248         dataOS : [\r
 249                 {\r
 250                         string: navigator.platform,\r
 251                         subString: "Win",\r
 252                         identity: "Windows"\r
 253                 },\r
 254                 {\r
 255                         string: navigator.platform,\r
 256                         subString: "Mac",\r
 257                         identity: "Mac"\r
 258                 },\r
 259                 {\r
 260                         string: navigator.platform,\r
 261                         subString: "Linux",\r
 262                         identity: "Linux"\r
 263                 }\r
 264         ]\r
 265 \r
 266 };\r
 267 \r
 268 function var_dump(obj) {\r
 269    if(typeof obj == "object") {\r
 270       return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;\r
 271    } else {\r
 272       return "Type: "+typeof(obj)+"\nValue: "+obj;\r
 273    }\r
 274 }//end function var_dump\r
 275 \r
 276 \r
 277 BrowserDetect.init();\r