SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Java Hide table column help

    Hi, I have a script I use to hide table columns, the problem is that if a user leaves the page and comes back the columns are back to default.

    What I would like is this to be cookie driven, anyone know what I need to do (im a java n00b)?

    here is simple example of my code

    Code HTML4Strict:
    <HTML>
    <HEAD>
    <TITLE>Test</TITLE>
    <script language="javascript">
    var showMode = 'table-cell';
    if (document.all) showMode='block';
    function toggleVis(btn){
    	btn   = document.forms['tcol'].elements[btn];
    	cells = document.getElementsByName('t'+btn.name);
    	mode  = btn.checked ? showMode : 'none';
    	for(j = 0; j < cells.length; j++) cells[j].style.display=mode;
    }
    </script>
    </HEAD>
     
    <BODY>
     
    <form name="tcol" onsubmit="return false">
     
    <table border=0 bgcolor="#ffeecc">
    <tr><td>
    Show columns
    <input type=checkbox name="col1" onclick="toggleVis(this.name)" checked> 1
    <input type=checkbox name="col2" onclick="toggleVis(this.name)" checked> 2
    <input type=checkbox name="col3" onclick="toggleVis(this.name)" checked> 3
    <input type=checkbox name="col4" onclick="toggleVis(this.name)" checked> 4
    </td></tr>
    </table>
    </form>
     
    <table border=1>
    <tr>
    <td name="tcol1" id="tcol1" class="bold">column 1 text</td>
    <td name="tcol2" id="tcol2">column 2 text</td>
    <td name="tcol3" id="tcol3" class="italic">column 3 text</td>
    <td name="tcol4" id="tcol4">column 4 text</td>
    </tr>
    <tr>
    <td name="tcol1" id="tcol1" class="bold">column 1 text</td>
     
    <td name="tcol2" id="tcol2">column 2 text</td>
    <td name="tcol3" id="tcol3" class="italic">column 3 text</td>
    <td name="tcol4" id="tcol4">column 4 text</td>
    </tr>
    </table>
     
    </BODY>
    </HTML>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Every time someone toggles the visiblility, the cookie will need to be updated to indicate what has been toggled and which state it's in.

    Then when the page starts it can check the cookies for those toggled states and apply the appropriate actions.

  3. #3
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,329
    Mentioned
    191 Post(s)
    Tagged
    4 Thread(s)
    And this is not Java. It is Javascript.
    There is a very important difference.

    Off Topic:

    I like your username. Great set of stories from Grant Naylor; a Brit with a style similar to Douglas Adams!
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  4. #4
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57 thats exactly what I need. can anyone do this?


    ParkinT, thanks

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    When someone toggles the visibility you can use the onclick event to call a function that updates the cookies.

    There are plenty of javascript cookie tutorials, for example, Quirksmode Javascript Cookies

    When the page opens you can use the onload event. The Understanding Event Handlers can help you there.

    If you have several things that you want to load, you can use an addLoadEvent function. Dustin Diaz has a good example in his Top 10 Custom Javascript Functions list.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Let's go through this then.

    Disclaimer: The following has been written from the top of my head. It has not been tested in any way to ensure that it works properly or as intended. Here be dragons.

    When someone toggles the visibility you can use the onclick event to call a function that updates the cookies.
    Your toggleVis() function can call a function called toggleCookie(name)

    Code JavaScript:
    function toggleCookie(name) {
      var days = 90;
      if ('toggledon' == readCookie(name)) {
        createCookie(name, 'toggledoff', days);
      } else {
        createCookie(name, 'toggledon', days);
    }

    If the cookie name is already on, it gets turned off, otherwise turn it on. There are plenty of javascript cookie tutorials, for example, Quirksmode Javascript Cookies
    The cookie scripts will provide you with the readCookie() and createCookie() functions. Save the cookie scripts from Quirksmode Javascript Cookies to a separate file and include it in the html.

    Code JavaScript:
    <script type="text/javascript" src="js/cookies.js"></script>

    When the page opens you can use the onload event. The Understanding Event Handlers can help you there.
    Code HTML4Strict:
    <body onload="initToggle()">

    Code JavaScript:
    function initToggle() {
      // get all input elements
      var inputs = document.getElementsByTagName('input');
      var el;
      for (var i = 0; i < inputs.length; i++) {
        el = inputs[i];
        // only checkboxes are to be verified
        if ('checkbox' == el.getAttribute('type')) {
          // using function to reduce complexity
          verifyToggle(el.getAttribute('name'));
        }
      }
    }
     
    function verifyToggle(name) {
      if ('toggledoff' == readCookie(name)) {
        // Only if the cookie value is set to off should the element be turned off
        toggleVis(name);
        // Because toggleVis will change the cookie from off to on, we turn it back off again
        toggleCookie(name);
      }
    }

    That's a rough idea of what you're after anyway.
    Last edited by paul_wilkins; Dec 7, 2007 at 19:32.


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
  •