...

View Full Version : Problem with form appearing over drop down text box



focusnet
12-20-2005, 05:47 PM
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?

:thumbsup:

vwphillips
12-20-2005, 06:15 PM
this is the subject of a number of recent posts
An IE fecher

need an IFRAME under the DIV

example

<!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>

focusnet
12-20-2005, 09:38 PM
Thanks for the info, but I'm not great with dissecting all that code :o - is there a simpler option?

vwphillips
12-21-2005, 09:46 AM
<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>

focusnet
12-22-2005, 04:47 PM
That new script seems to prevent the drop down box from appearing when the arrow image is clicked. Please advise. :thumbsup:

vwphillips
12-22-2005, 07:05 PM
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum