Collapsing a Table column through DIV

[illibaro]

1) Script Title:
Animated Collapsible DIV

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem:

I love this script and it works excellently as provided. I however want to use this to optionally show or hide a table column on my page. Assuming that I have a two column table, and if I use this script to hide the right column, I want to expand the left column automatically and fill up the space vacated by the right column. You can see this in action on this site.

http://developer.mozilla.org/en/docs..._is_the_DOM.3F

Look for the 'hide sidebar' link on the top right of the page and see what I am referring to.

I tried putting DIV in your script inside the TD tags but when the DIV is hidden, it does not reduce the column width..

Any insights to achieve this through your scripts would be appreciated.

Thanks - illibaro

[Eep²]

I'd like to know, too, preferably with support for colspan/rowspan. It may be possible with the colgroup tag.

Oh yea, I recently saw this in a Joomla extension called Comparison Chart, which 2 demo charts are available and the javascript code can be seen that hides/shows the columns (but uses annoyingly slow opacity fading by default). It requires an ID on each cell and doesn't auto-adjust the table for colspan/rowspan attributes (but you could configure it manually using IDs). I attached just the javascript (instructions at top) for the column/row visibility and a sample HTML page showing basic usage.

Note: The javascript instructions may not be worded correctly for row hiding, as I have not tried it, but the concept is the same--I use <tbody> HTML tags and javascript (source) to hide table rows in my 3D game comparison table, though I may have to rely on Javascript to hide individual rows within CSS-hidden <tbody> groups (but this script looks simpler).

[WisTex]

I'm looking for the same thing, being able to show/hide a table column, except I would like to do it automatically when the page loads based on the resolution of the browser (i.e. over 1000 pixels wide, show extra column, less than 1000 pixels wide, collapse column on load.

Not sure if anyone has done this before, but we need something like this.

We were going to try to combine the Animated Collapsible DIV script with something we already use which detects the user's screen resolution.

<!-- Check Page Size -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var xy = navigator.appVersion;
xz = xy.substring(0,4);
document.cookie = "ScreenWidth=" + screen.width + "; path=/"
document.cookie = "ScreenHeight=" + screen.height + "; path=/"
// End -->
</script>

<%
'Declare variables
Dim strScreenWidth
Dim strScreenHeight

'Read the cookies with the width and height
strScreenWidth = Request.Cookies("ScreenWidth")
strScreenHeight = Request.Cookies("ScreenHeight")

'If no cookie was made then say the screen size is 800x600
If strScreenWidth = "" Then strScreenWidth = 800
If strScreenHeight = "" Then strScreenHeight = 600
%>

Script by Drew at Iportalx originally posted here: http://www.metasun.com/forum/post.as...376&FORUM_ID=7

As you can see, we use this script to detect the screen resolution, drop a cookie, and have ASP VBScript display things based on screen resolution (like columns).

But we have a unique situation where we have some licensed content that we are permitted to brand via headers and footers, but we cannot touch their code. And their content is already designed for 800x600 pixels. We want to display an additional navigation column for users who's screen size can support it, especially since only 5-10% of our users still use 800x600 or less.

So the ASP VBScript won't work for this application, however, we think combining Animated Collapsible DIV script and our script we can accomplish it.

So we do not reinvent the wheel, has anyone successfully converted this script to hide a column instead of vertical DIV?

(Also, before any coding purists jump all over me, the hidden column will not have items absolutely necessary for navigation. Sufficient links at the top and bottom will allow navigation for those who have smaller screen resolutions. The additional column will have supplemental navigation, and be designed to match the rest of our site. And, no, we cannot modify the code in the middle to be not as wide. If we could, we would not be doing this weird work-around.)