Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

scrollable table in div with a header not in hte div. Dynamic Properties? or?

Posted on 2003-11-26
4
Medium Priority
?
1,060 Views
Last Modified: 2010-04-09
I am trying to use ie dynamic properties to format a head for a table that is contained in a div.
the div wont go to only part of the table becasue of the table dom. I want the header cells to match the content cells exactly. I am very close but the browere does whatever it wants. This is an ie specific project.

Here is the code. (non-relative stuf removed). I am not tied to dynamic properties it just seems like the best way and i have tried a LOT of stuff. can anyone do this succesfully?

I could prolly just go by the row size to match the table size but that part is working great.

<table id="redHeadTbl" border="0" style="border-layout:fixed" cellpadding="3" cellspacing="3" style="width:expression(document.all['col1'][0].clientWidth + document.all['col2'][0].clientWidth +document.all['col3'][0].clientWidth +document.all['col4'][0].clientWidth +document.all['col5'][0].clientWidth +document.all['col6'][0].clientWidth +document.all['col7'][0].clientWidth +document.all['col8'][0].clientWidth +27);">
                  
<td id="redHead1" style="width:expression(document.all['col1'][0].clientWidth);" class="clsTblHead">Task ID</td>
<td id="redHead2" style="width:expression(document.all['col2'][0].clientWidth);" class="clsTblHead">Physician</td>
<td id="redHead3" style="width:expression(document.all['col3'][0].clientWidth);" class="clsTblHead">Clinic</td>
<td id="redHead4" style="width:expression(document.all['col4'][0].clientWidth);" class="clsTblHead">Patient</td>
<td id="redHead5" style="width:expression(document.all['col5'][0].clientWidth);" class="clsTblHead">Description</td>
<td id="redHead6" style="width:expression(document.all['col6'][0].clientWidth);" class="clsTblHead">Status</td>
<td id="redHead7" style="width:expression(document.all['col7'][0].clientWidth);" class="clsTblHead">Posted</td>
<td id="redHead8" style="width:expression(document.all['col8'][0].clientWidth);" class="clsTblHead">Assigned</td>

Then the table i want to match up with

<table border="0"  cellpadding="3" cellspacing="3" width="100%">
<td id="col1" width="7%" class="clsTblData1" valign="top"><bean:write name="redTaskList" property="taskId" /></td>
<td id="col2" width="15%" class="clsTblData1" valign="top"></td>
<td id="col3" width="15%" class="clsTblData1" valign="top"></td>
<td id="col4" width="15%" class="clsTblData1" valign="top"></td>
<td id="col5" width="10%" class="clsTblData1" valign="top"></td>
<td id="col6" width="10%" class="clsTblData1" valign="top"></td>
<td id="col7" width="10%" class="clsTblData1" valign="top"></td>
<td id="col8" width="8%" class="clsTblData1" valign="top"></td>        
0
Comment
Question by:CodeMachine
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 6

Expert Comment

by:dgelinas
ID: 9827277
I had a similiar problem that was fixed with this function.  It gets the Header table and the body table.

function sizeTable () {

var topTable = (document.all) ? document.all.timeCardTableHead : document.getElementById("timeCardTableHead");
var botTable = (document.all) ? document.all.timeCardTableBody : document.getElementById("timeCardTableBody");
var width;
 
var numberOfVisibleColumns = topTable.rows[0].cells.length;
 
  for (var c=0; c<numberOfVisibleColumns; c++ ) {
    if ( topTable.cells(c).offsetWidth < botTable.cells(c).offsetWidth ) {
      width = botTable.cells(c).offsetWidth;
      topTable.cells(c).width = width;
      botTable.cells(c).width = width;
    }
  }
  headStuff.style.height = headTable.clientHeight + scrollHeight;
}

good luck
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 600 total points
ID: 9827603
You are referencing elements in the expressions that may not be known at the time they are encountered during rendering.  That can cause IE to either make mistakes or ignore the attribute.  If you script the expression attributes and fire them at the end of the load, then the DOM is complete and you do not get any invalid references.  Also you have a style entry border-layout:fixed but I think you mean table-layout:fixed. There is no such attribute as border-layout.

<html>
<head>
<script language="javascript">
window.onload = init;
function init() {
var eTable = document.getElementById("headers");
eTable.style.setExpression("width","document.getElementById('data').offsetWidth");
document.getElementById('th1').style.setExpression("width","document.getElementById('td1').offsetWidth");
document.getElementById('th2').style.setExpression("width","document.getElementById('td2').offsetWidth");
document.getElementById('th3').style.setExpression("width","document.getElementById('td3').offsetWidth");
document.getElementById('th4').style.setExpression("width","document.getElementById('td4').offsetWidth");
}
</script>
<style>
table#headers, table#data {table-layout:fixed;background:#dda0dd;}
td, th {vertical-align:top;background:#ffffff;}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="1" id="headers">
<tr>
<th id="th1">Test</th>
<th id="th2">Hello</th>
<th id="th3">Yoohoo</th>
<th id="th4">Hmm</th>
</tr>
</table>
<div style="width:100%;height:300px;overflow-y:auto;">
<table cellpadding="4" cellspacing="1" width="100%" id="data">
<tr>
<td id="td1">Data</td>
<td id="td2">Hello</td>
<td id="td3">I am here and so are you</td>
<td id="td4">Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
</table>
</div>
</body>
</html>

Cd&

0
 

Author Comment

by:CodeMachine
ID: 9851962
dgelinas good method nice and reusable. but it is really no diferent than what i am doing... just a little furhter along in the sdlc. Gonna have to give the points to cobolDin.

table-layout:fixed cured my problem. DUH... Good eye. thanks a lot.

Could i get one more suggestion from you on how to deal with 0 - 1 - or more rows in the defining table?

To be more clear is there an easy way handle the javascript changes required fordocument.all['col2'][0].clientWidth vs. document.all['col2'].clientWidth. I am currently planning on handling this by using jsp script to only assign the id="col2" to the first column.

But then there is the issue of what if there are no columns. I am thinking i will just use if(whatever != undefined). then give a default val
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9854102
I think just checking for undefined is okay, though I'm not sure I quite understand why you are eliminating IDs.

Cd&
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question