...

View Full Version : Help with positioning a div



ScottInTexas
10-13-2003, 04:30 PM
I am using a script to get the position of a table cell and make a div visible at that cell. I reused code from a menu I have on another web site, but it doesn't work in this case.




The html has td in a table.
<td cls="lsiting" onClick="showDiv(this,'MyDiv')">

the javascript is this;
function showDiv(which, aDiv){
var SubFra=document.getElementById(aDiv);
SubFra.style.left=getRealPos(which,"x");
alert("Which is: " + which.id + " top:" + which.style.offsetTop + ", right: " + which.style.offsetLeft + which.style.offsetWidth);
SubFra.style.top=which.style.offsetTop;
SubFra.style.visibility="visible";
}



When I click on the table cell the subroutine getRealPos returns 376 and if I call the same routine on the y value i get 223. If I then use those values with the top and left properties of the SubFra (Div ) the frame shows up below the footer of the document.

I just want to display the div at the end and below the calling clicked table cell.

Thanks for your help.

Dean
10-13-2003, 06:39 PM
here is some code that will reset the layer local depneding on where the cell which has a id value or to the image. and then if you resize you browser window to move the image place holders and click again they will move the layer to the new location.

it is a lot of code and someone will be able to give you a short option but in the mean time something is better than nothing in most cases.

load it up and run it. it simply uses the id values of the images or the cells depend on the onclick command which you can change.

or you can try using css to position your layers which would be
even easier.

have fun


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function P7_Snap() { //v2.62 by PVII
var x,y,ox,bx,oy,p,tx,a,b,k,d,da,e,el,args=P7_Snap.arguments;a=parseInt(a);
for (k=0; k<(args.length-3); k+=4)
if ((g=MM_findObj(args[k]))!=null) {
el=eval(MM_findObj(args[k+1]));
a=parseInt(args[k+2]);b=parseInt(args[k+3]);
x=0;y=0;ox=0;oy=0;p="";tx=1;da="document.all['"+args[k]+"']";
if(document.getElementById) {
d="document.getElementsByName('"+args[k]+"')[0]";
if(!eval(d)) {d="document.getElementById('"+args[k]+"')";if(!eval(d)) {d=da;}}
}else if(document.all) {d=da;}
if (document.all || document.getElementById) {
while (tx==1) {p+=".offsetParent";
if(eval(d+p)) {x+=parseInt(eval(d+p+".offsetLeft"));y+=parseInt(eval(d+p+".offsetTop"));
}else{tx=0;}}
ox=parseInt(g.offsetLeft);oy=parseInt(g.offsetTop);var tw=x+ox+y+oy;
if(tw==0 || (navigator.appVersion.indexOf("MSIE 4")>-1 && navigator.appVersion.indexOf("Mac")>-1)) {
ox=0;oy=0;if(g.style.left){x=parseInt(g.style.left);y=parseInt(g.style.top);
}else{var w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10;
a=(Math.abs(a)<1000)?0:a;b=(Math.abs(b)<1000)?0:b;
x=document.body.scrollLeft + event.clientX + bx;
y=document.body.scrollTop + event.clientY;}}
}else if (document.layers) {x=g.x;y=g.y;var q0=document.layers,dd="";
for(var s=0;s<q0.length;s++) {dd='document.'+q0[s].name;
if(eval(dd+'.document.'+args[k])) {x+=eval(dd+'.left');y+=eval(dd+'.top');break;}}}
if(el) {e=(document.layers)?el:el.style;
var xx=parseInt(x+ox+a),yy=parseInt(y+oy+b);
if(navigator.appName=="Netscape" && parseInt(navigator.appVersion)>4){xx+="px";yy+="px";}
if(navigator.appVersion.indexOf("MSIE 5")>-1 && navigator.appVersion.indexOf("Mac")>-1){
xx+=parseInt(document.body.leftMargin);yy+=parseInt(document.body.topMargin);
xx+="px";yy+="px";}e.left=xx;e.top=yy;}}
}
//-->
</script>
</head>

<body >

<div id="Layer1" style="position:absolute; left:276px; top:242px; width:229px; height:37px; z-index:1; background-color: #FFFF00; layer-background-color: #FFFF00; border: 1px none #000000;">hcvjdhvjksbvmxdbvxnbvmxbvj</div>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center" valign="middle">
<td id="cell1"><strong onclick="P7_Snap('image1','Layer1',60,32)"><img name="image1" src="" width="60" height="32" alt="" style="background-color: #FF0000">cell
1</strong></td>
<td id="cell2"><strong onclick="P7_Snap('image2','Layer1',66,32)"><img name="image2" src="" width="66" height="32" alt="" style="background-color: #00FF00">cell
2</strong></td>
<td id="cell3"><strong onclick="P7_Snap('image3','Layer1',66,32)"><img name="image3" src="" width="66" height="32" alt="" style="background-color: #0000FF">cell 3</strong></td>
</tr>
</table>
</body>
</html>

ScottInTexas
10-13-2003, 08:11 PM
Thanks, but I was looking for a simpler way of positioning the Div.

I have three different divs that would appear at the same position base on one of three table cells being clicked.

At this time, the div moves from it's written position to the right where it should be, but wont come up the page to the position it should be.

Thanks Again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum