a try to make bubble working in IE

git-svn-id: file:///var/lib/svn/phpfspot/trunk@104 fa6a889d-dae6-447d-9e79-4ba9a3039384

1 files changed, 76 insertions, 70 deletions

diff --git a/bubble.js b/bubble.js
index 935a7d7..d44780e 100644
--- a/bubble.js
+++ b/bubble.js
@@ -17,9 +17,39 @@ if(typeof Array.prototype.push!="function"){
    }

 }

 

-function WSR_getElementsByClassName(_2,_3,_4){

+function WSR_getElementsByClassName(oElm, strTagName, oClassNames){

+   var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);

+   var arrReturnElements = new Array();

+   var arrRegExpClassNames = new Array();

+   if(typeof oClassNames == "object"){

+      for(var i=0; i<oClassNames.length; i++){

+         arrRegExpClassNames.push(new RegExp("(^|\s)" + oClassNames[i].replace(/-/g, "\-") + "(\s|$)"));

+      }

+   }

+   else{

+      arrRegExpClassNames.push(new RegExp("(^|\s)" + oClassNames.replace(/-/g, "\-") + "(\s|$)"));

+   }

+   var oElement;

+   var bMatchesAll;

+   for(var j=0; j<arrElements.length; j++){

+      oElement = arrElements[j];

+      bMatchesAll = true;

+      for(var k=0; k<arrRegExpClassNames.length; k++){

+         if(!arrRegExpClassNames[k].test(oElement.className)){

+            bMatchesAll = false;

+            break;

+         }

+      }

+      if(bMatchesAll){

+         arrReturnElements.push(oElement);

+      }

+   }

+   return (arrReturnElements)

+}

+/*function WSR_getElementsByClassName(_2,_3,_4){

 

    var _5=(_3=="*"&&_2.all)?_2.all:_2.getElementsByTagName(_3);

+         window.alert(_5[0]);

    var _6=new Array();

    _4=_4.replace(/\-/g,"\\-");

    var _7=new RegExp("(^|\\s)"+_4+"(\\s|$)");

@@ -31,20 +61,22 @@ function WSR_getElementsByClassName(_2,_3,_4){
       }

    }

    return (_6);

-}

+}*/

 

 function bindBubbles(e){

-   lbActions=WSR_getElementsByClassName(document,"a","bubble");

+   lbActions=WSR_getElementsByClassName(document,"img","thumb");

    for(i=0;i<lbActions.length;i++){

       if(window.addEventListener){ // Mozilla, Firefox

          lbActions[i].addEventListener("mouseover",attachBubble,false);

          lbActions[i].addEventListener("mouseout",detachBubble,false);

          lbActions[i].addEventListener("click",detachBubble,false);

-      }else{ // IE

+      }else if (window.attachEvent) { // IE

          lbActions[i].attachEvent("onmouseover",attachBubble);

          lbActions[i].attachEvent("onmouseout",detachBubble);

          lbActions[i].attachEvent("onclick",detachBubble);

-      }

+      } else {

+         // it seems this browser doesn't support any eventhandling

+      }  

    }

 }

 

@@ -60,54 +92,44 @@ function attachBubble(_b){
    }

 

    var _d=_c.href;

+

    var _10=document.createElement("div");

    document.getElementsByTagName("body")[0].appendChild(_10);

    _10.className="bubble";

 

-   var _e=findPos(_c)[0]+5;

-   var cur_height = findPos(_c)[1]-get_scroll_position() + 283;

+   if(BrowserDetect.browser != 'Explorer') {

+

+      var _e=findPos(_c)[0]+5;

+      var cur_height = findPos(_c)[1]-get_scroll_position() + 283;

 

-   // should the bubble be displayed above or below the object

-   if(cur_height >= get_page_height()) {

-      var _f=findPos(_c)[1]-363;

-      var _mL=2;

-      var _mT=39;

-      bubbleImage = bubbleImageUp;

+      // should the bubble be displayed above or below the object

+      if(cur_height >= get_page_height()) {

+         var _f=findPos(_c)[1]-363;

+         bubbleImage = bubbleImageUp;

+      }

+      else {

+         var _f=findPos(_c)[1]+17;

+         bubbleImage = bubbleImageDown;

+      }

    }

    else {

-      var _f=findPos(_c)[1]+17;

-      var _mL=2;

-      var _mT=34;

-      bubbleImage = bubbleImageDown;

+         var _e=findPos(_c)[0]+5;

+         var _f=findPos(_c)[1]+129;

+         bubbleImage = bubbleImageDown;

    }

-

    if (BrowserDetect.browser == 'Explorer') {

       _10.style.width="275px";

+      _10.style.height="275px";

       _10.style.position="absolute";

       _10.style.top=_f;

       _10.style.zIndex=99999;

       _10.style.left=_e;

       _10.style.textAlign="left";

-      _10.style.height="275px";

-      _10.style.paddingTop="0";

-      _10.style.paddingLeft="0";

-      _10.style.paddingBottom="0";

-      _10.style.paddingRight="0";

-      _10.style.marginTop="0";

-      _10.style.marginLeft="0";

-      _10.style.marginBottom="0";

-      _10.style.marginRight="0";

       _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImage + "',sizingMethod='image')";

+   } else if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {

+      _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;");

    } else {

-      _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;");

-   }

-

-   if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {

-

-      var _height = _f;

-    

-      _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;");

-    

+      _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;");

    }

 

    if(cur_height >= get_page_height()) 

@@ -115,32 +137,6 @@ function attachBubble(_b){
    else

       showBubbleDetails(_10, _c.id, 'down');

 

-   return;

-

-   var img=document.createElement("img");

-   _10.appendChild(img);

-

-   if (BrowserDetect.browser == 'Explorer') {

-      img.style.paddingTop="0";

-      img.style.paddingLeft="0";

-      img.style.paddingBottom="0";

-      img.style.paddingRight="0";

-      img.style.margin="auto";

-      img.style.marginTop=_mT;

-      img.style.marginLeft=_mL;

-      img.style.marginBottom="0";

-      img.style.marginRight="0";

-      img.style.borderTop="0";

-      img.style.borderLeft="0";

-      img.style.borderBottom="0";

-      img.style.borderRight="0";

-   } else {

-      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");

-   }

-   img.setAttribute("src","phpfspot_img.php?idx=" + _c.id + "&width=200");

-   img.setAttribute("width",202);

-   img.setAttribute("height",152);

-   img.setAttribute("alt","Snapshot");

 }

 

 function detachBubble(_12){

@@ -313,15 +309,25 @@ function get_page_height()
 

 function get_scroll_position()

 {

+   if (typeof window.pageYOffset != 'undefined') {

+      return window.pageYOffset;

+   }

+   else {

+      if (typeof document.compatMode != 'undefined' &&

+         document.compatMode != 'BackCompat' &&

+         typeof window.scrollTop != 'undefined')

+         return window.scrollTop;

+      else {

+         if(typeof document.documentElement.scrollTop != 'undefined')

+            return document.documentElement.scrollTop;

+         else {

+            if (typeof document.body.scrollTop != 'undefined')

+               return document.body.scrollTop;

+         }

+      }

+   }

 

-  if (typeof window.pageYOffset != 'undefined')

-    return window.pageYOffset;

-  else

-    if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')

-      return window.scrollTop;

-    else

-      if (typeof document.body != 'undefined')

-        return document.body.scrollTop;

+   return 0;

 

 }