hide/unhide data with variable numbers of fields

Discussion in 'Javascript' started by toodi4, Nov 17, 2006.

  1. toodi4

    toodi4 Guest

    I'm using a javascript that hides and unhides text based on a button
    click. It works great across static fields on a form. The problem I
    have is that I'm trying to hide and unhide various fields that are
    populated on the page by a database. In other words, sometimes there
    are 4 fields, sometimes 6.

    I've used various scripts for the hide/unhide function. This is one
    I'm using now that I've copied from another source:

    <script language = "Javascript">

    var isIE=document.all?true:false;
    var isDOM=document.getElementById?true:false;
    var isNS4=document.layers?true:false;
    function toggleT(_w,_h) {
    if (isDOM)
    {
    if (_h=='s')
    document.getElementById(_w).style.visibility='visible';
    if (_h=='h') document.getElementById(_w).style.visibility='hidden';
    }
    else if (isIE) {
    if (_h=='s')
    eval("document.all."+_w+".style.visibility='visible';");
    if (_h=='h')
    eval("document.all."+_w+".style.visibility='hidden';");
    }
    else if(isNS4)
    {
    if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
    if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
    }
    }
    </script>


    So if in the button field I have onclick =toggleT('divt1','s');
    toggleT('divt2','s'); then it will work for spans with id divt1 and
    divt2.

    If I place the <span> tag in front of one of the dynamic fields, then
    the same value id=divt shows for each field displayed, so it only works
    with the first field with that id. I've tried widening the span beyond
    the field so that the span won't be repeated, but it doesn't seem to
    work. I'm not sure what the restrictions are regarding how wide a span
    can be or what can be enclosed within it.

    I'm obviously not a javascript expert, and perhaps the above script is
    not the best one to use for my purposes. But I'm sure this issue must
    arise a lot and I just don't know how to address it.

    Thanks for your help.
    toodi4, Nov 17, 2006
    #1
    1. Advertising

  2. toodi4

    Evertjan. Guest

    toodi4 wrote on 17 nov 2006 in comp.lang.javascript:

    > I'm using a javascript that hides and unhides text based on a button
    > click. It works great across static fields on a form. The problem I
    > have is that I'm trying to hide and unhide various fields that are
    > populated on the page by a database. In other words, sometimes there
    > are 4 fields, sometimes 6.
    >
    > I've used various scripts for the hide/unhide function. This is one
    > I'm using now that I've copied from another source:
    >
    > <script language = "Javascript">


    <script type='text/javascript'>

    >
    > var isIE=document.all?true:false;
    > var isDOM=document.getElementById?true:false;
    > var isNS4=document.layers?true:false;


    This is ancient code!!!

    document.getElementById() is nearly universal nowadays.

    > function toggleT(_w,_h) {
    > if (isDOM)
    > {
    > if (_h=='s')
    > document.getElementById(_w).style.visibility='visible';
    > if (_h=='h') document.getElementById(_w).style.visibility='hidden';
    > }
    > else if (isIE) {
    > if (_h=='s')
    > eval("document.all."+_w+".style.visibility='visible';");


    Do not use eval(), it is evil, dangerous, and not necessary

    > if (_h=='h')
    > eval("document.all."+_w+".style.visibility='hidden';");
    > }
    > else if(isNS4)
    > {
    > if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
    > if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
    > }
    >}
    > </script>
    >
    >
    > So if in the button field I have onclick =toggleT('divt1','s');
    > toggleT('divt2','s'); then it will work for spans with id divt1 and
    > divt2.


    Why not change the <span> tagName collection elements in a <div>
    with css style?

    ====================================
    <script type='text/javascript'>

    function hideshow(x){
    var spandiv = document.getElementById('spandiv')
    var spanGroup = spandiv.getElementsByTagName('SPAN')
    for(i=0;i<spanGroup.length;i++)
    spanGroup.style.visibility=(x=='hide')?'hidden':'visible'
    }

    </script>

    <div id='spandiv'>
    <span>111111</span>
    ===
    <span>222222</span>
    ===
    <span>333333</span>
    ===
    <span>444444</span>
    ===
    <span>555555</span>
    </div>
    <br><br>
    <button onclick='hideshow("hide")'>hide</button>
    <button onclick='hideshow("show")'>show</button>
    ============================================

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Nov 17, 2006
    #2
    1. Advertising

  3. toodi4

    Daz Guest

    Evertjan. wrote:

    > toodi4 wrote on 17 nov 2006 in comp.lang.javascript:
    >
    > > I'm using a javascript that hides and unhides text based on a button
    > > click. It works great across static fields on a form. The problem I
    > > have is that I'm trying to hide and unhide various fields that are
    > > populated on the page by a database. In other words, sometimes there
    > > are 4 fields, sometimes 6.
    > >
    > > I've used various scripts for the hide/unhide function. This is one
    > > I'm using now that I've copied from another source:
    > >
    > > <script language = "Javascript">

    >
    > <script type='text/javascript'>
    >
    > >
    > > var isIE=document.all?true:false;
    > > var isDOM=document.getElementById?true:false;
    > > var isNS4=document.layers?true:false;

    >
    > This is ancient code!!!
    >
    > document.getElementById() is nearly universal nowadays.
    >
    > > function toggleT(_w,_h) {
    > > if (isDOM)
    > > {
    > > if (_h=='s')
    > > document.getElementById(_w).style.visibility='visible';
    > > if (_h=='h') document.getElementById(_w).style.visibility='hidden';
    > > }
    > > else if (isIE) {
    > > if (_h=='s')
    > > eval("document.all."+_w+".style.visibility='visible';");

    >
    > Do not use eval(), it is evil, dangerous, and not necessary
    >
    > > if (_h=='h')
    > > eval("document.all."+_w+".style.visibility='hidden';");
    > > }
    > > else if(isNS4)
    > > {
    > > if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
    > > if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
    > > }
    > >}
    > > </script>
    > >
    > >
    > > So if in the button field I have onclick =toggleT('divt1','s');
    > > toggleT('divt2','s'); then it will work for spans with id divt1 and
    > > divt2.

    >
    > Why not change the <span> tagName collection elements in a <div>
    > with css style?
    >
    > ====================================
    > <script type='text/javascript'>
    >
    > function hideshow(x){
    > var spandiv = document.getElementById('spandiv')
    > var spanGroup = spandiv.getElementsByTagName('SPAN')
    > for(i=0;i<spanGroup.length;i++)
    > spanGroup.style.visibility=(x=='hide')?'hidden':'visible'
    > }
    >
    > </script>
    >
    > <div id='spandiv'>
    > <span>111111</span>
    > ===
    > <span>222222</span>
    > ===
    > <span>333333</span>
    > ===
    > <span>444444</span>
    > ===
    > <span>555555</span>
    > </div>
    > <br><br>
    > <button onclick='hideshow("hide")'>hide</button>
    > <button onclick='hideshow("show")'>show</button>
    > ============================================
    >
    > --
    > Evertjan.
    > The Netherlands.
    > (Please change the x'es to dots in my emailaddress)


    I think that what Evertjan may be hinting at, is that you may need to
    create a class, that will create 'objects' on-the-fly containing a dive
    element, which contains all of your span elements, and also the
    appropriate link/button(s) to show and hide that particular div element.
    Daz, Nov 18, 2006
    #3
  4. toodi4

    Daz Guest

    Daz wrote:
    > I think that what Evertjan may be hinting at, is that you may need to
    > create a class, that will create 'objects' on-the-fly containing a dive
    > element, which contains all of your span elements, and also the
    > appropriate link/button(s) to show and hide that particular div element.


    CORRECTION:
    'dive' should be read as 'div'.
    Daz, Nov 18, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. CJ

    Crystal Reports auto-unhide?

    CJ, Oct 16, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    428
  2. carmen
    Replies:
    1
    Views:
    5,821
    =?Utf-8?B?Q3VydF9DIFtNVlBd?=
    Oct 12, 2005
  3. Ed Redman
    Replies:
    1
    Views:
    94
    Morton Goldberg
    Sep 20, 2007
  4. Junkone

    hide and unhide

    Junkone, Mar 15, 2008, in forum: Ruby
    Replies:
    1
    Views:
    76
    Siep Korteling
    Mar 15, 2008
  5. mooeypoo
    Replies:
    5
    Views:
    97
    mooeypoo
    Sep 28, 2005
Loading...

Share This Page