PDA

View Full Version : How to create a collapsing table cell



Fijvect
10-22-2008, 07:45 AM
Hey everyone,
I usually try my best to teach myself and figure it out on my own, I have always preferred this method. Unfortunately I can't find anywhere on the internet where someone has used my idea so I can use it as my guide.

The website I'm working on has 3 cells in a table in 1 row. The outside cells each have an image that doesn't move throughout the entire site, only the middle cell's content changes for every page. What I want to do is have it so when a link is pressed to take the user to another page of my site, the outer two cells slide together, the new page loads, on the new page the outer two cells are still together, then they slide apart again revealing the new content in the middle cell. The website in question is: http://cs.clark.edu/~kfrit4316/Snow_Sports_Club/

I have some ideas on how to go approach this, but can't for the life of me figure it out.

One more thing, I would prefer to have this all on 1 page so the middle cell's contents change without having to load a new .html page. But I am worried about users who do not have javascript capability trying to visit my site and not being able to access all information on my site due to not being able to switch content. If anyone has a way to perhaps check for users who do not have javascript capabilities and send them to a basic site with no java (as it is right now).

Thank a lot you for your help,
Fijvect

Jesdisciple
10-23-2008, 11:15 PM
Give that center cell an id and set its width to 0 in the style. When the page loads, enter(5, 10) (how many pixels/iteration, how many milliseconds/iteration). onunload, exit(5, 10).
function enter(increment, speed){
var element = document.getElementById('the id');
var width = parseInt(element.width.replace(/(\d+)px/, '$1'));
var interval = setInterval(iterate, speed);
function iterate(){
element.width = (width += increment) + 'px';
if(width >= 582)
clearInterval(interval);
}
}
function exit(decrement, speed){
var element = document.getElementById('the id');
var width = parseInt(element.width.replace(/(\d+)px/, '$1'));
var interval = setInterval(iterate, speed);
function iterate(){
element.width = (width -= decrement) + 'px';
if(width <= 0)
clearInterval(interval);
}
}

EDIT: Sorry. Re accessibility... I'll have to think a bit. Does your server execute PHP?