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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with form appearing over drop down text box

    Hello,

    Please have a look at:

    http://www.urban-exposure.com/test.html

    If you click on the arrow on the right hand side where it says 'commentary', a text box appears.

    The problem is that the form below it appears over the text - is there any way of preventing this?


  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    this is the subject of a number of recent posts
    An IE fecher

    need an IFRAME under the DIV

    example
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>ToolTip</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=windows-1252">
    
    <style type="text/css">
    <!--
    .Mess {
      position:absolute;visibility:hidden;width:100px;top:0px;border:solid black 1px;
    }
    .zxcBG {
      position:absolute;width:100%;top:0px;left:0px;background-color:#FFFFCC;
    }
    .zxcContent {
      position:absolute;width:100%;top:0px;left:0px;text-align:center;font-size:12px;
    }
    -->
    </style>
    
    
    </head>
    
    <body  bgColor="#f8cd76" >
    
    
    <center>
    <br>
    <br>
    <br>
    <table id="ToolTip" border="0" cellspacing="0"  cellpadding="5" >
      <tr>
        <td id="T1" onmouseover="zxcInitToolTip('T1','Mess2',20,30);" width="100" align="center" bgcolor="#999966" >Topic 1</td>
        <td id="T2" onmouseover="zxcInitToolTip('T2','Mess1',20,30);" width="100" align="center" bgcolor="#FFFF99" >Topic 2</td>
        <td id="T3" onmouseover="zxcInitToolTip('T3','Mess4',20,30);" width="100" align="center" bgcolor="#FFFFCC" >Topic 3</td>
        <td id="T4" onmouseover="zxcInitToolTip('T4','Mess4',20,30);" width="100" align="center" bgcolor="#CC9966" >Topic 4</td>
      </tr>
    </table>
    <select ><option>rrrrrrrrrxxxxxxxxxxxxxxxxxxxxxxxxxrrrrrrrrrrrrrrrrrrr</option></select><br>
    <br>
    <br>
    MouseOver this <a id="T5" style="color:blue;text-decoration:underline;" onmouseover="zxcInitToolTip('T5','Mess4',20,-50);" > Text </a> to see the effect.
    <br>
    
    
    
    <div id="Mess1" class="Mess" style="overflow:hidden;width:150px;height:30px;" >
     <div class="zxcBG" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="150" height="30" ></div>
     <div class="zxcContent" >
     Message 1
     </div>
    </div>
    
    <div id="Mess2" class="Mess" style="overflow:hidden;width:150px;height:50px;background-color:red;padding:5px;" >
    <a href="http://www.vicsjavascripts.org.uk" >
    Message 2
    </a>
    </div>
    
    <div id="Mess3" class="Mess"  style="overflow:hidden;width:150px;height:30px;" >
    Message 3
    </div>
    
    <div id="Mess4" class="Mess" style="overflow:hidden;width:160px;height:65px;">
     <div class="zxcBG" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="65" ></div>
     <div class="zxcContent" >
     <a href="http://www.vicsjavascripts.org.uk" >VicsJavaSripts</a><br>
     <a href="http://www.js-examples.com" >JS-Examples</a><br>
     <div style="position:relative;width:100px;background-color:red;" >Message 3</div>
     Message 4<br>
     </div>
    </div>
    
    <br>
    <br>
    <script language="JavaScript" type="text/javascript">
    <!--
    // ToolTip zxcPart1 (05-12-2005)
    // by Vic Phillips zxcPart1  http://www.vicsjavascripts.org.uk
    
    
    // MouseOver a topic and the ToolTip will appear
    // MouseOut or MouseOver another topic and the first ToolTip will disappear
    // while the ToolTip for the current topic appears.
    
    // MouseOver a ToolTip to prevent the ToolTip retracting.
    
    
    // Each ToolTip may be specifically positioned relative to the topic.
    
    
    
    // There may be as many topics or ToolTips as required on a page.
    // Each topic may have a specific ToolTip or share a ToolTip.
    
    
    // Application Notes.
    
    // Elements requiring a ToolTip must be allocated a unique id
    
    // The ToolTips are defined in the HTML code and may contain common HTML Code including links
    // Each ToolTip must have a unique id.
    // The ToolTip style must be set in a class or inline style to
    // position must be absolute,
    // visibility must be hidden.
    // e.g.
    // <div id="Mess2" class="Mess" ><a href="http://www.vicsjavascripts.org.uk" >Message 2</a></div>
    
    // The Script would normally be initialised from a mouseover event
    // eg
    //<table id="ToolTip" border="0" cellspacing="0"  cellpadding="5" >
    //  <tr>
    //    <td id="T1" onmouseover="zxcInitToolTip('T1','Mess2',20,30);" width="100" align="center" bgcolor="#999966" >Topic 1</td>
    //    <td id="T2" onmouseover="zxcInitToolTip('T2','Mess1',20,30);" width="100" align="center" bgcolor="#FFFF99" >Topic 2</td>
    //    <td id="T3" onmouseover="zxcInitToolTip('T3','Mess4',20,30);" width="100" align="center" bgcolor="#FFFFCC" >Topic 3</td>
    //    <td id="T4" onmouseover="zxcInitToolTip('T4','Mess4',20,30);" width="100" align="center" bgcolor="#CC9966" >Topic 4</td>
    //  </tr>
    // </table>
    // Each parameter of the call 'zxcInitToolTip(' containes an array defining each ToolTip specification
    // field 0 = the unique id of the element to attach the ToolTip to (string)
    // field 1 = the unique id if the ToolTip <DIV>                    (string)
    // field 2 = the horizontal(X) offset of the ToolTip               (digits)
    // field 3 = the   vertical(Y) offset of the ToolTip               (digits)
    
    
    
    
    // All variables, function names etc are prfixed with 'zxc' to minimise conflicts with other JavaScripts
    
    // Tested with IE6 and Mozilla FireFox
    
    
    // Global Customising Variables
    
    var zxcZIndex=4;          // the base Z-Index of the ToolTips
    var zxcSpeed=20;          // The speed of extension/retraction                    (minimum = 2 = fastest)
    var zxcIncrement=2;       // the height increment during the extension/retraction (minimum 1 )
    var zxcMouseOutDelay=500; // the delay before retracting the ToolTip              (minimum 1 )
    
    
    //-->
    </script>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // YoYo ToolTip zxcPart2 (02-12-2005)
    // by Vic Phillips zxcPart1  http://www.vicsjavascripts.org.uk
    
    // Functional Code - NO NEED to change
    
    var zxcLast,zxcTO,zxcIF;
    var zxcCnt=0;
    
    if (zxcSpeed<2){ zxcSpeed=2; }
    if (zxcIncrement<1){ zxcIncrement=1; }
    if (zxcMouseOutDelay<1){ zxcMouseOutDelay=1; }
    
    function zxcInitToolTip(){
     zxc=zxcInitToolTip.arguments;
     zxcmt=document.getElementById(zxc[0]);
     if (zxcmt.m){return }
     zxcbdy=document.getElementsByTagName('BODY')[0];
     if (!zxcIF){
      zxcIF=document.createElement('IFRAME')
      zxcIF.style.position='absolute';
      zxcIF.style.visibility='hidden';
      zxcbdy.appendChild(zxcIF);
     }
     zxcmt.m=document.getElementById(zxc[1]).cloneNode(true);
     zxcbdy.appendChild(zxcmt.m);
     zxcmt.m.ifr=zxcIF.cloneNode(true);
     zxcbdy.appendChild(zxcmt.m.ifr);
     zxcmt.m.id='zxcid'+(zxcCnt++);
     if (!zxc[2]){ zxc[2]=0; }
     if (!zxc[3]){ zxc[3]=0; }
     zxcmt.m.style.zIndex=zxcZIndex;
     zxcmt.m.ifr.style.width=zxcmt.m.offsetWidth+'px';
     zxcmt.m.ifr.style.height=zxcmt.m.offsetHeight+'px';
     zxcmt.pos=[zxcmt,zxc[2],zxc[3]];
     zxcmt.m.down=false;
     zxcAddOver(zxcmt);
     zxcAddOut(zxcmt);
     zxcAddOut(zxcmt.m);
     zxcAddClear(zxcmt.m);
    }
    
    function zxcOver(){
     clearTimeout(zxcTO);
     zxcLastObj();
     if (!this.m.down){
      this.m.down=true;
      this.m.style.left=(zxcPos(this.pos[0])[0]+this.pos[1])+'px';
      this.m.style.top=(zxcPos(this.pos[0])[1]+this.pos[2])+'px';
      this.m.style.visibility='visible';
      this.m.style.zIndex=zxcZIndex+2;
      if (document.all){ this.m.ifr.style.visibility='visible'; }
      this.m.ifr.style.zIndex=zxcZIndex+1;
      this.m.ifr.style.left=this.m.style.left;
      this.m.ifr.style.top=this.m.style.top;
     }
     else {
      this.mobj.down=false;
     }
     zxcLast=this;
    }
    
    function zxcLastObj(){
     if (zxcLast){
      zxcLast.m.style.zIndex=zxcZIndex;
      zxcLast.m.down=false;
      zxcLast.m.style.visibility='hidden';
      zxcLast.m.ifr.style.visibility='hidden';
     }
    }
    
    function zxcOut(){
     zxcTO=setTimeout('zxcLastObj()',zxcMouseOutDelay);
    }
    
    function zxcClear(){
     clearTimeout(zxcTO);
    }
    
    function zxcPos(zxc){
     zxcl=zxc.offsetLeft;
     zxct=zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcp=zxc.offsetParent;
      zxcl+=zxcp.offsetLeft;
      zxct+=zxcp.offsetTop;
      zxc=zxcp;
     }
     return [zxcl,zxct];
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    function zxcAddOver(zxc){
     if (zxc.addOver){ return; }
     zxc.addOver=zxcOver;
     zxcEventAdd(zxc,'mouseover','addOver');
    }
    
    function zxcAddOut(zxc){
     if (zxc.addOut){ return; }
     zxc.addOut=zxcOut;
     zxcEventAdd(zxc,'mouseout','addOut');
    }
    
    function zxcAddClear(zxc){
     if (zxc.addClear){ return; }
     zxc.addClear=zxcClear;
     zxcEventAdd(zxc,'mouseover','addClear');
    }
    
    
    //-->
    </script>
    
    
    </BODY>
    </html>

  • #3
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the info, but I'm not great with dissecting all that code - is there a simpler option?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <script type="text/javascript">
    <!--
    // Would appear that I did the original for you not long ago
    
    // Replace your current Com,Con script with this
    
    var Com,Con,zxcIF;
    var zxcZIndex=10;
    
    function  Position(){
     if (!zxcIF){
      zxcIF.document.createElement('IFRAME');
      zxcIF.style.position="absolute";
      zxcIF.style.visibility='hidden';
      zxcIF.style.zIndex=zxcZIndex;
      document.getElementsByTagName('BODY')[0].appendChild(zxcIF);
     }
     Com=document.getElementById('commentary');
     Con=document.getElementById('contents');
     Con.style.left=(zxcPos(Com)[0])+'px';
     Con.style.top=(zxcPos(Com)[1]+Com.offsetHeight)+'px';
     Con.style.zIndex=zxcZIndex+1;
     zxcIF.style.width=(Con.offsetWidth)+'px';
     zxcIF.style.height=(Con.offsetHeight)+'px';
     zxcIF.style.left=Con.style.left;
     zxcIF.style.top=Con.style.top;
    }
    
    function zxcPos(zxc){
     zxcl=zxc.offsetLeft;
     zxct=zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcp=zxc.offsetParent;
      zxcl+=zxcp.offsetLeft;
      zxct+=zxcp.offsetTop;
      zxc=zxcp;
     }
     return [zxcl,zxct];
    }
    
    function Newcombo(){
     if (Con.style.visibility=='hidden'){
      Con.style.visibility='visible';
      if (document.all){ zxcIF.style.visibility='visible'; }
     }
     else {
      Con.style.visibility='hidden';
      zxcIF.style.visibility='hidden';
     }
    }
    
    //-->
    </script>

  • #5
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That new script seems to prevent the drop down box from appearing when the arrow image is clicked. Please advise.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    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>
    <script type="text/javascript">
    <!--
    // Would appear that I did the original for you not long ago
    
    // Replace your current Com,Con script with this
    
    var Com,Con,zxcIF;
    var zxcZIndex=10;
    
    function  Position(){
     if (!zxcIF){
      zxcIF=document.createElement('IFRAME');
      zxcIF.style.position="absolute";
      zxcIF.style.visibility='hidden';
      zxcIF.style.zIndex=zxcZIndex;
      document.getElementsByTagName('BODY')[0].appendChild(zxcIF);
     }
     Com=document.getElementById('commentary');
     Con=document.getElementById('contents');
     Con.style.left=(zxcPos(Com)[0])+'px';
     Con.style.top=(zxcPos(Com)[1]+Com.offsetHeight)+'px';
     Con.style.zIndex=zxcZIndex+1;
     zxcIF.style.width=(Con.offsetWidth)+'px';
     zxcIF.style.height=(Con.offsetHeight)+'px';
     zxcIF.style.left=Con.style.left;
     zxcIF.style.top=Con.style.top;
    }
    
    function zxcPos(zxc){
     zxcl=zxc.offsetLeft;
     zxct=zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcp=zxc.offsetParent;
      zxcl+=zxcp.offsetLeft;
      zxct+=zxcp.offsetTop;
      zxc=zxcp;
     }
     return [zxcl,zxct];
    }
    
    function Newcombo(){
     if (Con.style.visibility=='hidden'){
      Con.style.visibility='visible';
      if (document.all){ zxcIF.style.visibility='visible'; }
     }
     else {
      Con.style.visibility='hidden';
      zxcIF.style.visibility='hidden';
     }
    }
    
    //-->
    </script></head>
    
    <body onload="Position();">
    <a id="commentary" onmouseover="Newcombo();"  onmouseout="Newcombo();">commentary</a>
    <br>
    <select><option>1111111111111111111111111</option></select>
    <div id="contents" style="position:absolute;visibility:hidden;width:100px;height:100px;background-color:red;" >
    
    </div>
    </body>
    
    </html>


  •  

    Posting Permissions

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