Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Collapsable list where text is in columns with headers (like a forum for example)

Reply
Thread Tools

Collapsable list where text is in columns with headers (like a forum for example)

 
 
Mark
Guest
Posts: n/a
 
      09-27-2007
Excellent, thanks pr

"pr" <(E-Mail Removed)> wrote in message
news:JCMKi.41294$(E-Mail Removed)...
> Mark wrote:
>> This works great (thanks), the only issue I got though is that in firefox
>> long strings don't wrap, i.e. the cell height remains constant and the
>> table gets wider. I even tried fixing the widths of the table and cells
>> (in pixels), still doesn't wrap) and then dropped the whole table inside
>> another fixed width table and it still gets wider rather than wrapping.

>
> Comment out or remove 'white-space:nowrap' from the 'table.posts td' CSS.



 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      09-27-2007
On Sep 27, 3:10 am, "Mark" <(E-Mail Removed)> wrote:
> Hello again
>
> This works great (thanks), the only issue I got though is that in firefox
> long strings don't wrap, i.e. the cell height remains constant and the table
> gets wider. I even tried fixing the widths of the table and


This was by design.

cells (in
> pixels), still doesn't wrap) and then dropped the whole table inside another
> fixed width table and it still gets wider rather than wrapping.
>
> Work fine in IE6 though, will keep plugging at the firefox issue.


You mean the cells did wrap in IE6? That's surprising to me. I
didn't test it in IE6, but I thought the CSS I used would work the
same in IE6 as IE7 (except for the tr:hover rule.) I did just notice
that the headers are wrapping as I left out a white-space rule for
them.

 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      09-27-2007
On Sep 27, 7:31 am, pr <(E-Mail Removed)> wrote:
> David Mark wrote:
>
> [a sample application]
>
> Good one.


Thanks. It turned out better than I thought it would.

 
Reply With Quote
 
Mark
Guest
Posts: n/a
 
      09-27-2007
Cool... I pulled out the white-space rule and everything wraps in FF and IE
now.

IE6 was ok before, not sure why. If I get time I'll put the white-space rule
back and see what happens.

Cheers

Mark

"David Mark" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) oups.com...
> On Sep 27, 3:10 am, "Mark" <(E-Mail Removed)> wrote:
>> Hello again
>>
>> This works great (thanks), the only issue I got though is that in firefox
>> long strings don't wrap, i.e. the cell height remains constant and the
>> table
>> gets wider. I even tried fixing the widths of the table and

>
> This was by design.
>
> cells (in
>> pixels), still doesn't wrap) and then dropped the whole table inside
>> another
>> fixed width table and it still gets wider rather than wrapping.
>>
>> Work fine in IE6 though, will keep plugging at the firefox issue.

>
> You mean the cells did wrap in IE6? That's surprising to me. I
> didn't test it in IE6, but I thought the CSS I used would work the
> same in IE6 as IE7 (except for the tr:hover rule.) I did just notice
> that the headers are wrapping as I left out a white-space rule for
> them.
>



 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      09-27-2007
On Sep 27, 2:03 pm, "Mark" <(E-Mail Removed)> wrote:
> Cool... I pulled out the white-space rule and everything wraps in FF and IE
> now.


If that is how you want it. Personally, I don't like table cells to
wrap.

>
> IE6 was ok before, not sure why. If I get time I'll put the white-space rule
> back and see what happens.


Don't worry about it. I'll get around to trying this in IE6. I'd be
interested to see if table cells in IE6 ignore the white-space rule.

BTW, the handheld style had a typo. Change this:

td.indent3 { padding-left:1.5em }

Also, document.write should be global.document.write. Additionally, I
left in a few references to "document" that should have been changed
to "doc." None of this will cause a problem, but should be changed to
be consistent with the rest of the code.


 
Reply With Quote
 
Mark
Guest
Posts: n/a
 
      09-27-2007
Cheers David

I wanted to allow wrapping as the string lengths can be quite long and I'm
not keen on horizontal scrollbars.

Top solution btw

Mark

"David Mark" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) ups.com...
> On Sep 27, 2:03 pm, "Mark" <(E-Mail Removed)> wrote:
>> Cool... I pulled out the white-space rule and everything wraps in FF and
>> IE
>> now.

>
> If that is how you want it. Personally, I don't like table cells to
> wrap.
>
>>
>> IE6 was ok before, not sure why. If I get time I'll put the white-space
>> rule
>> back and see what happens.

