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