Results 1 to 2 of 2

Thread: How to create a collapsing table cell

  1. #1
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to create a collapsing table cell

    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
    Last edited by Fijvect; 10-22-2008 at 07:50 AM.

  2. #2
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    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).
    Code:
    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?
    Last edited by Jesdisciple; 10-23-2008 at 11:26 PM.
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •