2 WebSnapr - Preview Bubble Javascript
\r
3 Written by Juan Xavier Larrea
\r
4 http://www.websnapr.com - xavier@websnapr.com
\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
12 if(typeof Array.prototype.push!="function"){
\r
13 Array.prototype.push=ArrayPush;
\r
15 function ArrayPush(_1){
\r
16 this[this.length]=_1;
\r
20 function WSR_getElementsByClassName(_2,_3,_4){
\r
22 var _5=(_3=="*"&&_2.all)?_2.all:_2.getElementsByTagName(_3);
\r
24 _4=_4.replace(/\-/g,"\\-");
\r
25 var _7=new RegExp("(^|\\s)"+_4+"(\\s|$)");
\r
27 for(var i=0;i<_5.length;i++){
\r
29 if(_7.test(_8.className)){
\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
43 lbActions[i].attachEvent("onmouseover",attachBubble);
\r
44 lbActions[i].attachEvent("onmouseout",detachBubble);
\r
49 function attachBubble(_b){
\r
51 if(_b["srcElement"]){
\r
52 _c=_b["srcElement"];
\r
56 if (_c.href == undefined){
\r
61 var _10=document.createElement("div");
\r
62 document.getElementsByTagName("body")[0].appendChild(_10);
\r
63 _10.className="bubble";
\r
65 var _e=findPos(_c)[0]+5;
\r
66 var cur_height = findPos(_c)[1]-get_scroll_position() + 283;
\r
68 // should the bubble be displayed above or below the object
\r
69 if(cur_height >= get_page_height()) {
\r
70 var _f=findPos(_c)[1]-283;
\r
73 bubbleImage = bubbleImageUp;
\r
76 var _f=findPos(_c)[1]+17;
\r
79 bubbleImage = bubbleImageDown;
\r
82 if (BrowserDetect.browser == 'Explorer') {
\r
83 _10.style.width="240px";
\r
84 _10.style.position="absolute";
\r
86 _10.style.zIndex=99999;
\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
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
103 if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {
\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
111 var img=document.createElement("img");
\r
112 _10.appendChild(img);
\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
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
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
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
144 /*if(window.addEventListener){
\r
145 addEventListener("load",bindBubbles,false);
\r
147 attachEvent("onload",bindBubbles);
\r
150 function findPos(obj){
\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
160 return [_14,curtop];
\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
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
177 if (dataString.indexOf(data[i].subString) != -1)
\r
178 return data[i].identity;
\r
181 return data[i].identity;
\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
190 { string: navigator.userAgent,
\r
191 subString: "OmniWeb",
\r
192 versionSearch: "OmniWeb/",
\r
193 identity: "OmniWeb"
\r
196 string: navigator.vendor,
\r
197 subString: "Apple",
\r
201 prop: window.opera,
\r
205 string: navigator.vendor,
\r
210 string: navigator.vendor,
\r
212 identity: "Konqueror"
\r
215 string: navigator.userAgent,
\r
216 subString: "Firefox",
\r
217 identity: "Firefox"
\r
220 string: navigator.vendor,
\r
221 subString: "Camino",
\r
224 { // for newer Netscapes (6+)
\r
225 string: navigator.userAgent,
\r
226 subString: "Netscape",
\r
227 identity: "Netscape"
\r
230 string: navigator.userAgent,
\r
232 identity: "Explorer",
\r
233 versionSearch: "MSIE"
\r
236 string: navigator.userAgent,
\r
237 subString: "Gecko",
\r
238 identity: "Mozilla",
\r
239 versionSearch: "rv"
\r
241 { // for older Netscapes (4-)
\r
242 string: navigator.userAgent,
\r
243 subString: "Mozilla",
\r
244 identity: "Netscape",
\r
245 versionSearch: "Mozilla"
\r
250 string: navigator.platform,
\r
252 identity: "Windows"
\r
255 string: navigator.platform,
\r
260 string: navigator.platform,
\r
261 subString: "Linux",
\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
272 return "Type: "+typeof(obj)+"\nValue: "+obj;
\r
274 }//end function var_dump
\r
276 function get_page_height()
\r
279 if( typeof( window.innerHeight ) == 'number' ) {
\r
281 myHeight = window.innerHeight;
\r
282 } else if( document.documentElement && document.documentElement.clientHeight ) {
\r
283 //IE 6+ in 'standards compliant mode'
\r
284 myHeight = document.documentElement.clientHeight;
\r
285 } else if( document.body && document.body.clientHeight ) {
\r
287 myHeight = document.body.clientHeight;
\r
293 function get_scroll_position()
\r
296 if (typeof window.pageYOffset != 'undefined')
\r
297 return window.pageYOffset;
\r
299 if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
\r
300 return window.scrollTop;
\r
302 if (typeof document.body != 'undefined')
\r
303 return document.body.scrollTop;
\r
307 BrowserDetect.init();
\r