My Collapsing tables function - White Space Leftover for Hidden Rows...
DB McGee
I've created.
The problem is that when the function hides all the rows for a particular
category, there is a white space left over underneath the 'category row'.
I'm not sure how to get rid of this space.
Thanks in advance to all who reply:
The code is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Collapsing Tables Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td.category { font: 600 13px Verdana; color: #FFFFFF; background-color:
#424242; }
td.member { font: 500 12px Verdana; color: #525252; background-color:
#CCCCCC; }
a:link { font: 500 12px Verdana; color: red; text-decoration: none; }
a:visited { font: 500 12px Verdana; color: red; text-decoration: none; }
a:hover { font: 500 12px Verdana; color: orange; text-decoration:
underline; }
</style>
<script type="text/javascript">
<!--
function dynamicTables(type,category) {
/* Set the row display style to "none" or "block" depending on the 'type'
passed by the function call */
if ( type == "hide") {
rowDisplay = "none"
}
else {
rowDisplay = "block"
}
/* Set an object reference to the table */
var oTable = document.getElementById("mainTable")
/* Set an object reference to the table cells (td's) in the table */
var oCells = oTable.getElementsByTagName("TD")
/* Retrieve the number of TD's in the table */
var numberTableCells = oCells.length
/* Now loop through the table cells */
for ( i=0; i < numberTableCells; i++ ) {
/* Set an object reference to the current table cell */
oCurrentCell = oCells[i]
/* Test to see if the current TD is of the 'category' type and is not the
main category row (checked by the "main_" value in the row ID) */
if ( oCurrentCell.id.indexOf(category) != -1 &&
oCurrentCell.id.indexOf("main_") == -1 ) {
oCurrentCell.style.display = rowDisplay
}
}
}
// -->
</script>
</head>
<body>
<table width="500" cellpadding="0" cellspacing="0" id="mainTable">
<tr>
<td class="category" id="main_category/1">Category 1 <a
href="javascript:dynamicTables('hide','category/1')" style="margin-left:
300px;">Hide</a> <a
href="javascript:dynamicTables('show','category/1')">Show</a>
</td>
</tr>
<tr>
<td class="member" id="category/1/member/1">Member 1</td>
</tr>
<tr>
<td class="member" id="category/1/member/2">Member 2</td>
</tr>
<tr>
<td class="member" id="category/1/member/3">Member 3</td>
</tr>
<tr>
<td class="member" id="category/1/member/4">Member 4</td>
</tr>
<tr>
<td class="member" name="bob" id="category/1/member/5">Member 5</td>
</tr>
<tr>
<td class="member" id="category/1/member/6">Member 6</td>
</tr>
<tr>
<td class="member" id="category/1/member/7">Member 7</td>
</tr>
<tr>
<td class="member" id="category/1/member/8">Member 8</td>
</tr>
<tr>
<td class="member" id="category/1/member/9">Member 9</td>
</tr>
<tr>
<td class="member" id="category/1/member/10">Member 10</td>
</tr>
<tr>
<td class="member" id="category/1/member/11">Member 11</td>
</tr>
<tr>
<td class="category" id="main_category/2">Category 2 <a
href="javascript:dynamicTables('hide','category/2')" style="margin-left:
300px;">Hide</a> <a
href="javascript:dynamicTables('show','category/2')">Show</a></td>
</tr>
<tr>
<td class="member" id="category/2/member/1">Member 1</td>
</tr>
<tr>
<td class="member" id="category/2/member/2">Member 2</td>
</tr>
<tr>
<td class="member" id="category/2/member/3">Member 3</td>
</tr>
<tr>
<td class="member" id="category/2/member/4">Member 4</td>
</tr>
<tr>
<td class="member" id="category/2/member/5">Member 5</td>
</tr>
<tr>
<td class="member" id="category/2/member/6">Member 6</td>
</tr>
</table>
</body>
</html>
reggie
news:AYNB9.93949$YSz1....@news01.bloor.is.net.cable.rogers.com...
Well, I am new to this, but it seems that your whitespace has to do with the
left over <tr>'s. Please someone slap my wrists if I've gotten it wrong.
I changed:
if ( oCurrentCell.id.indexOf(category) != -1
&& oCurrentCell.id.indexOf("main_") == -1 ) {
oCurrentCell.parentNode.style.display = rowDisplay;
}
Using parentNode, it targets the <tr> and sets the display of the <tr> to
"none".
Goodbye whitespace.
Oh, and I'd change the beginning 'if' switch to:
rowDisplay = type == "hide" ? "none" : "block";
regards,
reggie.
reggie
"DB McGee" <ghuytro@&REMOVE;rogers.com> wrote in message
news:AYNB9.93949$YSz1....@news01.bloor.is.net.cable.rogers.com...
> function dynamicTables(type,category) {
>
> /* Set the row display style to "none" or "block" depending on the
'type'
> passed by the function call */
> if ( type == "hide") {
> rowDisplay = "none"
> }
> else {
> rowDisplay = "block"
> }
Actually to make this work in both Mozilla and IE, you'll have to hack it.
It seems that Mozilla reponds in a somewhat interesting way when you assign
a table row to display as a block element. This most likely comes as no
surprise to anyone who's done this before.
Mozilla responds correctly when you change this to
rowDisplay = "table-row"; // instead of "block"
But of course, IE6 chokes. It chokes, because this is the correct way to do
things according to the w3.
So, if you want this to work in both IE and Mozilla - you'll have to detect
which one is accessing your script. Or you'll have to wait until someone
who knows what they are talking about posts. Or, you can forget Mozilla
users and standards compliance by using only the code which works in IE.
I remember now why I wrote off JavaScript and DHTML.
regards,
reggie.
reggie
news:AYNB9.93949$YSz1....@news01.bloor.is.net.cable.rogers.com...
Um -- I'm a useless fool.
1) my posts are propagating back to myself, so I can't see them
2) here is an adequate 'hack'
if (type == "hide") {
rowDisplay = "none";
} else {
if(window.addEventListener) {
rowDisplay = "table-row";
} else {
rowDisplay = "block";
}
}
regards
reggie.
DB McGee
Thanks a lot for the posts! The 'hack' you mentioned worked to make this
work in Mozilla. Boy is it ugly without it : )
Is that a good general hack to branch code for Mozilla vs. IE?
Again - thanks very much for the assistance.
"reggie" <reggie...@reggieband.com> wrote in message
news:BJVB9.26834$ka.8...@news1.calgary.shaw.ca...
Martin Honnen
It is wrong to set CSS display to block to show a table-row. However the
easiest way to avoid any such problem is the following simple change
function dynamicTables(type,category) {
/* Set the row display style to "none" or "block" depending on the 'type'
passed by the function call */
if ( type == "hide") {
rowDisplay = "none"
}
else {
rowDisplay = ""
}
as then when you set
element.style.display = ''
the inline style of display is not set and the browser's default for the
element is taken (which means the element displays as usual which is
what you want)
--
Martin Honnen
http://JavaScript.FAQTs.com/
Steve van Dongen
No need to slap you. :) That's right.
However, the same result can accomplished much more efficiently by
wrapping the rows for a category in a TBODY element and setting the
display style on that instead. The benefit should be obvious by
comparing your script with mine:
function dynamicTables(type,category)
{
rowDisplay = ( type == "hide" ? "none" : "block" );
var oCategoryTBody = document.getElementById(category);
if (oCategoryTBody)
oCategoryTBody.style.display = rowDisplay;
}
<tbody id="category/2">
<tr>
<td class="member" id="category/2/member/1">Member 1</td>
</tr>
<tr>
<td class="member" id="category/2/member/2">Member 2</td>
</tr>
<tr>
<td class="member" id="category/2/member/3">Member 3</td>
</tr>
<tr>
<td class="member" id="category/2/member/4">Member 4</td>
</tr>
<tr>
<td class="member" id="category/2/member/5">Member 5</td>
</tr>
<tr>
<td class="member" id="category/2/member/6">Member 6</td>
</tr>
</tbody>
Regards,
Steve
DB McGee
Since I'm designing this page to be a dynamic page for a web application - I
don't know how many categories a given page will ever have, nor how many
members a given category will have either.
Given this kind of dynamic uncertainty I like your method better - i think
it's a more reusable method too!
Thanks!
"Steve van Dongen" <ste...@hotmail.com> wrote in message
news:jakhtuccn28c35l7t...@4ax.com...