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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mouseover setTimeout delay keeping tooltip from showing

    I have a tooltip script from http://www.dynamicdrive.com/ that I have modified to change my background image based on mouse location.

    I would like to add a 2 second delay on the mouseover event to make sure people really want to see the tip. The problem I am having is getting the event to show with the delay. Right now I have tried:

    setTimeout(function(){ddrivetip('Select your.....')},2000) but this requires you to slightly shift the mouse after the two seconds to get the tip to appear. (It also appears to make the tip show up and follwo the mouse around)

    I have a sample page up at http://www.spectrumedu.com/tootip.html with my style sheet and modified js.

    I have seen several tooltips that allow a delay (such as wz_tooltip.js) but they don't allow me to change my background image.

    Thanks in advance for any advice.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    your link is broken but try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    <!--
    .tt1 {
      width:200px;height:100px;background-color:#FFFFCC;background-image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
    }
    
    -->
    </style><script language="JavaScript" type="text/javascript">
    <!--
    // ToolTip with Delay (25-May-2006)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    
    // **** Application Notes
    
    // The appearance of the tool tip is specified by a style class rule.
    
    // Activated by a mouseover event and hidden by a mouseout event.
    // e.g.
    // <span onmouseover="zxcToolTip(this,1000,'tt1','sometext',30,-5);" onmouseout="zxcToolTip(this,500);" >Link</span>
    // where:
    // parameter 0 = the object calling the tool tip.                  (object)
    // parameter 1 = the show tool tip delay (milliSec).               (digits)
    // parameter 2 = the style class rule name of the tool tip.        (string)
    // parameter 3 = the HTML text to be displayed in the tool tip.    (string)
    // parameter 4 = the horizontal(X) offset from the calling object. (digits)
    // parameter 5 = the vertical(Y)   offset from the calling object. (digits)
    //
    // The mouseout call hides the tool tip
    // where:
    // parameter 0 = the object calling the tool tip.    (object)
    // parameter 1 = the hide tool tip delay (milliSec). (digits)
    //
    
    
    // ***** Functional Code - NO NEED to Change
    
    var zxcOOPCnt=0;
    
    function zxcToolTip(zxcobj,zxctime,zxcclass,zxctxt,zxcx,zxcy){
     if (!zxcobj.tt){
      zxcobj.tt=new  zxcOOPToolTip(zxcobj,zxcclass,zxctxt,zxcx,zxcy);
     }
     clearTimeout(zxcobj.tt.to);
     if (zxcclass){ zxcobj.tt.setTimeOut('show()',zxctime||1); }
     else { zxcobj.tt.setTimeOut('hide()',zxctime||1); }
    }
    
    
    function zxcOOPToolTip(zxcobj,zxcclass,zxctxt,zxcx,zxcy){
     zxcx=zxcx||0;
     zxcy=zxcy||0;
     this.tt=zxcStyle('DIV',{position:'absolute',visibility:'hidden',left:(zxcPos(zxcobj)[0]+zxcx)+'px',top:(zxcPos(zxcobj)[1]+zxcy)+'px'},zxctxt);
     document.getElementsByTagName('BODY')[0].appendChild(this.tt);
     this.tt.className=zxcclass;
     this.ref='zxcooptt'+zxcOOPCnt++;
     window[this.ref]=this;
     this.to=null;
    }
    
    zxcOOPToolTip.prototype.show=function(){
     zxcStyle(this.tt,{visibility:'visible'});
    }
    
    zxcOOPToolTip.prototype.hide=function(){
     zxcStyle(this.tt,{visibility:'hidden'});
    }
    
    zxcOOPToolTip.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    function zxcStyle(zxcele,zxcstyle,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxctxt){ zxcele.innerHTML=zxctxt; }
     return zxcele;
    }
    
    
    //-->
    </script>
    
    </head>
    
    <body>
    <span onmouseover="zxcToolTip(this,1000,'tt1','sometext',30,-5);" onmouseout="zxcToolTip(this,500);" >Link</span>
    
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    fixed the link

    here is the link corrected:

    http://www.spectrumedu.com/ToolTip.html

    I will look at your solution tomorrow. Thanks for posting.

  • #4
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Delay solved

    Thanks for the posts. I have found a fix for the delay problem. You can see the result here:
    http://www.spectrumedu.com/tooltip.html.

    I am now working on making selected tips "sticky"

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    think this does about the same with less code and sticky
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    <!--
    
    -->
    </style><script language="JavaScript" type="text/javascript">
    <!--
    // ToolTip with Delay (31-May-2006)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // A PopUp Tool Tip where Delays may be specified for both MouseOver PopUp and MouseOut PopDown.
    // On PopUp the Tool Tip will follow the mouse with specified offsets until MouseOut.
    // Alternatively the Tool Tip may be 'Sticky' to PopUp at a specified anchor position.
    
    // **** Application Notes
    
    // Tool tip elements are defined in the HTML Code
    // and must be assigned a unique ID name,
    // have a style position of 'position:absolute'
    // and visibility 'visibility:hidden'.
    // e.g.
    // <div id="TT2" style=position:absolute;visibility:hidden;width:200px;height:200px;background-color:blue;" >
    // My Tool Tip
    // </div>
    //
    // A tool tip may be used for more than one application.
    
    
    // Activated by a mouseover event and hidden by a mouseout event.
    // e.g.
    // <span onmouseover="zxcToolTip(this,1000,'tt1','sometext',30,-5);" onmouseout="zxcToolTip(this,500);" >Link</span>
    // where:
    // parameter 0 = the object calling the tool tip.                                     (object)
    // parameter 1 = the show tool tip delay (milliSec).                                  (digits)
    // parameter 2 = the unique ID name if the element to be use as a tool tip.           (string)
    // parameter 3 = the horizontal(X) offset from the calling object.                    (digits)
    // parameter 4 = the vertical(Y)   offset from the calling object.                    (digits)
    // parameter 5 = omit if sticky is not required
    //               or the unique ID name of the element to be use as a tool tip anchor. (string)
    //
    //
    // The mouseout call hides the tool tip
    // where:
    // parameter 0 = the object calling the tool tip.    (object)
    // parameter 1 = the hide tool tip delay (milliSec). (digits)
    //
    
    
    // ***** Functional Code - NO NEED to Change
    
    var zxcOOPCnt=0;
    var zxcObj;
    
    function zxcToolTip(zxcobj,zxctime,zxcid,zxcx,zxcy,zxcanc){
     if (!zxcobj.tt){
      zxcanc=document.getElementById(zxcanc);
      zxcobj.tt=new  zxcOOPToolTip(zxcobj,zxcid,zxcx,zxcy,zxcanc);
      if (!zxcanc){
       zxcobj.onmousemove=function(event){ zxcobj.tt.drag(event); }
      }
     }
     clearTimeout(zxcobj.tt.to);
     if (zxcobj.tt.set){ zxcobj.tt.set=false; zxcobj.tt.setTimeOut('show()',zxctime||1); }
     else { zxcobj.tt.set=true; zxcobj.tt.setTimeOut('hide()',zxctime||1); }
     zxcObj=zxcobj.tt.tt;
    }
    
    function zxcOOPToolTip(zxcobj,zxcid,zxcx,zxcy,zxcanc){
     this.osx=zxcx||0;
     this.osy=zxcy||0;
     this.tt=document.getElementById(zxcid);
     if (zxcanc){
      this.tt.style.left=(zxcPos(zxcanc)[0]+this.osx)+'px';
      this.tt.style.top=(zxcPos(zxcanc)[1]+this.osy)+'px';
     }
     this.ref='zxcooptt'+zxcOOPCnt++;
     window[this.ref]=this;
     this.to=null;
     this.set=true;
    }
    
    zxcOOPToolTip.prototype.show=function(){
     this.tt.style.visibility='visible';
    }
    
    zxcOOPToolTip.prototype.hide=function(){
     this.tt.style.visibility='hidden';
    }
    
    zxcOOPToolTip.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    zxcOOPToolTip.prototype.drag=function(event){
     this.tt.style.left=(zxcMse(event)[0]+this.osx)+'px';
     this.tt.style.top=(zxcMse(event)[1]+this.osy)+'px';
    }
    
    function zxcDrag(event){
     if (!zxcObj){ return; }
    document.Show.Show1.value=vic++;
     zxcObj.style.left=(zxcMse(event)[0])+'px';
     zxcObj.style.top=(zxcMse(event)[1])+'px';
    }
    
    
    function zxcMse(event){
     if(!event) var event=window.event;
     if (document.all){ return [event.clientX+zxcDocS()[0],event.clientY+zxcDocS()[1]]; }
     else { return[event.pageX,zxcMseY=event.pageY]; }
    }
    
    function zxcDocS(){
     var zxcsx,zxcsy;
     if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
     else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
     return [zxcsx,zxcsy];
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    
    
    //-->
    </script>
    
    </head>
    
    <body>
    <span onmouseover="zxcToolTip(this,1000,'TT1',30,-5);" onmouseout="zxcToolTip(this,500);" >Link over this Text</span>
    <br>
    <br>
    <br>
    <span onmouseover="zxcToolTip(this,1000,'TT2',30,-5,'A1');" onmouseout="zxcToolTip(this,5500);" >Link over this Text - Sticky</span>
    
    <div id="TT1" style=position:absolute;visibility:hidden;width:200px;height:200px;background-color:red;" ></div>
    
    <div id="TT2" style=position:absolute;visibility:hidden;width:200px;height:200px;background-color:blue;" ></div>
    <div id="A1" style=position:absolute;visibility:hidden;left:400px;top:400px;hidden;width:1px;height:1px;background-color:red;" ></div>
    
    </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the reply. I put your code in the page and it works great. The reason I am using the other script is it's ability to track where the mouse is and move the anchor location and background image. i.e. if the mouse is too close to the right window edge the tooltip flips to the left and swaps the background image.

    Is there a way to modify your script to set the sticky tip next to the mouse or does the location have to be predefined in the div tag?

    I would hope to be able to move the tips around based on mouse proximity to the browser edges so that no matter the resolution or window size the tip shows correctly.

    Thanks for the advice.

    Brent

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    edge detection is not a problem but as the tool tip is following the mouse thought that the tolltip left or right could be set by the by the offset parameters.

    Tis what you mean by sticky, remote from the mouseover element or the mouseover element itself, The mouseover element can also be the anchor so the tooltip will not track the mouse.

    will do a edge avoid tonight but not sure that it is nesessary
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    edge detection and other facilities in 3.75K

    may still need some tweeks but see

    http://www.vicsjavascripts.org.uk/To.../ToolTipII.htm
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your code looks like it does everything I need except one function.

    In the code I am trying to use now, I have figured out a way to change the css style (so that I can change the background image)

    Code:
    if (bottomedge<tipobj.offsetHeight){
    	tipobj.className="dhtmltooltip_tl"
    	tipobj.style.top=curY-tipobj.offsetHeight+10+"px"
    	}
    	else{
    	tipobj.className="dhtmltooltip_bl"
    	tipobj.style.top=curY+offsetfromcursorY+"px"
    Tooltip example page
    Tooltip js code

    When the mouse gets too close to the right edge, the tip moves to the left and changes the image (so that the pointer on my image is now on the right). I am trying to get the same functionality that Netflix is doing (albeit in a less elegant way)

    Obviously js isn't a strenght of mine. Can I swap css classes on the tooltip based on mouse location in your code? If so, where do I need to look? Everything else is exactly what I need.

    Thanks

    Brent

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    hmm

    tis possible but probably a 'special' as the code you are using

    will do a mod for you
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    <!--
    .C1 {
      background-image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
    }
    .C2 {
      background-image:url(http://www.vicsjavascripts.org.uk/StdImages/Two.gif);
    }
    
    .C13 {
      background-image:url(http://www.vicsjavascripts.org.uk/StdImages/Three.gif);
    }
    
    .C14 {
      background-image:url(http://www.vicsjavascripts.org.uk/StdImages/Four.gif);
    }
    
    .C15 {
      background-image:url(http://www.vicsjavascripts.org.uk/StdImages/Five.gif);
    }
    
    -->
    </style></head>
    
    <body>
    <div style="position:relative;top:100px;font-size:18px;" >Examples
    <br>
    <div onmouseover="zxcToolTip(this,1000,'TT0',23,-55,null,['C1','2','3','4','5']);" onmouseout="zxcToolTip(this,500);"
    style="position:relative;width:400px;float:right;top:0px;" >Link over this Text - follow mouse</div>
    <br>
    <br>
    </div>
    <div id="TT0" class="C1" style=position:absolute;visibility:hidden;width:200px;height:200px;background-color:blue;" ></div>
    
    <br>
    <br>
    <br>
    <br>
    <br>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // Tool Tip II  (01-June-2006)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // A PopUp 'ToolTip' where Delays may be specified for both MouseOver PopUp and MouseOut PopDown.
    // On PopUp the 'ToolTip'  may follow the mouse with specified offsets until MouseOut.
    // Alternatively the 'ToolTip' may be 'Sticky' to PopUp at a specified anchor position.
    // This anchor may be the object calling the 'ToolTip'  for a static 'ToolTip'.
    // MouseOver of the visible 'ToolTip' may optionally retain the 'ToolTip' visible
    // until MouseOut of the 'ToolTip'
    
    // The 'ToolTip' will avoid the window edges to always be visible.
    
    
    //***** Functional Code - NO NEED TO CHANGE
    
    var zxcOOPCnt=0;
    
    function zxcToolTip(zxcobj,zxctime,zxcid,zxcx,zxcy,zxcanc,zxcc){
     var zxcobj=zxcObject(zxcobj);
     if (!zxcobj.tt){
      var zxcanc=zxcObject(zxcanc);
      zxcobj.tt=new  zxcOOPToolTip(zxcobj,zxcid,zxcx,zxcy,zxcanc,zxcc);
      if (!zxcanc){
       zxcobj.onmousemove=function(event){ zxcobj.tt.drag(event); }
      }
     }
     clearTimeout(zxcobj.tt.to);
     zxcobj.tt.tog(zxctime);
    }
    
    function zxcOOPToolTip(zxcobj,zxcid,zxcx,zxcy,zxcanc,zxcc){
     this.osx=zxcx||0;
     this.osy=zxcy||0;
     this.cls=zxcc;
     this.tt=document.getElementById(zxcid);
     this.tt.style.left=(zxcPos(zxcobj)[0])+'px';
     this.tt.style.top=(zxcPos(zxcobj)[1])+'px';
     if (zxcanc){
      this.left=(zxcPos(zxcanc)[0]+this.osx);
      this.top=(zxcPos(zxcanc)[1]+this.osy);
      this.edge(zxcWWHS()[2],zxcWWHS()[3],zxcWWHS()[0]+zxcWWHS()[2],zxcWWHS()[1]+zxcWWHS()[3]);
      this.tt.style.left=(this.left)+'px';
      this.tt.style.top=(this.top)+'px';
     }
     this.ref='zxcooptt'+zxcOOPCnt++;
     window[this.ref]=this;
     this.to=null;
     this.set=true;
    }
    
    zxcOOPToolTip.prototype.tog=function(zxctime){
     if (this.set){ this.set=false; this.setTimeOut('show()',zxctime||1); }
     else { this.set=true; this.setTimeOut('hide()',zxctime||1); }
    }
    
    zxcOOPToolTip.prototype.show=function(){
     this.tt.style.visibility='visible';
    }
    
    zxcOOPToolTip.prototype.hide=function(){
     this.tt.style.visibility='hidden';
    }
    
    zxcOOPToolTip.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    zxcOOPToolTip.prototype.drag=function(event){
     this.left=(zxcMse(event)[0]+this.osx);
     this.top=(zxcMse(event)[1]+this.osy);
     this.edge(zxcMse(event)[0],zxcMse(event)[1],zxcMse(event)[0],zxcMse(event)[1]);
     this.tt.style.left=(this.left)+'px';
     this.tt.style.top=(this.top)+'px';
    }
    
    zxcOOPToolTip.prototype.edge=function(zxcx,zxcy,zxcx1,zxcy1){
     if (this.cls){ this.tt.className=this.cls[0]; }
     if (this.left<zxcWWHS()[2]){ this.left=zxcx+10; if (this.cls){ this.tt.className=this.cls[0]+this.cls[1]; } }
     else  if (this.left+this.tt.offsetWidth>zxcWWHS()[0]+zxcWWHS()[2]){ this.left=zxcx1-this.tt.offsetWidth-10;  if (this.cls){this.tt.className=this.cls[0]+this.cls[2]; } }
     if (this.top<zxcWWHS()[3]){ this.top=zxcy+10;  if (this.cls){ this.tt.className=this.cls[0]+this.cls[3]; } }
     else  if (this.top+this.tt.offsetHeight>zxcWWHS()[1]+zxcWWHS()[3]){ this.top=zxcy1-this.tt.offsetHeight-10;  if (this.cls){ this.tt.className=this.cls[0]+this.cls[4]; } }
    }
    
    function zxcMse(event){
     if(!event) var event=window.event;
     if (document.all){ return [event.clientX+zxcDocS()[0],event.clientY+zxcDocS()[1]]; }
     else { return[event.pageX,zxcMseY=event.pageY]; }
    }
    
    function zxcDocS(){
     var zxcsx,zxcsy;
     if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
     else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
     return [zxcsx,zxcsy];
    }
    
    function zxcObject(zxcobj){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     return zxcobj;
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    function zxcWWHS(){
     var winww,zxcwh,zxcsl,zxcst,zxcwc;
     if (window.innerHeight){
      zxcwh=window.innerHeight-20;
      zxcww=window.innerWidth-20;
      zxcsl=window.pageXOffset;
      zxcst=window.pageYOffset;
     }
     else if (document.documentElement.clientHeight){
      zxcwh=document.documentElement.clientHeight;
      zxcww=document.documentElement.clientWidth;
      zxcsl=document.documentElement.scrollLeft;
      zxcst=document.documentElement.scrollTop;
     }
     else if (document.body.clientHeight){
      zxcwh=document.body.clientHeight;
      zxcww=document.body.clientWidth;
      zxcsl=document.body.scrollLeft;
      zxcst=document.body.scrollTop;
     }
     return [zxcww,zxcwh,zxcsl,zxcst];
    }
    
    function zxcTTMseOver(zxcpid){
     var zxcp=zxcObject(zxcpid)
     clearTimeout(zxcp.tt.to);
     zxcp.tt.set=false;
    }
    
    function zxcTTMseOut(zxcpid,zxctime){
     var zxcp=zxcObject(zxcpid)
     zxcp.tt.tog(zxctime);
    }
    
    //-->
    </script>
    
    
    </body>
    
    </html>
    OK incorperated the facility in the main code will be uploaded in a few minutes
    Last edited by vwphillips; 06-01-2006 at 08:15 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #12
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the script. I have it running here.

    FireFox shows it correctly right now.

    I have come across two items to ask you about. The first is when you make a tip sticky

    Code:
    <a id="Par1" onmouseover="zxcToolTip(this,1000,'TT1',23,-20,this,'dhtmltooltip_');"
     onmouseout="zxcToolTip(this,10000);" 
    style="position:absolute;left:450px;top:50px" >Middle Top</a>
    When I do that, if I look at another tip and then go back to the sticky tip (middle top) the tip appears at the last tip location. Am I using the anchor right?

    The second is the browser compatibility. Take a look at the link above in FireFox and then in IE 6. In Safari (1.0.3) and firefox the tips use the right images, in IE it has the wrong images. Is there a way to determine the browser so that I can tell each version what class to use?

    Thanks again for all of your help.

    Brent

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Anchors updated (previously could not reuse an anchored tool tip) fixed.

    having trouble picking up your images, would help if you could zip and post

    got the images now

    You have changed the edge conditionals, cant quite make sence of it but thats up to you
    but seems to be consotant between browsers.

    the problem may be that the script allows for a bottom/side scroll bar in not IE browsers
    Code:
    function zxcWWHS(){
     var winww,zxcwh,zxcsl,zxcst,zxcwc;
     if (window.innerHeight){
      zxcwh=window.innerHeight-20;
      zxcww=window.innerWidth-20;
      zxcsl=window.pageXOffset;
      zxcst=window.pageYOffset;
     }
    and some browsers do not like changing bg image too quickly

    I will update for the anchor and think about the edge problem

    the latest version grown to 4.5K can now be used for multiple level menus
    Last edited by vwphillips; 06-02-2006 at 03:30 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #14
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Vic,

    Images

    I have attached my images (even though it appears you finally got them) and an image of the tooltips as they appear in IE 6 and and image as they appear in FF. You can see that IE does swap the background image based on location, it just gets the wrong image or class. I was wondering if you could do something like this:

    (in layman's terms)
    Code:
    zxcOOPToolTip.prototype.edge=function(zxcx,zxcy,zxcx1,zxcy1){
    var ie=document.all
    var ns6=document.getElementById && !document.all
    if (ie){
    if (this.cls){ this.tt.className=this.cls; }//middle top
     if (this.left<zxcWWHS()[2]){ this.left=zxcx+10; if (this.cls){ this.tt.className=this.cls+1; } }//?
     else  if (this.left+this.tt.offsetWidth>zxcWWHS()[0]+zxcWWHS()[2]){ this.left=zxcx1-this.tt.offsetWidth-10;  if (this.cls){this.tt.className=this.cls+2; } }//left top
     if (this.top<zxcWWHS()[3]){ this.top=zxcy+10;  if (this.cls){ this.tt.className=this.cls+4; } }//?
     else  if (this.top+this.tt.offsetHeight>zxcWWHS()[1]+zxcWWHS()[3]){ this.top=zxcy1-this.tt.offsetHeight-10;  if (this.cls){ this.tt.className=this.cls+4; } }//middle bottom
    }
    else {
    if (this.cls){ this.tt.className=this.cls+1; }//middle top
     if (this.left<zxcWWHS()[2]){ this.left=zxcx+10; if (this.cls){ this.tt.className=this.cls+2; } }//?
     else  if (this.left+this.tt.offsetWidth>zxcWWHS()[0]+zxcWWHS()[2]){ this.left=zxcx1-this.tt.offsetWidth-10;  if (this.cls){this.tt.className=this.cls+3; } }//left top
     if (this.top<zxcWWHS()[3]){ this.top=zxcy+10;  if (this.cls){ this.tt.className=this.cls; } }//?
     else  if (this.top+this.tt.offsetHeight>zxcWWHS()[1]+zxcWWHS()[3]){ this.top=zxcy1-this.tt.offsetHeight-10;  if (this.cls){ this.tt.className=this.cls; } }//middle bottom
    }
    }
    I am not sure if this would work or not.

  • #15
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Vic,

    I just got the code I previously posted to work

    Code:
    zxcOOPToolTip.prototype.edge=function(zxcx,zxcy,zxcx1,zxcy1){
    var ie=document.all
    var ns6=document.getElementById && !document.all.....
    Now I just need to clean up my images and offsets. Thanks for your help. This is running in IE 6, FF 1.5, Safari 1.0.3 (MAC), Netscape 7.2 (MAC), Camino, and heaven forbid IE 5.5 on WIN98. The only browser that doesn't work right now is IE for MAC.

    Thanks again for all of your help. If you send me some text to include in the script for recoginition that you wrote the script I will add it. I sure couldn't have done it.

    -Brent


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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