Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Explanation of code needed (http://www.velocityreviews.com/forums/t917109-explanation-of-code-needed.html)

Phil Thompson 03-21-2005 04:47 PM

Explanation of code needed
 
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



McKirahan 03-21-2005 06:40 PM

Re: Explanation of code needed
 
"Phil Thompson" <philSPAM@doublonegative.com> wrote in message
news:423efa96$0$10940$cc9e4d1f@news-text.dial.pipex.com...
> 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 03-21-2005 08:14 PM

Re: Explanation of code needed
 

"McKirahan" <News@McKirahan.com> wrote in message
news:j9Wdnaa5tc-biKLfRVn-sQ@comcast.com...
> "Phil Thompson" <philSPAM@doublonegative.com> wrote in message
> news:423efa96$0$10940$cc9e4d1f@news-text.dial.pipex.com...
>> 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 03-22-2005 03:51 AM

Re: Explanation of code needed
 
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

Phil Thompson 03-22-2005 05:55 PM

Re: Explanation of code needed
 

"RobG" <rgqld@iinet.net.auau> wrote in message
news:3DM%d.474$Zn.27412@news.optus.net.au...
> 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




All times are GMT. The time now is 08:33 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.