teel / stasiscl

Automatically exported from code.google.com/p/stasiscl
0 stars 0 forks source link

possible table collapsing improvements #44

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago
The following changes will allow the tables to start out hidden, and only
become visible on demand.

[QUOTE=giansm;870362]
Hmm. Well. Doing things on purpose that IE6 won't support isn't really an
option, unfortunately. I'll look into this further when I have a chance
though, since it does annoy me that all the tables start out expanded and
then kind of shutter closed as the page loads.
[/QUOTE]

sws2.css
[code]
tbody.sectionSlave {
    display: none;
}
[/code]

sws.js
[code]
function toggleTbodySection(secName) {
    var tbody = document.getElementById('s'+ secName);

    if (document.getElementById('as' + secName).innerHTML == '+') {
        try {
            // for Firefox
            tbody.style.display = 'table-row-group';
        } catch (e) {
            // for IE
            tbody.style.display = 'block';
        }
        document.getElementById('as' + secName).innerHTML = '-';
    } else {
        tbody.style.display = 'none';
        document.getElementById('as' + secName).innerHTML = '+';
    }
}
[/code]

Surround blocks of code to be collapsed in tbody tags:
[code]
<div class="tab" id="tab_deaths">
<table class="stat">
<tr><th class="title" colspan="4">Deaths</th></tr>
<tr><th>Death</th><th>Time</th><th style="text-align: right;
">Health</th><th>Event</th></tr>
<tr class="sectionMaster"><td class="f">(<a class="toggle" id="as1"
href="javascript:toggleTbodySection(1);">+</a>) <a
href="actor_0x000000000192ec9b.html"
class="Shaman">Pae</a></td><td>03:55.657</td><td
class="r">-11131</td><td>[<a href="actor_0xf130005967000132.html"
class="Mob">High Warlord Naj'entus</a>] <a href="spell_39878.html"
rel="spell=39878" class="spell">Tidal Burst</a> hit [<a
href="actor_0x000000000192ec9b.html" class="Shaman">Pae</a>] 8500</td></tr>
<tbody class="sectionSlave" id="s1">
<tr><td class="f">03:51.922</td><td>&nbsp;</td><td
class="r">-2631</td><td>[<a href="actor_0x000000000192ec9b.html"
class="Shaman">Pae</a>] fade <a href="spell_16246.html" rel="spell=16246"
class="spell">Clearcasting</a></td></tr>
<tr><td class="f">03:55.297</td><td>&nbsp;</td><td
class="r">-11131</td><td>[<a href="actor_0xf130005967000132.html"
class="Mob">High Warlord Naj'entus</a>] <a href="spell_39878.html"
rel="spell=39878" class="spell">Tidal Burst</a> hit [<a
href="actor_0x000000000192ec9b.html" class="Shaman">Pae</a>] 8500</td></tr>
</tbody>
</table>
<br /></div>
[/code]

Original issue reported on code.google.com by dae...@gmail.com on 29 Aug 2008 at 3:50

GoogleCodeExporter commented 8 years ago
I ended up doing something similar to this. Thanks for the idea and in 
particular the Firefox/IE display code.

Original comment by gianmerlino@gmail.com on 9 Sep 2008 at 3:31