Explanation of code needed

Discussion in 'Javascript' started by Phil Thompson, Mar 21, 2005.

  1. Hi

    I'm very new to JavaScript and just need a bit of an explanation to some
    code and some ideas of how to edit it to do what I want.

    The script looks for every <pre> on a page and sets them to
    style="display:none" it then produces links to show and hide the hidden
    <pre>s. My problem is that I don't wish it to be a <pre> therefore I have
    just change the line getElementsByTagName('pre') to
    getElementsByTagName('form') to which is what I want to hide. But, this
    doens't resolve my problem of the script hiding every single form element on
    the page. How can I change the script (below) so it only hides a particular
    form, with an id or even better a class? I can well imagine that alot of the
    script is useless to me as I only want to hide a specific id or class and
    not all of instances tag. Trouble is I don't really understand the script
    that well.

    p.s. I have tried to do the following;
    remove getElementsByTagName('form')
    and replace it with getElementByID('form_id_here')

    to no avail

    script (courtesy of onlinetools.org
    http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html)...

    function collapsepre()
    {
    var pres,i,allp,alla,head,newa,newp;
    pres=document.getElementsByTagName('form');
    if(pres.length>0)
    {
    allp=document.createElement('p');
    alla=document.createElement('a');
    alla.appendChild(document.createTextNode('Expand all Examples'));
    alla.onclick=function(){col('all',this);return false;};
    alla.setAttribute('href','#');
    alla.className='collink';
    allp.appendChild(alla);
    head=document.getElementsByTagName('h1')[0];
    head.parentNode.insertBefore(allp,head.nextSibling)
    }
    for(i=0;i<pres.length;i++)
    {
    newa=document.createElement('a');
    newp=document.createElement('p');
    newa.appendChild(document.createTextNode('Post Message'));
    newa.tocollapse=i;
    newa.onclick=function(){col(this,this.tocollapse);return false;};
    newa.setAttribute('href','#');
    newa.className='collink';
    newp.appendChild(newa);

    newp.style.marginBottom='5px';
    newp.style.marginLeft='10px';
    pres.style.marginTop=0;
    pres.style.display='none';
    pres.parentNode.insertBefore(newp,pres);
    }
    }

    function col(a,o){
    var pres,i,n;
    switch(a){
    case 'all':
    pres=document.getElementsByTagName('form');
    for(i=0;i<pres.length;i++)
    {
    pres.style.display='block';
    pres.previousSibling.style.display='none';
    }
    o.onclick=function(){col('colall',this);return false;};
    o.firstChild.nodeValue='Collapse all Examples';
    break;
    case 'colall':
    pres=document.getElementsByTagName('form');
    for(i=0;i<pres.length;i++)
    {
    pres.style.display='none';
    pres.previousSibling.style.display='block';
    }
    o.onclick=function(){col('all',this);return false;};
    o.firstChild.nodeValue='Expand all Examples';
    break;
    default:
    n=document.getElementsByTagName('form')[o];
    n.style.display=n.style.display=='block'?'none':'block';
    a.firstChild.nodeValue=n.style.display=='block'?'Don\'t Post':'Post
    message';
    break;
    }
    }
    if(document.getElementById && document.createTextNode)
    {
    window.onload=function(){
    collapsepre();
    }
    }


    Phil
    Phil Thompson, Mar 21, 2005
    #1
    1. Advertising

  2. Phil Thompson

    McKirahan Guest

    "Phil Thompson" <> wrote in message
    news:423efa96$0$10940$...
    > Hi
    >
    > I'm very new to JavaScript and just need a bit of an explanation to some
    > code and some ideas of how to edit it to do what I want.
    >
    > The script looks for every <pre> on a page and sets them to
    > style="display:none" it then produces links to show and hide the hidden
    > <pre>s. My problem is that I don't wish it to be a <pre> therefore I have
    > just change the line getElementsByTagName('pre') to
    > getElementsByTagName('form') to which is what I want to hide. But, this
    > doens't resolve my problem of the script hiding every single form element

    on
    > the page. How can I change the script (below) so it only hides a

    particular
    > form, with an id or even better a class? I can well imagine that alot of

    the
    > script is useless to me as I only want to hide a specific id or class and
    > not all of instances tag. Trouble is I don't really understand the script
    > that well.


    [snip]

    Without studying your code...

    Have you tried putting a <span id="like_a_pre"> before the <form> tag and
    </span> after the </form> tag and doing what was originally done -- changing
    ('pre') to ('like_a_pre')?
    McKirahan, Mar 21, 2005
    #2
    1. Advertising

  3. "McKirahan" <> wrote in message
    news:...
    > "Phil Thompson" <> wrote in message
    > news:423efa96$0$10940$...
    >> Hi
    >>
    >> I'm very new to JavaScript and just need a bit of an explanation to some
    >> code and some ideas of how to edit it to do what I want.
    >>
    >> The script looks for every <pre> on a page and sets them to
    >> style="display:none" it then produces links to show and hide the hidden
    >> <pre>s. My problem is that I don't wish it to be a <pre> therefore I have
    >> just change the line getElementsByTagName('pre') to
    >> getElementsByTagName('form') to which is what I want to hide. But, this
    >> doens't resolve my problem of the script hiding every single form element

    > on
    >> the page. How can I change the script (below) so it only hides a

    > particular
    >> form, with an id or even better a class? I can well imagine that alot of

    > the
    >> script is useless to me as I only want to hide a specific id or class and
    >> not all of instances tag. Trouble is I don't really understand the script
    >> that well.

    >
    > [snip]
    >
    > Without studying your code...
    >
    > Have you tried putting a <span id="like_a_pre"> before the <form> tag and
    > </span> after the </form> tag and doing what was originally done --
    > changing
    > ('pre') to ('like_a_pre')?
    >


    I may be wrong, but, I think that would create invalid HTML. I have tried
    a similar solution by making it a div with and id and changing it from
    getElementsByTagName('pre') to getElementById('like_a_pre') to no avail
    Phil Thompson, Mar 21, 2005
    #3
  4. Phil Thompson

    RobG Guest

    Phil Thompson wrote:
    > Hi
    >
    > I'm very new to JavaScript and just need a bit of an explanation to some
    > code and some ideas of how to edit it to do what I want.
    >
    > The script looks for every <pre> on a page and sets them to
    > style="display:none" it then produces links to show and hide the hidden
    > <pre>s. My problem is that I don't wish it to be a <pre> therefore I have
    > just change the line getElementsByTagName('pre') to
    > getElementsByTagName('form') to which is what I want to hide. But, this


    You can get all the forms in a page using the forms collection:

    var allTheForms = document.forms;

    > doens't resolve my problem of the script hiding every single form element on
    > the page. How can I change the script (below) so it only hides a particular
    > form, with an id or even better a class? I can well imagine that alot of the


    You can selectively hide using getElementById, or you can give
    each form a class and use that. The class does not need to be
    defined anywhere and you can have multiple classes on an
    element to create a kind of group.

    e.g. <form action="" class="type1 type2 type3" ... >

    Then your script could be:

    function hideForm( classToHide ){
    var f = document.forms,
    i = f.length,
    t,
    c = new RegExp('\\b' + classToHide + '\\b');

    while (i--) {
    t = f;
    if ( t.style && c.test(t.className) ) {
    t.style.display = 'none';
    } else {
    t.style.display = '';
    }
    }
    }


    and you could hide the above table with:

    ... onclick="hideForm('type2');" ...

    to show all forms, just pass a 'classname' that doesn't exist:

    ... onclick="hideForm('xx');" ...



    then any form with a class of 'type2' will be hidden and any
    others will be shown.

    > script is useless to me as I only want to hide a specific id or class and
    > not all of instances tag. Trouble is I don't really understand the script
    > that well.
    >


    The following is an example of what you are trying to do:

    <script type="text/javascript">
    function hideForm( classToHide ){
    var f = document.forms,
    i = f.length,
    t,
    c = new RegExp('\\b' + classToHide + '\\b');

    while (i--) {
    t = f;
    if ( t.style && c.test(t.className) ) {
    t.style.display = 'none';
    } else {
    t.style.display = '';
    }
    }
    }

    </script>

    <form action="" class="forma">
    <input type="text" value="forma">
    </form>
    <form action="" class="forma formb">
    <input type="text" value="forma formb">
    </form>
    <form action="" class="formc">
    <input type="text" value="formc">
    </form>
    <form action="" class="formb">
    <input type="text" value="formb">
    </form>
    <form action="" class="forma formc">
    <input type="text" value="forma formc">
    </form>

    <form action="">
    <input type="radio" name="zz" onclick="hideForm('forma');">
    hide forma<br>
    <input type="radio" name="zz" onclick="hideForm('formb');">
    hide formb<br>
    <input type="radio" name="zz" onclick="hideForm('formc');">
    hide formc<br>
    <input type="radio" name="zz" onclick="hideForm('x');">
    hide none<br>
    </form>

    [...]


    --
    Rob
    RobG, Mar 22, 2005
    #4
  5. "RobG" <> wrote in message
    news:3DM%d.474$...
    > Phil Thompson wrote:
    >> Hi
    >>
    >> I'm very new to JavaScript and just need a bit of an explanation to some
    >> code and some ideas of how to edit it to do what I want.
    >>
    >> The script looks for every <pre> on a page and sets them to
    >> style="display:none" it then produces links to show and hide the hidden
    >> <pre>s. My problem is that I don't wish it to be a <pre> therefore I have
    >> just change the line getElementsByTagName('pre') to
    >> getElementsByTagName('form') to which is what I want to hide. But, this

    >
    > You can get all the forms in a page using the forms collection:
    >
    > var allTheForms = document.forms;
    >
    >> doens't resolve my problem of the script hiding every single form element
    >> on the page. How can I change the script (below) so it only hides a
    >> particular form, with an id or even better a class? I can well imagine
    >> that alot of the

    >
    > You can selectively hide using getElementById, or you can give
    > each form a class and use that. The class does not need to be
    > defined anywhere and you can have multiple classes on an
    > element to create a kind of group.
    >
    > e.g. <form action="" class="type1 type2 type3" ... >
    >
    > Then your script could be:
    >

    <snip />
    > --
    > Rob


    Thanks RobG that's really helpful.

    Phil
    Phil Thompson, Mar 22, 2005
    #5
    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. VK
    Replies:
    1
    Views:
    431
    Richard Tobin
    May 18, 2006
  2. Replies:
    9
    Views:
    371
    Christian Bau
    Feb 16, 2006
  3. NoNeYa
    Replies:
    42
    Views:
    1,189
    John W. Kennedy
    Aug 22, 2007
  4. korean_dave
    Replies:
    0
    Views:
    373
    korean_dave
    May 19, 2008
  5. korean_dave

    Dummy explanation to win32com needed

    korean_dave, Oct 22, 2008, in forum: Python
    Replies:
    2
    Views:
    311
    Tim Golden
    Oct 23, 2008
Loading...

Share This Page