I got as far as this but causes an error:
function show_hide_Div(theDiv,TheDivToShow) {
alert(theDiv+'\n'+TheDivToShow);
if (document.getElementById) {
var elDiv = document.getElementById(theDiv);
} else if (document.all){
var elDiv = document.all(theDiv);
}
for (var x = 0; elDiv.childNodes[x]; x++) {
var elDiv_childNodes = elDiv.childNodes[x].id;
//alert(elDiv_childNodes);
document.all(elDiv_childNodes).style.display = "none"; // causes an error
}
document.all(TheDivToShow).style.display = ""; // as does that
}
--
Any idea?
Joseph
philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/
"Joseph" <philippeoget@hotmail.com> wrote in message
news:3a2v3kF67ucecU1@individual.net...[color=blue]
> Hi Rob,
>
> Well thank yo very much for your lengthy reply, I shall get on it and get
> back to you shortly.
>
> Thanks again!
>
> Joseph
>
> philippeoget at hotmail dot com
>
http://www.geocities.com/philippeoget/a2z/
> "RobG" <rgqld@iinet.net.auau> wrote in message
> news:423c1418$0$10758$5a62ac22@per-qv1-newsreader-01.iinet.net.au...[color=green]
>> Joseph wrote:[color=darkred]
>>> I am attempting to create a function that will hide all SPANS within an
>>> ided
>>> DIV ="idMain", then only display one span, but this function gives an
>>> error
>>> when it gets to elChildElement as being undefined.
>>> The show_hide_Div function is meant to be called when a Radio button is
>>> selected. See below.
>>>
>>> Can anyone help[/color]
>>
>> I am not going to go deeply into your code, I'm just going to help you
>> fix this issue. Your code, once fixed, will only work in IE.
>>[color=darkred]
>>>
>>> function show_hide_Div(theDiv,DivsToHide,TheDivToShow) {[/color]
>>
>> Each of the variables above contains a string that is the id of an
>> element.
>>[color=darkred]
>>> elDiv = document.all.theDiv;[/color]
>>
>> I don't have access to IE right now so can't test this line, but the
>> syntax should be:
>>
>> var elDiv = document.all(theDiv);
>>
>> But in any case, your HTML will not validate since you have used the
>> name attribute on elements that aren't supposed to have it. Have a
>> look here for the elements that can have a name attribute (DIV & SPAN
>> aren't among them):
>>
>> <URL:http://www.w3.org/TR/html4/index/attributes.html>
>>
>>
>> Use the id attribute and getElementById and you will support a much
>> greater range of browsers (including IE after about 5.5 I think, but
>> certainly from 6 onward).
>>
>> You should also create elDiv as a local unless it needs to be global:
>>
>> Change your code to:
>>
>> if (document.getElementById( {
>> var elDiv = document.getElementById(theDiv);
>> } else if (document.all){
>> var elDiv = document.all(theDiv);
>> }
>>
>>[color=darkred]
>>> elChildElement = elDiv.DivsToHide;[/color]
>>
>> I'm pretty sure this won't work either, even if elDiv is defined. In
>> IE I think if multiple elements have the same name, a collection is
>> returned if you do:
>>
>> var elChildElement = document.all(DivsToHide);
>>
>> but as noted above, putting a name attribute on a span will create
>> invalid HTML.
>>
>> To remove the IE proprietary document.all and still support browsers
>> that depend on it, use:
>>
>> if (document.getElementById) {
>> var elChildElement = document.getElementByIdDivsToHide);
>> } else if (document.all) {
>> var elChildElement = document.all(DivsToHide);
>> }
>>
>> For more general for support for browsers that don't have
>> getElementById, consider the DynWrite function from the group FAQ:
>>
>> if((!document.getElementById) && document.all){
>> document.getElementById = function(id){
>> return document.all[id];};
>> }
>>
>> <URL:http://www.jibbering.com/faq/faq_notes/alt_dynwrite.html>
>>
>> To get a collection of all the spans inside the div, use
>> getElementsByTagName:
>>
>> if (document.getElementsByTagName) {
>> var elChildElement = elDiv.getElementsByTagName('span');
>> }
>>
>> elChildElement will be a collection of all the spans inside elDiv.
>>[color=darkred]
>>> alert (elChildElement);
>>> for (x=0; x<elChildElement.length; x++){[/color]
>>
>> Keep x local, and it's slower to get the length of the collection every
>> iteration, consider:
>>
>> for (var x=0, len=elChildElement.length; x<len; x++) {
>>
>> or maybe:
>>
>> var x = elChildElement.length;
>> while(x--){
>> ...
>>[color=darkred]
>>> elChildElement[x].style.visibility = 'hidden';[/color]
>>
>> If you only want to hide some spans and not others, put the string
>> that you'd previously used in the name attribute in the class attribute
>> (you can have multiple class names and they don't have to appear in any
>> style sheet or element). You should also test that they style object
>> is supported:
>>
>> var el = elChildElement[x];
>> if ( el.style )
>> if ( /DivsToHide/.test(el.className) ) {
>> el.style.visibility = 'hidden';
>> } else if ( /DivsToHide/.test(el.className) ) {
>> el.style.visibility = 'visible';
>> }
>> }
>>
>>
>>
>>[color=darkred]
>>> }
>>> elDiv.TheDivToShow.style.visibility = 'visible';
>>> }
>>> // The Radio Buttons
>>> <form name="form1" id="form1" method="post" action="">
>>> <label><input type="radio" name="RadioGroup" id='raidConfig'
>>> value="IPConfig"
>>> onClick="checkRadio(this.form.name);show_hide_Div( 'idMain','IPButton','spanidConfig');"
>>> />IP Config</label>[/color]
>>
>> One button of a radio group should be on by default. Also, IE will not
>> associate a label with a control unless you use the label's 'for'
>> attribute and give the control an id (despite what the HTML spec says
>> about associating the label with its contents).
>>
>> <URL:http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL>
>>
>> [...][color=darkred]
>>> onclick='DoIP_Config();show_hide_Div(='idMain','IP Button'
>>> ,'spanidConfig')[/color]
>>
>> I'm pretty sure you'll get a syntax error here: ...(='idMain',...
>>
>> Get rid of the '='.
>>[color=darkred]
>>> <span name='IPButton' id='spanidPing'> <input type='text' id='idPing'
>>> value='' size='30' /> [/color]
>>
>> Is this some type of pseudo XHTML? Get rid of the '/' at the end of the
>> closing tag, it is not part of HTML and your script does not look like
>> XHTML.
>>[color=darkred]
>>> <input type='button'
>>> onclick='Do_Ping();show_hide_Div(='idMain','IPButt on'
>>> ,'spanidConfig') ;' value=' Ping ' />[/color]
>>
>> You have issues with your quotes here. I like to use double-quotes for
>> HTML and singles for JavaScript (as you've done above but not here and
>> below - cut 'n paste?).
>>
>> <input type="button" value=" Ping " onclick="
>> Do_Ping();
>> show_hide_Div('idMain','IPButton','spanidConfig');
>> ">
>>
>> Also, manually break the lines of your code, don't let them be randomly
>> broken by newsreaders, Google groups, etc. Nothing worse than having
>> to fix lines broken by wrapping before you even start...
>>
>>
>> [...]
>>
>>
>> Hope that helps.
>>
>> --
>> Rob[/color]
>
>
>[/color]
