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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Help with positioning a div

    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.

    Code:
    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.
    Scott Stewart
    Always happy to learn from pros.

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Location
    Everthorpe, nr Hull, UK
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hi there

    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>
    Last edited by Dean; 10-13-2003 at 06:44 PM.
    Cheers

    Dean

    In the beginning god said "let there be light." and from out of the darkness a pen pusher was heard to say "not to much. that's expensive that is!"

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    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.
    Scott Stewart
    Always happy to learn from pros.


  •  

    Posting Permissions

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