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
42 lbActions[i].addEventListener("click",detachBubble,false);
\r
44 lbActions[i].attachEvent("onmouseover",attachBubble);
\r
45 lbActions[i].attachEvent("onmouseout",detachBubble);
\r
46 lbActions[i].attachEvent("onclick",detachBubble);
\r
51 function attachBubble(_b){
\r
53 if(_b["srcElement"]){
\r
54 _c=_b["srcElement"];
\r
58 if (_c.href == undefined){
\r
63 var _10=document.createElement("div");
\r
64 document.getElementsByTagName("body")[0].appendChild(_10);
\r
65 _10.className="bubble";
\r
67 var _e=findPos(_c)[0]+5;
\r
68 var cur_height = findPos(_c)[1]-get_scroll_position() + 283;
\r
70 // should the bubble be displayed above or below the object
\r
71 if(cur_height >= get_page_height()) {
\r
72 var _f=findPos(_c)[1]-363;
\r
75 bubbleImage = bubbleImageUp;
\r
78 var _f=findPos(_c)[1]+17;
\r
81 bubbleImage = bubbleImageDown;
\r
84 if (BrowserDetect.browser == 'Explorer') {
\r
85 _10.style.width="275px";
\r
86 _10.style.position="absolute";
\r
88 _10.style.zIndex=99999;
\r
90 _10.style.textAlign="left";
\r
91 _10.style.height="275px";
\r
92 _10.style.paddingTop="0";
\r
93 _10.style.paddingLeft="0";
\r
94 _10.style.paddingBottom="0";
\r
95 _10.style.paddingRight="0";
\r
96 _10.style.marginTop="0";
\r
97 _10.style.marginLeft="0";
\r
98 _10.style.marginBottom="0";
\r
99 _10.style.marginRight="0";
\r
100 _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImage + "',sizingMethod='image')";
\r
102 _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+_f+"px ; left: "+_e+"px ; background: url("+ bubbleImage +") no-repeat; width: 275px; height: 275px; padding: 0; margin: 0;");
\r
105 if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {
\r
109 _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+ _height +"px ; left: "+_e+"px ; background: url("+ bubbleImage +") no-repeat; width: 275px; height: 275px; padding: 0; margin: 0;");
\r
113 if(cur_height >= get_page_height())
\r
114 showBubbleDetails(_10, _c.id, 'up');
\r
116 showBubbleDetails(_10, _c.id, 'down');
\r
120 var img=document.createElement("img");
\r
121 _10.appendChild(img);
\r
123 if (BrowserDetect.browser == 'Explorer') {
\r
124 img.style.paddingTop="0";
\r
125 img.style.paddingLeft="0";
\r
126 img.style.paddingBottom="0";
\r
127 img.style.paddingRight="0";
\r
128 img.style.margin="auto";
\r
129 img.style.marginTop=_mT;
\r
130 img.style.marginLeft=_mL;
\r
131 img.style.marginBottom="0";
\r
132 img.style.marginRight="0";
\r
133 img.style.borderTop="0";
\r
134 img.style.borderLeft="0";
\r
135 img.style.borderBottom="0";
\r
136 img.style.borderRight="0";
\r
138 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
140 img.setAttribute("src","phpfspot_img.php?idx=" + _c.id + "&width=200");
\r
141 img.setAttribute("width",202);
\r
142 img.setAttribute("height",152);
\r
143 img.setAttribute("alt","Snapshot");
\r
146 function detachBubble(_12){
\r
147 lbActions=WSR_getElementsByClassName(document,"div","bubble");
\r
148 for(i=0;i<lbActions.length;i++){
\r
149 lbActions[i].parentNode.removeChild(lbActions[i]);
\r
153 function findPos(obj){
\r
155 if(obj.offsetParent){
\r
156 _14=obj.offsetLeft;
\r
157 curtop=obj.offsetTop;
\r
158 while(obj=obj.offsetParent){
\r
159 _14+=obj.offsetLeft;
\r
160 curtop+=obj.offsetTop;
\r
163 return [_14,curtop];
\r
166 var BrowserDetect = {
\r
167 init: function () {
\r
168 this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
\r
169 this.version = this.searchVersion(navigator.userAgent)
\r
170 || this.searchVersion(navigator.appVersion)
\r
171 || "an unknown version";
\r
172 this.OS = this.searchString(this.dataOS) || "an unknown OS";
\r
174 searchString: function (data) {
\r
175 for (var i=0;i<data.length;i++) {
\r
176 var dataString = data[i].string;
\r
177 var dataProp = data[i].prop;
\r
178 this.versionSearchString = data[i].versionSearch || data[i].identity;
\r
180 if (dataString.indexOf(data[i].subString) != -1)
\r
181 return data[i].identity;
\r
184 return data[i].identity;
\r
187 searchVersion: function (dataString) {
\r
188 var index = dataString.indexOf(this.versionSearchString);
\r
189 if (index == -1) return;
\r
190 return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
\r
193 { string: navigator.userAgent,
\r
194 subString: "OmniWeb",
\r
195 versionSearch: "OmniWeb/",
\r
196 identity: "OmniWeb"
\r
199 string: navigator.vendor,
\r
200 subString: "Apple",
\r
204 prop: window.opera,
\r
208 string: navigator.vendor,
\r
213 string: navigator.vendor,
\r
215 identity: "Konqueror"
\r
218 string: navigator.userAgent,
\r
219 subString: "Firefox",
\r
220 identity: "Firefox"
\r
223 string: navigator.vendor,
\r
224 subString: "Camino",
\r
227 { // for newer Netscapes (6+)
\r
228 string: navigator.userAgent,
\r
229 subString: "Netscape",
\r
230 identity: "Netscape"
\r
233 string: navigator.userAgent,
\r
235 identity: "Explorer",
\r
236 versionSearch: "MSIE"
\r
239 string: navigator.userAgent,
\r
240 subString: "Gecko",
\r
241 identity: "Mozilla",
\r
242 versionSearch: "rv"
\r
244 { // for older Netscapes (4-)
\r
245 string: navigator.userAgent,
\r
246 subString: "Mozilla",
\r
247 identity: "Netscape",
\r
248 versionSearch: "Mozilla"
\r
253 string: navigator.platform,
\r
255 identity: "Windows"
\r
258 string: navigator.platform,
\r
263 string: navigator.platform,
\r
264 subString: "Linux",
\r
271 function var_dump(obj) {
\r
272 if(typeof obj == "object") {
\r
273 return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
\r
275 return "Type: "+typeof(obj)+"\nValue: "+obj;
\r
277 }//end function var_dump
\r
279 function get_page_height()
\r
282 if( typeof( window.innerHeight ) == 'number' ) {
\r
284 myHeight = window.innerHeight;
\r
285 } else if( document.documentElement && document.documentElement.clientHeight ) {
\r
286 //IE 6+ in 'standards compliant mode'
\r
287 myHeight = document.documentElement.clientHeight;
\r
288 } else if( document.body && document.body.clientHeight ) {
\r
290 myHeight = document.body.clientHeight;
\r
296 function get_scroll_position()
\r
299 if (typeof window.pageYOffset != 'undefined')
\r
300 return window.pageYOffset;
\r
302 if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
\r
303 return window.scrollTop;
\r
305 if (typeof document.body != 'undefined')
\r
306 return document.body.scrollTop;
\r
310 BrowserDetect.init();
\r