PDA

Click to See Complete Forum and Search --> : calculating table length?

Viki
07-21-2004, 06:13 AM
Hi,
Here is the code which shows two tables, fatherTable and motherTable. The top property of fatherTable is 100. This means fatherTable iis starting from 100 of 768. Now I want to caluclate the length of fatherTable so that I can place motherTable exactly right after fatherTable. There must be some mathematical calculations have to be done.


Bye,
Viki



<html>
<head>
<style type="text/css">

-->


#fatherTable{
background-color: #e4d2b8;
position: absolute;
left: 10px;
top: 100px;
width: 800px;
}
td{
font-family:arial;
}
.bold{
font-size:14pt;
font-weight:bolder;
}
.text{
font-size:12pt;
width:118px;
background-color:#FFCC00;
}
.input{
font-size:10pt;
width:149px;
background-color: GRAY ;
}
#motherTable{
background-color: #e4d2b8;
position: absolute;
left: 10px;
top: 500px;
width: 800px;
}
-->
</style>










</head>
<body bgcolor="#cfd5e1" vlink="#FF00FF" alink="#000080">



</form>




<div id="fatherTable">
<table border="0" cellpadding="0">
<tr>
<td colspan=6 class="bold">
Father's Information
</td>
</tr>

<tr height=35>
<td class="text">First Name</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>

<td class="text">Middle Name</td>
<td class="input" ><input type="text" name="Grandfathers_Name" size="20"></td>

<td class="text" bgcolor="green">Last Name</td>
<td class="input"><input type="text" name="Grandfathers_Name" size="20"></td>
</tr>

<tr height=35>
<td class="text">Civil ID #</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>

<td class="text">Passport #</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>

<td class="text">Mobile #</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>


</tr>

<tr height=35>
<td class="text">Profession</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>


</tr>

<tr>
<td colspan=6 class="bold">
Home Address
</td>
</tr>

<tr height=35>
<td class="text">Area</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>

<td class="text">Block</td>
<td class="input" ><input type="text" name="Grandfathers_Name" size="20"></td>

<td class="text" bgcolor="green">Street</td>
<td class="input"><input type="text" name="Grandfathers_Name" size="20"></td>
</tr>

<tr height=35>
<td class="text">House #</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>

<td class="text">Country</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>


<td class="text">Telephone #</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>

</tr>

<tr>
<td colspan=6 class="bold">
Business Address
</td>
</tr>

<tr height=35>
<td class="text">Area</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>

<td class="text">Post Office</td>
<td class="input" ><input type="text" name="Grandfathers_Name" size="20"></td>

<td class="text">Country</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>
</tr>

<tr height=35>
<td class="text" bgcolor="green">Telephone</td>
<td class="input"><input type="text" name="Grandfathers_Name" size="20"></td>

<td class="text">Country</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>

</tr>

</table>
</div>

<div id="motherTable">
<table border="0" cellpadding="0">
<tr>
<td colspan=6 class="bold">
Mother's Information
</td>
</tr>

<tr height=35>
<td class="text">First Name</td>
<td class="input" ><input type="text" name="Student_Family_Name" size="20"></td>

<td class="text">Middle Name</td>
<td class="input" ><input type="text" name="Grandfathers_Name" size="20"></td>

<td class="text" bgcolor="green">Last Name</td>
<td class="input"><input type="text" name="Grandfathers_Name" size="20"></td>
</tr>
</table>
</div>

</form>
</body>
</html>
Pittimann
07-21-2004, 06:40 AM
Hi!

Do you really need a script for that? If you pack all the stuff into one div and one table, the stuff will look better. Using two divs with separate tables will mess up the width probably.

Anyway, you could place this:
<script language="JavaScript" type="text/javascript">
<!--
function adjust(){
document.getElementById('motherTable').style.top=document.getElementById('fatherTable').offsetTop+do cument.getElementById('fatherTable').offsetHeight;
}
//-->
</script>
into your head tag and replace your body tag with this:
<body bgcolor="#cfd5e1" vlink="#FF00FF" alink="#000080" onload="adjust()">

Cheers - Pit
Kor
07-21-2004, 06:52 AM
you may use the property offsetHeight


<script language="JavaScript" type="text/JavaScript">
function setT(){
fathH=document.getElementById('fatherTable').offsetHeight;
document.getElementById('motherTable').style.top=fathH;
}
onload=setF
</script>


But you can do the same using only CSS and position relative

nest both divs into another div

<div id="main">
<div id="fatherTable">
...
</div>
<div id="motherTable">
...
</div>
</div>

Now add the new div a class and change the position for the fother and mother from absolute to relative)

<style type="text/css">
#main{
position: absolute;
left: 10px;
top: 100px;
width: 800px;
}
#fatherTable{
background-color: #e4d2b8;
position: relative;
top: 0px;
width: 800px;
}
#motherTable{
background-color: #e4d2b8;
position: relative;
top: 0px;
width: 800px;
}
...
...
...
</style>
Viki
07-21-2004, 07:00 AM
Hi,
Why I am making two tables? I start thinking in terms of seperate tables, because I am also developing Database. And in DB you need to have seperate tables for Father & Mother. Well, this is what I realized after reading your post that, my thinking is totally irrational.
Well, the script is working fine and my requirement is achieved. But, I have put whole stuff in one <div> and one <table> and it's working fine too! Now, as you recommended, I will use the later one, i.e. the one without script.

Bye,
Viki.

Note: Thanks for the great script!
Viki
07-21-2004, 07:05 AM
Hi,

Originally posted by Kor

But you can do the same using only CSS and position relative
This thing really confused me :). Now which is better? The one by Pit [to use one div and one table] OR the one Kor said.
Is there any logical benifit of one approach to another? In other words, what are the advantages/disadvantages of the two approaches, so that we can choose the one and make it our habit!

Bye,
Viki
Pittimann
07-21-2004, 07:10 AM
Hi!

I would dare to say, mine is a bit better. Using your original code, the mother table is a few pixels less wide than the other one (in IE at least). That does not look nice. In general, of course, Kor's suggestion to relatively position is GOOD!

More important than the question whether or not to use Kor's or my suggestion is: you shouldn't use scripting if it is not necessary.

Cheers - Pit
Viki
07-21-2004, 07:19 AM
Hi,

Originally posted by Pittimann
I would dare to say, mine is a bit better. Using your original code, the mother table is a few pixels less wide than the other one (in IE at least). That does not look nice. In general, of course, Kor's suggestion to relatively position is GOOD!

Well, it is my mistake. Actually Father table and Mother table have the ame fields. I showed less fields in Mother table in my original code [I have done this for the sake of simplicity].
Now, I think Kor suggestion is good, because if in future I have to keep the properties of Father Table and Mother Table different then Kor suggestion would work.

I am avoiding script because I feel more comfortable with CSS.

Bye,
Viki.