Explanation of code needed

[Phil Thompson]

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

 

[McKirahan]

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')?

 

[Phil Thompson]

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

 

[RobG]

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>

[...]

 

[Phil Thompson]

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

var allTheForms = document.forms;


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:

Thanks RobG that's really helpful.

Phil