Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Explanation of code needed

Reply
Thread Tools

Explanation of code needed

 
 
Phil Thompson
Guest
Posts: n/a
 
      03-21-2005
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/.../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[i].style.marginTop=0;
pres[i].style.display='none';
pres[i].parentNode.insertBefore(newp,pres[i]);
}
}

function col(a,o){
var pres,i,n;
switch(a){
case 'all':
pres=document.getElementsByTagName('form');
for(i=0;i<pres.length;i++)
{
pres[i].style.display='block';
pres[i].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[i].style.display='none';
pres[i].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':'b lock';
a.firstChild.nodeValue=n.style.display=='block'?'D on\'t Post':'Post
message';
break;
}
}
if(document.getElementById && document.createTextNode)
{
window.onload=function(){
collapsepre();
}
}


Phil


 
Reply With Quote
 
 
 
 
McKirahan
Guest
Posts: n/a
 
      03-21-2005
"Phil Thompson" <(E-Mail Removed)> wrote in message
news:423efa96$0$10940$(E-Mail Removed)...
> 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')?


 
Reply With Quote
 
 
 
 
Phil Thompson
Guest
Posts: n/a
 
      03-21-2005

"McKirahan" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> "Phil Thompson" <(E-Mail Removed)> wrote in message
> news:423efa96$0$10940$(E-Mail Removed)...
>> 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


 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      03-22-2005
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[i];
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[i];
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
 
Reply With Quote
 
Phil Thompson
Guest
Posts: n/a
 
      03-22-2005

"RobG" <(E-Mail Removed)> wrote in message
news:3DM%d.474$(E-Mail Removed)...
> 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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Explanation needed of binary operators NoNeYa Java 42 08-22-2007 09:03 PM
CONCEPT OF DAO IN J2EE --- EXPLANATION NEEDED soody Java 2 06-05-2007 08:35 AM
standalone in prolog: specs explanation needed VK XML 1 05-18-2006 10:43 PM
explanation needed on const pointers deepunayak@gmail.com C Programming 9 02-16-2006 10:31 PM
explanation needed for optical illusion in digital photo Eigenvector Digital Photography 27 08-02-2003 05:20 AM



Advertisments