marcwolf
Posts: 361
|
| Posted: 11/03/2005, 3:32 PM |
|
Hi all.
A while back I had a problem where I had a very large form and wanted to split it up into sections. Some sections would be visible at all times and others could be hidden
I ended up with many smaller tables and using CSS hiding the tables. Unfortunately as the tables were now independant they would change in size depending on the contents.
It worked but made the user interface look like c**p!.
Other experiment using div's within a table cause CodeCharge to throw a fit on the HTML.
However I have recently worked out this solution.
I can insert MANY TBodies within a table, and Codecharge accepts them as part of the standard HTML block. And I can give TBodies ID's to uniquely identify then.
Any rows that were NOT withing a TBody were classed by the DOM as existing in a TBody but not having an ID. This is important when you have sections you want to display all the time like the actual Tab buttons or header information.
So.. Onto the code...
<script language="javascript">
<!-- Script Begin
function cv_TBody( sTable, sTBody) {
// Get the Table Reference
var theTable = document.getElementById(sTable);
// Get the TBodies within it
for( var z = 0; z < theTable.tBodies.length; z++ ) {
// Get the ID for each TBody
var p1 = theTable.tBodies[z].id;
// TBody has an ID.. Hide it.. otherwise leave It
if (p1 !='') { theTable.tBodies[z].style.display = 'none'; }
// TBody had the ID we want.. Show It
if (p1 == sTBody) { theTable.tBodies[z].style.display = '';}
}
}
window.onload = function () {
// Sets the First tabs
cv_TBody("TB","TB1");
}
// Script End -->
</script>
</head>
<body>
<hr>
<table id="TB" border=1>
<tr><td> Header </td></tr> <tr><td>
<a href="javascript:cv_TBody('TB','TB1');" >Block 1</a>
<a href="javascript:cv_TBody('TB','TB2');" >Block 2</a>
<a href="javascript:cv_TBody('TB','TB3');" >Block 3</a>
</td></tr>
<tbody id = "TB1">
<tr><td> TB1 1 </td></tr>
<tr><td> TB1 2 </td></tr>
<tr><td> TB1 3 </td></tr>
</tbody>
<tbody id = "TB2">
<tr><td> TB2 1 </td></tr>
<tr><td> TB2 2 </td></tr>
<tr><td> TB2 3 </td></tr>
<tr><td> TB2 4 </td></tr>
</tbody>
<tbody id = "TB3">
<tr><td> TB3 1 </td></tr>
<tr><td> TB3 2 </td></tr>
</tbody>
<tr><td> Footer </td></tr>
</table>
</body>
</html>
To use it - give each TABLE an ID, and each TBody that you want to manipulate one too.
Then call the CV_TBody function with the table ID and the TBODY you want to show and .. it works.
I have tested this with FireFox and IE5+. Any feenbank with other browsers gratefully accepted.
Have fun
Dave
_________________
' Coding Coding Coding
Keep Those Keyboards Coding.
Raw Code!!!!!!!
|
 |
 |
