Bob Vaz

Navigation

Skip navigation.

Search

Site navigation

Email conversation

FromBob Vaz
ToMe
Subjectexpandable/collapsible table
Date27 March 2007 02:03
I am trying to display four files in four expandable/collapsible tables
using php and js in this manner.

After reading the file, I display a header for the table, the table header
has a name and a  [-/+] to expand it or contract it.  This works fine... but
what I cannot do, and cannot figure out how to do, is display only the first
five lines from the file, turn the + (expansion indicator) on and display
the rest of file when the + is clicked.  A secondary "nice to have" would be
to overlay the other tables when displaying the rest of the file.

Thanks in advance.

Bob
FromMe
ToBob Vaz
SubjectRe: expandable/collapsible table
Date27 March 2007 16:31
Bob,

> what I cannot do, and cannot figure out how to do, is display only the
> first five lines from the file, turn the + (expansion indicator) on and
> display the rest of file when the + is clicked.

The easy way to do this would be to have the +- just change the .className
property of the table between 'ishidden' and ''. Then you can use CSS to
hide all except the first rows. Assuming you do not need support for IE 6-
you can use this:

table.ishidden tr + tr + tr + tr + tr + tr { display: none; }
...
<table class="ishidden">
<tr> ...
...

However, IE 6 sucks and does not support those CSS selectors. IE 7 also
sucks and fails to respect the + selector after the className is changed
with script. So you will have to set some class on all except the first 5
rows using your PHP, as well as a default class on the table, and set those
to not display if the table has that class.

table.ishidden tr.after5 { display: none; }
...
<table class="ishidden">
<tr> ...
<tr> ...
<tr> ...
<tr> ...
<tr> ...
<tr class="after5"> ...
<tr class="after5"> ...
...

> A secondary "nice to have" would be
> to overlay the other tables when displaying the rest of the file.

Not entirely sure I understand what you mean here, but I assume you want to
have the previously hidden rows appear on top of the rest of the document
when they appear. The way to do this would be to put the table inside a div,
and set the height of the div to a fixed value - 6em or whatever. Then when
the table rows appear and become too large for that div, they will overflow
it and extend over the rest of the page (make sure the table has a
background colour to prevent the content showing through). Note that this
will not work in IE 6-.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

Bob, you will probably not receive this response, so I hope you read it here. When you send a message to me, it will help if you allow me to reply, instead of forcing me to request permission to reply. Your Webmail system's challenge mechanism is also broken. It will not display the captcha image, or play the captcha sound. So basically I cannot reply to you using email.

FromBob Vaz
ToMe
SubjectRe: expandable/collapsible table
Date28 March 2007 02:29
Mark,
Thanks for the quick response and the warning about IE 6 and 7.....Not being
familiar with the limitations of IE6, and what happens should I code it as I
would like, I don't know what those users having IE6 would see.
Your assumption on overlaying when the expand option is selected was spot
on.  However, again, it appears it would be futile when considering IE6
users.
 I am now researching word wrap and line counting in php to try to do the
same.  Thanks for your help, and if you don't mind, I will add you to my
wizard list.
[Ed. sure]

Bob 
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.