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(oElm, strTagName, oClassNames){
\r
21 var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
\r
22 var arrReturnElements = new Array();
\r
23 var arrRegExpClassNames = new Array();
\r
24 if(typeof oClassNames == "object"){
\r
25 for(var i=0; i<oClassNames.length; i++){
\r
26 arrRegExpClassNames.push(new RegExp("(^|\s)" + oClassNames[i].replace(/-/g, "\-") + "(\s|$)"));
\r
30 arrRegExpClassNames.push(new RegExp("(^|\s)" + oClassNames.replace(/-/g, "\-") + "(\s|$)"));
\r
34 for(var j=0; j<arrElements.length; j++){
\r
35 oElement = arrElements[j];
\r
37 for(var k=0; k<arrRegExpClassNames.length; k++){
\r
38 if(!arrRegExpClassNames[k].test(oElement.className)){
\r
39 bMatchesAll = false;
\r
44 arrReturnElements.push(oElement);
\r
47 return (arrReturnElements)
\r
49 /*function WSR_getElementsByClassName(_2,_3,_4){
\r
51 var _5=(_3=="*"&&_2.all)?_2.all:_2.getElementsByTagName(_3);
\r
52 window.alert(_5[0]);
\r
54 _4=_4.replace(/\-/g,"\\-");
\r
55 var _7=new RegExp("(^|\\s)"+_4+"(\\s|$)");
\r
57 for(var i=0;i<_5.length;i++){
\r
59 if(_7.test(_8.className)){
\r
66 function bindBubbles(e){
\r
67 lbActions=WSR_getElementsByClassName(document,"img","thumb");
\r
68 for(i=0;i<lbActions.length;i++){
\r
69 if(window.addEventListener){ // Mozilla, Firefox
\r
70 lbActions[i].addEventListener("mouseover",attachBubble,false);
\r
71 lbActions[i].addEventListener("mouseout",detachBubble,false);
\r
72 lbActions[i].addEventListener("click",detachBubble,false);
\r
73 }else if (window.attachEvent) { // IE
\r
74 lbActions[i].attachEvent("onmouseover",attachBubble);
\r
75 lbActions[i].attachEvent("onmouseout",detachBubble);
\r
76 lbActions[i].attachEvent("onclick",detachBubble);
\r
78 // it seems this browser doesn't support any eventhandling
\r
83 function attachBubble(_b){
\r
85 if(_b["srcElement"]){ // IE
\r
86 _c=_b["srcElement"];
\r
87 }else{ // Mozilla, Firefox
\r
90 if (_c.href == undefined){
\r
96 var _10=document.createElement("div");
\r
97 document.getElementsByTagName("body")[0].appendChild(_10);
\r
98 _10.className="bubble";
\r
100 if(BrowserDetect.browser != 'Explorer') {
\r
102 var _e=findPos(_c)[0]+5;
\r
103 var cur_height = findPos(_c)[1]-get_scroll_position() + 283;
\r
105 // should the bubble be displayed above or below the object
\r
106 if(cur_height >= get_page_height()) {
\r
107 var _f=findPos(_c)[1]-363;
\r
108 bubbleImage = bubbleImageUp;
\r
111 var _f=findPos(_c)[1]+17;
\r
112 bubbleImage = bubbleImageDown;
\r
116 var _e=findPos(_c)[0]+5;
\r
117 var _f=findPos(_c)[1]+129;
\r
118 bubbleImage = bubbleImageDown;
\r
120 if (BrowserDetect.browser == 'Explorer') {
\r
121 _10.style.width="275px";
\r
122 _10.style.height="275px";
\r
123 _10.style.position="absolute";
\r
125 _10.style.zIndex=99999;
\r
127 _10.style.textAlign="left";
\r
128 _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImage + "',sizingMethod='image')";
\r
129 } else if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {
\r
130 _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
132 _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
135 if(cur_height >= get_page_height())
\r
136 showBubbleDetails(_10, _c.id, 'up');
\r
138 showBubbleDetails(_10, _c.id, 'down');
\r
142 function detachBubble(_12){
\r
143 lbActions=WSR_getElementsByClassName(document,"div","bubble");
\r
144 for(i=0;i<lbActions.length;i++){
\r
145 lbActions[i].parentNode.removeChild(lbActions[i]);
\r
149 function findPos(obj){
\r
151 if(obj.offsetParent){
\r
152 _14=obj.offsetLeft;
\r
153 curtop=obj.offsetTop;
\r
154 while(obj=obj.offsetParent){
\r
155 _14+=obj.offsetLeft;
\r
156 curtop+=obj.offsetTop;
\r
159 return [_14,curtop];
\r
162 var BrowserDetect = {
\r
163 init: function () {
\r
164 this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
\r
165 this.version = this.searchVersion(navigator.userAgent)
\r
166 || this.searchVersion(navigator.appVersion)
\r
167 || "an unknown version";
\r
168 this.OS = this.searchString(this.dataOS) || "an unknown OS";
\r
170 searchString: function (data) {
\r
171 for (var i=0;i<data.length;i++) {
\r
172 var dataString = data[i].string;
\r
173 var dataProp = data[i].prop;
\r
174 this.versionSearchString = data[i].versionSearch || data[i].identity;
\r
176 if (dataString.indexOf(data[i].subString) != -1)
\r
177 return data[i].identity;
\r
180 return data[i].identity;
\r
183 searchVersion: function (dataString) {
\r
184 var index = dataString.indexOf(this.versionSearchString);
\r
185 if (index == -1) return;
\r
186 return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
\r
189 { string: navigator.userAgent,
\r
190 subString: "OmniWeb",
\r
191 versionSearch: "OmniWeb/",
\r
192 identity: "OmniWeb"
\r
195 string: navigator.vendor,
\r
196 subString: "Apple",
\r
200 prop: window.opera,
\r
204 string: navigator.vendor,
\r
209 string: navigator.vendor,
\r
211 identity: "Konqueror"
\r
214 string: navigator.userAgent,
\r
215 subString: "Firefox",
\r
216 identity: "Firefox"
\r
219 string: navigator.vendor,
\r
220 subString: "Camino",
\r
223 { // for newer Netscapes (6+)
\r
224 string: navigator.userAgent,
\r
225 subString: "Netscape",
\r
226 identity: "Netscape"
\r
229 string: navigator.userAgent,
\r
231 identity: "Explorer",
\r
232 versionSearch: "MSIE"
\r
235 string: navigator.userAgent,
\r
236 subString: "Gecko",
\r
237 identity: "Mozilla",
\r
238 versionSearch: "rv"
\r
240 { // for older Netscapes (4-)
\r
241 string: navigator.userAgent,
\r
242 subString: "Mozilla",
\r
243 identity: "Netscape",
\r
244 versionSearch: "Mozilla"
\r
249 string: navigator.platform,
\r
251 identity: "Windows"
\r
254 string: navigator.platform,
\r
259 string: navigator.platform,
\r
260 subString: "Linux",
\r
267 function var_dump(arr,level) {
\r
268 var dumped_text = "";
\r
269 if(!level) level = 0;
\r
271 //The padding given at the beginning of the line.
\r
272 var level_padding = "";
\r
273 for(var j=0;j<level+1;j++) level_padding += " ";
\r
275 if(typeof(arr) == 'object') { //Array/Hashes/Objects
\r
276 for(var item in arr) {
\r
277 var value = arr[item];
\r
279 if(typeof(value) == 'object') { //If it is an array,
\r
280 dumped_text += level_padding + "'" + item + "' ...\n";
\r
281 dumped_text += dump(value,level+1);
\r
283 dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
\r
286 } else { //Stings/Chars/Numbers etc.
\r
287 dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
\r
289 return dumped_text;
\r
291 }//end function var_dump
\r
293 function get_page_height()
\r
296 if( typeof( window.innerHeight ) == 'number' ) {
\r
298 myHeight = window.innerHeight;
\r
299 } else if( document.documentElement && document.documentElement.clientHeight ) {
\r
300 //IE 6+ in 'standards compliant mode'
\r
301 myHeight = document.documentElement.clientHeight;
\r
302 } else if( document.body && document.body.clientHeight ) {
\r
304 myHeight = document.body.clientHeight;
\r
310 function get_scroll_position()
\r
312 if (typeof window.pageYOffset != 'undefined') {
\r
313 return window.pageYOffset;
\r
316 if (typeof document.compatMode != 'undefined' &&
\r
317 document.compatMode != 'BackCompat' &&
\r
318 typeof window.scrollTop != 'undefined')
\r
319 return window.scrollTop;
\r
321 if(typeof document.documentElement.scrollTop != 'undefined')
\r
322 return document.documentElement.scrollTop;
\r
324 if (typeof document.body.scrollTop != 'undefined')
\r
325 return document.body.scrollTop;
\r
334 BrowserDetect.init();
\r