DonB
|
| Posted: 11/04/2005, 3:25 PM |
|
Very nifty Dave. I was under the mistaken impression that <tbody> could not
repeat within a <table>. I reread the w3c spec and see that it IS allowed.
This will ease the pain of doing those 'multi-step registration' forms.
--
DonB
http://www.gotodon.com/ccbth
|
|
|
|
balbes
|
| Posted: 11/08/2005, 8:24 PM |
|
Thanks, Dave, works great.
|
|
|
|
bedollandres
Posts: 48
|
| Posted: 12/22/2005, 9:22 AM |
|
what if you want to add the option to show all the hidden tbodies?
How could this be done?
have "Block 1, Block 2, Block 3, Show All".
_________________
bedollandres |
|
|
|
marcwolf
Posts: 361
|
| Posted: 12/22/2005, 3:25 PM |
|
Sure - I'd recommend looking at the code and working out what it does as understanding HOW it works will give insight of how it can be improved.
Now - in the CV_TBody routine we do this
---------------------
Get all the TBodies in a table and then loop throught each one
If it does NOT have an ID then leave it otherwise we hide it
If it does have an ID and that the ID is the one we are looking for then we show it.
Get the next TBody in the table.
--------------------------
So what you will need to do it to modify this line
// TBody had the ID we want.. Show It
if (p1 == sTBody) { theTable.tBodies[z].style.display = '';}
to include an OR statement like this
If (p1 == sTBody || p1 == 'SHOWALL') {show the TBody}
So the operation will be
If a TBody 's ID is the one we are looking for OR the P1 Parameter is SHOWALL then show the TBody
and just have a link
<a href="javascript:cv_TBody('TB','SHOWALL');" >Show All</a>
Enjoy and keep learning.. Ok
Take care
Dave
_________________
' Coding Coding Coding
Keep Those Keyboards Coding.
Raw Code!!!!!!!
|
|
|
|
Nils Teller
|
| Posted: 12/24/2005, 6:50 AM |
|
Hi Dave,
nice Code !
I changed it little bit to toggle the section and to show/hie all ...
Here's the code:
<script type="text/javascript" language="Javascript">
function toggleButton(sTable, sButton) {
var theTable = document.getElementById(sTable);
var theButton = document.getElementById(sButton);
if(theButton.innerHTML == 'Show All') {
for( var z = 0; z < theTable.tBodies.length; z++ ) {
theTable.tBodies[z].style.display = '';
}
theButton.innerHTML = 'Hide All';
}else{
for( var z = 1; z < (theTable.tBodies.length-1); z++ ) {
theTable.tBodies[z].style.display = 'none';
}
theButton.innerHTML = 'Show All';
}
}
function toggleDisplay( sTable, sTBody) {
var theTable = document.getElementById(sTable);
for( var z = 0; z < theTable.tBodies.length; z++ ) {
var p1 = theTable.tBodies[z].id;
if (p1 == sTBody) {
if( theTable.tBodies[z].style.display == 'none' ) {
theTable.tBodies[z].style.display = '';
} else {
theTable.tBodies[z].style.display = 'none'; }
}
}
}
window.onload = function () {
// Sets the First tabs
toggleDisplay("TB","TB2");
toggleDisplay("TB","TB3");
}
</script>
</head>
<body>
<table id="TB" border=1>
<tr><td> Header </td></tr> <tr><td>
<a href="#" onClick="toggleDisplay('TB','TB1'); return false;">Block 1</a>
<a href="#" onClick="toggleDisplay('TB','TB2'); return false;" >Block 2</a>
<a href="#" onClick="toggleDisplay('TB','TB3'); return false;" >Block 3</a>
<a href="#" id="TBall" onClick="toggleButton('TB','TBall'); return false;" >Show All</a>
</td></tr>
<tbody id = "TB1">
<tr><td> TB1 1 </td></tr>
<tr><td> TB1 2 </td></tr>
<tr><td> TB1 3 </td></tr>
</tbody>
<tbody id = "TB2">
<tr><td> TB2 1 </td></tr>
<tr><td> TB2 2 </td></tr>
<tr><td> TB2 3 </td></tr>
<tr><td> TB2 4 </td></tr>
</tbody>
<tbody id = "TB3">
<tr><td> TB3 1 </td></tr>
<tr><td> TB3 2 </td></tr>
</tbody>
<tr><td> Footer </td></tr>
</table>
</body>
The funny thing is, that the browsers understand also the first <tr> and the last <t> as a tbody ...
... so the "hide"-thing has to leave out the first and the last <tr> ...
So long ...
Nils
|
|
|
|
Nils Teller
|
| Posted: 12/27/2005, 8:38 AM |
|
oh oh ...
I just noticed that the example pack has similar function in the directory menue ....
too much work ...
Nils
|
|
|
|
|
