SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast jared's Avatar
    Join Date
    Sep 2001
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onclick changing css properties...

    Hmm, I think this board would be the best as it does hopefully end with an onclick element...

    OK, I have a table, where I have ID'd the headers as such:

    <table>
    <col id="col1"><col id="col2"><col id="3">
    <tr>
    <td>Some Text</td>
    <td>More Text</td>
    <td>More Text</td>
    <tr>
    </table>
    Now, when I click on the header row, I would like to hide a column, and when I click on an image, I'd like to restore it.

    Ideally, I would have a function like such:
    function set_state(item, state)
    {
    if (state == 1)
    {
    item.css.visibility="collapsed";
    }
    elseif (state == 2)
    {
    item.css.visibility="hidden";
    }
    else
    {
    item.css.visibility="visible";
    }
    }
    However, I don't know how to pass the item along. Like telling it to hide col2, etc, etc.

    Thanks for your help,

    jared
    Last edited by jared; Mar 28, 2002 at 20:10.
    signature

  2. #2
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should set a global variable before the lexical scope of the function is initiated, so that the variable's lifetime is eternal for the application classid reference bond, rather than the bond to the funciton.

    ie:
    ===================
    scenario: an image with name of handler_0 and a div to be shown / hidden called divdier_0. Another button collapses any open dividers. Opening a different divider will close the previous divider, if there was one.
    ===================
    Code:
    <script language="Javascript">
    var open;
    var de=document.getElementById;
    
    funciton expand(){
     if (open) collapse(open);
     var ref=window.event.srcElement;
     var od=de('divider_'+ref.id.split(/_/)[1]);
     od.style.display=(od.style.display=='')?'none':'';
     if (ods.display=='') open=od;
     }
    
    function collapse(obj){
     if (!obj) var obj=open;
     open.style.display='none';
     }
    </script>
    I hope this gives you an idea of what i mean.
    If you have any problems understanding what i mean, or want a more targetted or specific example... just ask.

    Hope i can help.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  3. #3
    SitePoint Enthusiast jared's Avatar
    Join Date
    Sep 2001
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply flawless, I'll have to digest it a bit & post back...

    jared
    signature


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
  •