Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    48
    Thanks
    10
    Thanked 0 Times in 0 Posts

    js-tooltip conflict with css-html tag

    Hi I am using a tooltip called boxover from boxover.swazz.org

    it works fine except when I have my CSS define an html style
    I need this to centre my layout.

    can anyone tell me what part of the code conflicts with defining the html style in my CSS anf hopefully a work around.

    my CSS
    Code:
    html {
    width:1024px;
    margin:0 auto;
    }
    
    body { 
    display: block;
    background-image: url('http://www.mysite.com.au/bg.png');
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: 50% 50%; 
    height: 100%;
    }
    Boxover js
    Code:
    if (typeof document.attachEvent!='undefined') {
       window.attachEvent('onload',init);
       document.attachEvent('onmousemove',moveMouse);
       document.attachEvent('onclick',checkMove); }
    else {
       window.addEventListener('load',init,false);
       document.addEventListener('mousemove',moveMouse,false);
       document.addEventListener('click',checkMove,false);
    }
    
    var oDv=document.createElement("div");
    var dvHdr=document.createElement("div");
    var dvBdy=document.createElement("div");
    var windowlock,boxMove,fixposx,fixposy,lockX,lockY,fixx,fixy,ox,oy,boxLeft,boxRight,boxTop,boxBottom,evt,mouseX,mouseY,boxOpen,totalScrollTop,totalScrollLeft;
    boxOpen=false;
    ox=10;
    oy=10;
    lockX=0;
    lockY=0;
    
    function init() {
        oDv.appendChild(dvHdr);
        oDv.appendChild(dvBdy);
        oDv.style.position="relative";
        oDv.style.visibility='hidden';
        oDv.style.zIndex="999";
        document.body.appendChild(oDv);    
    // Make sure it is all scanned properly.
    scanDOM(document.body.firstChild);
    }
    
    function defHdrStyle() {
        dvHdr.style.width='150px';
        dvHdr.style.filter='alpha(opacity=85)'; // IE
        dvHdr.style.opacity='0.85'; // FF
    }
    
    function defBdyStyle() {
        dvHdr.style.width='150px';
        dvBdy.style.filter='alpha(opacity=85)'; // IE
        dvBdy.style.opacity='0.85'; // FF
    }
    
    function checkElemBO(txt) {
    if (!txt || typeof(txt) != 'string') return false;
    if ((txt.indexOf('header')>-1)&&(txt.indexOf('body')>-1)&&(txt.indexOf('[')>-1)&&(txt.indexOf(']')>-1)) 
       return true;
    else
       return false;
    }
    
    function scanBO(curNode) {
          if (checkElemBO(curNode.title)) {
             curNode.boHDR=getParam('header',curNode.title);
             curNode.boBDY=getParam('body',curNode.title);
                curNode.boCSSBDY=getParam('cssbody',curNode.title);            
                curNode.boCSSHDR=getParam('cssheader',curNode.title);
                curNode.IEbugfix=(getParam('hideselects',curNode.title)=='on')?true:false;
                curNode.fixX=parseInt(getParam('fixedrelx',curNode.title));
                curNode.fixY=parseInt(getParam('fixedrely',curNode.title));
                curNode.absX=parseInt(getParam('fixedabsx',curNode.title));
                curNode.absY=parseInt(getParam('fixedabsy',curNode.title));
                curNode.offY=(getParam('offsety',curNode.title)!='')?parseInt(getParam('offsety',curNode.title)):10;
                curNode.offX=(getParam('offsetx',curNode.title)!='')?parseInt(getParam('offsetx',curNode.title)):10;
                curNode.fade=(getParam('fade',curNode.title)=='on')?true:false;
                curNode.fadespeed=(getParam('fadespeed',curNode.title)!='')?getParam('fadespeed',curNode.title):0.04;
                curNode.delay=(getParam('delay',curNode.title)!='')?parseInt(getParam('delay',curNode.title)):0;
                if (getParam('requireclick',curNode.title)=='on') {
                    curNode.requireclick=true;
                    document.all?curNode.attachEvent('onclick',showHideBox):curNode.addEventListener('click',showHideBox,false);
                    document.all?curNode.attachEvent('onmouseover',hideBox):curNode.addEventListener('mouseover',hideBox,false);
                }
                else {// Note : if requireclick is on the stop clicks are ignored               
                   if (getParam('doubleclickstop',curNode.title)!='off') {
                       document.all?curNode.attachEvent('ondblclick',pauseBox):curNode.addEventListener('dblclick',pauseBox,false);
                   }    
                   if (getParam('singleclickstop',curNode.title)=='on') {
                       document.all?curNode.attachEvent('onclick',pauseBox):curNode.addEventListener('click',pauseBox,false);
                   }
               }
                curNode.windowLock=getParam('windowlock',curNode.title).toLowerCase()=='off'?false:true;
                curNode.title='';
                curNode.hasbox=1;
           }
           else
              curNode.hasbox=2;   
    }
    
    
    function getParam(param,list) {
        var reg = new RegExp('([^a-zA-Z]' + param + '|^' + param + ')\\s*=\\s*\\[\\s*(((\\[\\[)|(\\]\\])|([^\\]\\[]))*)\\s*\\]');
        var res = reg.exec(list);
        var returnvar;
        if(res)
            return res[2].replace('[[','[').replace(']]',']');
        else
            return '';
    }
    
    function Left(elem){    
        var x=0;
        if (elem.calcLeft)
            return elem.calcLeft;
        var oElem=elem;
        while(elem){
             if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderLeftWidth)))&&(x!=0))
                 x+=parseInt(elem.currentStyle.borderLeftWidth);
             x+=elem.offsetLeft;
             elem=elem.offsetParent;
          } 
        oElem.calcLeft=x;
        return x;
        }
    
    function Top(elem){
         var x=0;
         if (elem.calcTop)
             return elem.calcTop;
         var oElem=elem;
         while(elem){        
              if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderTopWidth)))&&(x!=0))
                 x+=parseInt(elem.currentStyle.borderTopWidth); 
             x+=elem.offsetTop;
                 elem=elem.offsetParent;
          } 
          oElem.calcTop=x;
          return x;
          
    }
    
    var ah,ab;
    function applyStyles() {
        if(ab)
            oDv.removeChild(dvBdy);
        if (ah)
            oDv.removeChild(dvHdr);
        dvHdr=document.createElement("div");
        dvBdy=document.createElement("div");
        CBE.boCSSBDY?dvBdy.className=CBE.boCSSBDY:defBdyStyle();
        CBE.boCSSHDR?dvHdr.className=CBE.boCSSHDR:defHdrStyle();
        dvHdr.innerHTML=CBE.boHDR;
        dvBdy.innerHTML=CBE.boBDY;
        ah=false;
        ab=false;
        if (CBE.boHDR!='') {        
            oDv.appendChild(dvHdr);
            ah=true;
        }    
        if (CBE.boBDY!=''){
            oDv.appendChild(dvBdy);
            ab=true;
        }    
    }
    
    var CSE,iterElem,LSE,CBE,LBE, totalScrollLeft, totalScrollTop, width, height ;
    var ini=false;
    
    // Customised function for inner window dimension
    function SHW() {
       if (document.body && (document.body.clientWidth !=0)) {
          width=document.body.clientWidth;
          height=document.body.clientHeight;
       }
       if (document.documentElement && (document.documentElement.clientWidth!=0) && (document.body.clientWidth + 20 >= document.documentElement.clientWidth)) {
          width=document.documentElement.clientWidth;   
          height=document.documentElement.clientHeight;   
       }   
       return [width,height];
    }
    
    
    var ID=null;
    function moveMouse(e) {
       //boxMove=true;
        e?evt=e:evt=event;
        
        CSE=evt.target?evt.target:evt.srcElement;
        
        if (!CSE.hasbox) {
           // Note we need to scan up DOM here, some elements like TR don't get triggered as srcElement
           iElem=CSE;
           while ((iElem.parentNode) && (!iElem.hasbox)) {
              scanBO(iElem);
              iElem=iElem.parentNode;
           }       
        }
        
        if ((CSE!=LSE)&&(!isChild(CSE,dvHdr))&&(!isChild(CSE,dvBdy))){        
           if (!CSE.boxItem) {
                iterElem=CSE;
                while ((iterElem.hasbox==2)&&(iterElem.parentNode))
                        iterElem=iterElem.parentNode; 
                CSE.boxItem=iterElem;
                }
            iterElem=CSE.boxItem;
            if (CSE.boxItem&&(CSE.boxItem.hasbox==1))  {
                LBE=CBE;
                CBE=iterElem;
                if (CBE!=LBE) {
                    applyStyles();
                    if (!CBE.requireclick)
                        if (CBE.fade) {
                            if (ID!=null)
                                clearTimeout(ID);
                            ID=setTimeout("fadeIn("+CBE.fadespeed+")",CBE.delay);
                        }
                        else {
                            if (ID!=null)
                                clearTimeout(ID);
                            COL=1;
                            ID=setTimeout("oDv.style.visibility='visible';ID=null;",CBE.delay);                        
                        }
                    if (CBE.IEbugfix) {hideSelects();} 
                    fixposx=!isNaN(CBE.fixX)?Left(CBE)+CBE.fixX:CBE.absX;
                    fixposy=!isNaN(CBE.fixY)?Top(CBE)+CBE.fixY:CBE.absY;            
                    lockX=0;
                    lockY=0;
                    boxMove=true;
                    ox=CBE.offX?CBE.offX:10;
                    oy=CBE.offY?CBE.offY:10;
                }
            }
            else if (!isChild(CSE,dvHdr) && !isChild(CSE,dvBdy) && (boxMove))    {
                // The conditional here fixes flickering between tables cells.
                if ((!isChild(CBE,CSE)) || (CSE.tagName!='TABLE')) {               
                   CBE=null;
                   if (ID!=null)
                          clearTimeout(ID);
                   fadeOut();
                   showSelects();
                }
            }
            LSE=CSE;
        }
        else if (((isChild(CSE,dvHdr) || isChild(CSE,dvBdy))&&(boxMove))) {
            totalScrollLeft=0;
            totalScrollTop=0;
            
            iterElem=CSE;
            while(iterElem) {
                if(!isNaN(parseInt(iterElem.scrollTop)))
                    totalScrollTop+=parseInt(iterElem.scrollTop);
                if(!isNaN(parseInt(iterElem.scrollLeft)))
                    totalScrollLeft+=parseInt(iterElem.scrollLeft);
                iterElem=iterElem.parentNode;            
            }
            if (CBE!=null) {
                boxLeft=Left(CBE)-totalScrollLeft;
                boxRight=parseInt(Left(CBE)+CBE.offsetWidth)-totalScrollLeft;
                boxTop=Top(CBE)-totalScrollTop;
                boxBottom=parseInt(Top(CBE)+CBE.offsetHeight)-totalScrollTop;
                doCheck();
            }
        }
        
        if (boxMove&&CBE) {
            // This added to alleviate bug in IE6 w.r.t DOCTYPE
            bodyScrollTop=document.documentElement&&document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop;
            bodyScrollLet=document.documentElement&&document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft;
            mouseX=evt.pageX?evt.pageX-bodyScrollLet:evt.clientX-document.body.clientLeft;
            mouseY=evt.pageY?evt.pageY-bodyScrollTop:evt.clientY-document.body.clientTop;
            if ((CBE)&&(CBE.windowLock)) {
                mouseY < -oy?lockY=-mouseY-oy:lockY=0;
                mouseX < -ox?lockX=-mouseX-ox:lockX=0;
                mouseY > (SHW()[1]-oDv.offsetHeight-oy)?lockY=-mouseY+SHW()[1]-oDv.offsetHeight-oy:lockY=lockY;
                mouseX > (SHW()[0]-dvBdy.offsetWidth-ox)?lockX=-mouseX-ox+SHW()[0]-dvBdy.offsetWidth:lockX=lockX;            
            }
            oDv.style.left=((fixposx)||(fixposx==0))?fixposx+"px":bodyScrollLet+mouseX+ox+lockX+"px";
            oDv.style.top=((fixposy)||(fixposy==0))?fixposy+"px":bodyScrollTop+mouseY+oy+lockY+"px";        
            
        }
    }
    
    function doCheck() {    
        if (   (mouseX < boxLeft)    ||     (mouseX >boxRight)     || (mouseY < boxTop) || (mouseY > boxBottom)) {
            if (!CBE.requireclick)
                fadeOut();
            if (CBE.IEbugfix) {showSelects();}
            CBE=null;
        }
    }
    
    function pauseBox(e) {
       e?evt=e:evt=event;
        boxMove=false;
        evt.cancelBubble=true;
    }
    
    function showHideBox(e) {
        oDv.style.visibility=(oDv.style.visibility!='visible')?'visible':'hidden';
    }
    
    function hideBox(e) {
        oDv.style.visibility='hidden';
    }
    
    var COL=0;
    var stopfade=false;
    function fadeIn(fs) {
            ID=null;
            COL=0;
            oDv.style.visibility='visible';
            fadeIn2(fs);
    }
    
    function fadeIn2(fs) {
            COL=COL+fs;
            COL=(COL>1)?1:COL;
            oDv.style.filter='alpha(opacity='+parseInt(100*COL)+')';
            oDv.style.opacity=COL;
            if (COL<1)
             setTimeout("fadeIn2("+fs+")",20);        
    }
    
    
    function fadeOut() {
        oDv.style.visibility='hidden';
        
    }
    
    function isChild(s,d) {
        while(s) {
            if (s==d) 
                return true;
            s=s.parentNode;
        }
        return false;
    }
    
    var cSrc;
    function checkMove(e) {
        e?evt=e:evt=event;
        cSrc=evt.target?evt.target:evt.srcElement;
        if ((!boxMove)&&(!isChild(cSrc,oDv))) {
            fadeOut();
            if (CBE&&CBE.IEbugfix) {showSelects();}
            boxMove=true;
            CBE=null;
        }
    }
    
    
    function showSelects(){
       var elements = document.getElementsByTagName("select");
       for (i=0;i< elements.length;i++){
          elements[i].style.visibility='visible';
       }
    }
    
    function hideSelects(){
       var elements = document.getElementsByTagName("select");
       for (i=0;i< elements.length;i++){
       elements[i].style.visibility='hidden';
       }
    }
    NB:
    1. it also works with no doc type defined.
    2. I had to set this line oDv.style.position="relative"; to relative to make it show up at all when the html is specified - it is usually set to fixed. However in relative mode - the tooltip locks to the top and only moves left and right


    I have made some progress and this kind of fixes the issue,
    The background image in the body tag stays put evenly in the middle, but the wrapper or containing div always sticks 50px out from the left edge as you adjust the window width of the browser. Ideally it would be better to always stay centred. because I have an edge darkness on the image, unless there is a way to put a separate image on either side...

    CSS
    Code:
    body { 
    display: block;
    background-image: url('http://www.mysite.com.au/bg.png');
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: center center;   
    margin-left: auto;
    margin-right:auto;
    }
    #wrapper {
        display: block;
        background: white;
        position: fixed;
        top:0px;
        left: 50px;    
        width:1024px;
        height:768px;
    }
    So maybe old css is better - and a JS fix might be better in this case??
    Last edited by Bambam007; 10-15-2008 at 07:34 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Please don't change the color of entire text, as it's hard to read (at least for me). You may edit it.

    A link to your page is better than the above code.
    html {
    width:1024px;
    margin:0 auto;
    }
    I think it's a bad practice to change the default width of html and body elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •