Topic: CSS Help

[Canuck]

This is a real rough draft at what I am trying to accomplish, ignore the basic layout, I just threw what I had into a previous test file.

http://www.freewebs.com/andy_moog/test.html

The javascript doesnt work in IE for some reason, but that doesnt matter.

I will be using tables to display some of my collection for my site, so I will have + and - symbols for different years, and wish to expand/collapse the tables which will correspond to those years.

I can hide/show the tables with CSS and javascript.

Problems:

1.  When I collapse the tables, how can I get them to take up no space (if possible)

2.  As of now I have a scroll bar to allow for the expanding content, is there anything I can do so that the div will expand to allow content, but not have a scroll bar?

Thanks

[Perspective]

1. You can remove the element from the DOM with javascript. I don't remember the function name off hand. Have a look at this,
http://www.mozilla.org/docs/dom/technote/tn-dom-table/#manipulating

2. Do you mean you want the box to get bigger to show the content instead of the scroll bar? I don't think I understand.

[Canuck]

>>Have a look at this,
http://www.mozilla.org/docs/dom/tec...e/#manipulating

Thanks, Ill take a look!

>>2. Do you mean you want the box to get bigger to show the content instead of the scroll bar? I don't think I understand.

Yes, thats what I meant, I would like the box which holds the content to get bigger.

[ober]

All you have to do is set the display property of all but the "default" one to "none".

Code: [Select]

content

content

rinse 2nd example
repeat


Then your javascript looks like this:

Code: [Select]


function myfunction(x)
{
   var moreinfo = x;
   if(document.getElementById(moreinfo).style.display == 'none' || document.getElementById(moreinfo).style.display == '')
       document.getElementById(moreinfo).style.display = 'block';
    else
    document.getElementById(moreinfo).style.display = 'none';
}


This way, you can only use 1 button.

I use this all the time.  Good luck.

[Canuck]

Thanks for that bit of code ober. Finally got it to work how I wanted it to.  The Javascript I wrote may not be the most elegant piece of code, but it works.

[Canuck]

Not sure if anyone is still following this thread, but I worked on it a bit this weekend to produce this:

http://www.freewebs.com/andy_moog/collection_test1.html

Thats pretty much what I was aiming for, may change the green in the tables, since there seems to be too much green, maybe even increase the width of the tables.

What do you think?

[ober]

Looks great.  I took a look last nite before you posted again.  Just one note, however.  I'd link in your javascript and CSS (even as an alternate style sheet).  It's just personal opinion, but it makes your code look cleaner and keeps different languages seperated.