PDA

Click to See Complete Forum and Search --> : Positioning within tables

CountZero
07-18-2003, 05:42 AM
How do I determine the the offsetTop and offsetLeft from an element inside a table?

lets say we have,
button
button
table
row
cell
button
/cell
/row
/table
button
button

The whole positioning gets whacked by the table, and the table must exist.

Any suggestions?

/V
Charles
07-18-2003, 05:46 AM
Originally posted by CountZero
...and the table must exist. From the HTML 4.01 Specification
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
http://www.w3.org/TR/html4/struct/tables.html#h-11.1
CountZero
07-18-2003, 05:49 AM
Trust me, it's needed, and not for pure layout reasons.
Charles
07-18-2003, 05:55 AM
Can you post the URL?
CountZero
07-18-2003, 06:06 AM
This is just an example, but We're going to have to have INPUT-tags in tables.

<HTML>
<SCRIPT language="JavaScript">
navList = new Array();
navStrokes = -1;
navCtrlOn = false;

function navCheck()
{
var key = window.event;

if(key.keyCode == 17 && key.ctrlKey) //Only CTRL down
{
navCtrlOn = (navCtrlOn == true) ? false:true; //Toggle ctrlOn
navTooltip();
navStrokes = -1;
}
else if(navCtrlOn == true)
{
window.focus();
if(key.keyCode == 13)
{
if(navStrokes >= 0 && navStrokes < navList.length)
{
alert(navList.item(navStrokes).id);
navList.item(navStrokes).focus();
navCtrlOn = false;
navTooltip();
}

navStrokes = -1;
}
else
{
newChar = String.fromCharCode(key.keyCode);
if(newChar >= '0' && newChar <= '9')
{
if(navStrokes == -1)
navStrokes = 0;

navStrokes *= 10;
navStrokes += parseInt(newChar);
if(navStrokes >= navList.length)
navStrokes = -1;
}
}
}
}

function navTooltip()
{
for(i = 0; i < navList.length;++i)
{
e = navList.item(i);
document.getElementById(e.id + "_layer").style.visibility = (navCtrlOn == true) ? "visible":"hidden";
}
}

function navInit()
{
navList = document.getElementsByTagName("input");

for(i = 0; i < navList.length;++i)
{
e = navList.item(i);
document.write("<div id='" + e.id + "_layer' style='position: absolute; top: "+(e.offsetTop - 10)+"px; left: "+(e.offsetLeft - 6)+"; width: 20px; z-index: 100; filter: alpha(opacity: 70, style=5); border: 1pt black solid; background: FFFFCC; text-align: center; visibility: hidden'>"+i+"</div>");
}
}

</SCRIPT>
<HEAD>
</HEAD>
<BODY onKeyDown="navCheck()">
<div align=center>
<INPUT type="button" id="torsk" name="torsk" value="torsk">
<table width="100%">
<TR>
<TD>
<INPUT type="text" id="apa" name="apa" value="apa">
</TD>
</TR>
<table>
<INPUT type="checkbox" id="toffel" name="toffel" value="toffel">
</div>
<SCRIPT language="JavaScript">
navInit();
</SCRIPT>
</BODY>
</HTML>
Charles
07-18-2003, 06:11 AM
That table is being used simply for lay out - it has nothing at all to do with demonstrating the relationship between and among pieces of data, which is what tables are for.

Also, how is your page going to work for the 13% of users who do not use JavaScript?
CountZero
07-18-2003, 06:25 AM
Just take my word for it, we need to use tables.
One of our HTML-renderings of a gui component is 1000s of lines of JavaScript and about 5k worth of HTML.

Now is there a way to find the position of an input element inside 1 or possibly several tables?