>
> Don't worry about it. I'll get around to trying this in IE6. I'd be
> interested to see if table cells in IE6 ignore the white-space rule.
>
> BTW, the handheld style had a typo. Change this:
>
> td.indent3 { padding-left:1.5em }
>
> Also, document.write should be global.document.write. Additionally, I
> left in a few references to "document" that should have been changed
> to "doc." None of this will cause a problem, but should be changed to
> be consistent with the rest of the code.
>
>



 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      09-27-2007
On Sep 27, 3:10 pm, "Mark" <(E-Mail Removed)> wrote:
> Cheers David
>
> I wanted to allow wrapping as the string lengths can be quite long and I'm
> not keen on horizontal scrollbars.


I don't care for horizontal scrollbars either. So for long-winded
table cell text, wrapping makes sense.

>
> Top solution btw
>


Thanks.


 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      09-28-2007
On Sep 27, 3:10 pm, "Mark" <(E-Mail Removed)> wrote:
> Cheers David
>

[snip]

I went to turn this into an object, which required removing the hide-
while-loading logic and noticed a mistake. This line:

el.style.visibility = 'visible';

It's nested one level too deep. Move it out one level and change it
to:

if (el) { el.style.visibility = 'visible'; }

Also, this widget should be used with a print style sheet. Two
actually as it exposes yet another CSS bug in IE.

<style type="text/css" media="print">
tr.hidden { display:table-row }
a.open, a.closed { text-decoration:none;color:black;background-
color:inherit }
a.open:before { content: "" }
a.closed:before { content: "" }
</style>
<!--[if IE]>
<style type="text/css" media="print">
tr.hidden { display:block }
</style>
<![endif]-->

 
Reply With Quote
 
beegee
Guest
Posts: n/a
 
      09-28-2007
On Sep 26, 9:54 pm, David Mark <(E-Mail Removed)> wrote:
> On Sep 26, 4:26 pm, David Mark <(E-Mail Removed)> wrote:
>
> Oops. Left out the memory leak cleanup.
>
> global.onunload = function() {
> i = 0;
> l = anchors.length;
> while (i < l) { anchors[i++].onclick = null; }
>
> };
>
> Goes right before this line:
>
> el.style.visibility = 'visible';


David, thanks to your sample code post I have now lowered my self
evaluation of my javascript skills by 2 points. Could you tell me
what memory leak you're referring to? I thought garbage collection
would pick this stuff off.

Bob

 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      09-28-2007
On Sep 28, 10:09 am, beegee <(E-Mail Removed)> wrote:
> On Sep 26, 9:54 pm, David Mark <(E-Mail Removed)> wrote:
>
> > On Sep 26, 4:26 pm, David Mark <(E-Mail Removed)> wrote:

>
> > Oops. Left out the memory leak cleanup.

>
> > global.onunload = function() {
> > i = 0;
> > l = anchors.length;
> > while (i < l) { anchors[i++].onclick = null; }

>
> > };

>
> > Goes right before this line:

>
> > el.style.visibility = 'visible';

>
> David, thanks to your sample code post I have now lowered my self
> evaluation of my javascript skills by 2 points. Could you

tell me

I've lowered my own several points based on the post from late last
night. I must have been really tired when I came up with that one.
Change the correction to:

if (el && el.style) { el.style.visibility = 'visible'; }

Moving the line out a level meant that the style property was not
assured.

> what memory leak you're referring to? I thought garbage collection
> would pick this stuff off.


IE has a bug where closures that create circular references involving
DOM objects are not garbage collected.

http://www.jibbering.com/faq/faq_notes/closures.html

Read this line carefully and you will see that every anchor will leak
the code in its onclick event. The solution is to break the circular
references when the page is unloaded.

elPost.onclick = anchors[i].onclick = (function(posts, el) { var b;
return function(e) { e = e || global.event; b = (el.className ==
'closed'); el.className = (b)?'open':'closed'; showPosts(posts, b); if
(e.stopPropagation) { e.stopPropagation(); } e.cancelBubble = true;
return false; }; })(posts, anchors[i]);

In short, the onclick property of anchors[i] is an anonymous function
which creates a closure referencing anchors[i] as el.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to do expandable / collapsable sections Heath P. Dillon ASP .Net 5 12-19-2008 09:23 AM
Add child records in a collapsable DIV under every gridview or dat Savvoulidis Iordanis ASP .Net 1 02-23-2008 12:42 PM
Use styles AND collapsable tree display? news@celticbear.com XML 2 05-20-2005 04:40 PM
Collapsable paragraphs... Rlrcstr ASP .Net 7 05-17-2005 12:34 AM
collapsable lists? Brian Henry ASP .Net 1 03-31-2005 11:00 AM



Advertisments