Go Premium for a chance to win a PS4. Enter to Win

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,063 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
  • 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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

876 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