Can anyone help me please!

[Joseph]

The idea is to show only one of the <Baby_Div> while hiding all the others.
At the moment all I have managed to do is to show each <Baby_Div> in turn as
expected, but the problem is that once a <Baby_Div>.inne rHTML is replaced by one of the
procedures, it does not work anymore, ie, the <Baby_Div> content is not
displayed anymore, once code replaces the actual 'Blah' string.

Structure:
<Top-Div>
<Child_Div (6 in total)>
<Baby_Span>
<Baby_Span>
<Baby_Div>
<Child_Div... >

Any Idea?

Thanks in advance

<Top-Div id='idOutput'> contains 6 Child_Divs in each containing one<Baby_Div>:
The spans are fine, its the Baby_Divs I want to show/hide.

<DIV id='idOutput'>
<DIV id="idDivConfig " onclick="Hide_D ivs('idOutput', 'idDivConfigChi ld','Child')">
<span id="IMGidDivCon fig" style="display: inline;" class="PlusMinu s">+ </span>
<span style="display: inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfig Child">blah </DIV> </DIV>
<DIV id="idDivPing" onclick="Hide_D ivs('idOutput', 'idDivPingChild ','Child')">
<span id="IMGidDivPin g" style="display: inline;" class="PlusMinu s">+ </span>
<span style="display: inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingCh ild">blah </DIV> </DIV>
<DIV ...(4 more)

function Hide_Divs(theDi v,TheDivToShow, TheClass) {
var elDiv = getElementWithI d(theDiv);
for (var x = 0; elDiv.childNode s[x]; x++) {
if (elDiv.childNod es[x].id.length > 0) {
var elChildElement = elDiv.getElemen tsByTagName("di v");
var i = elChildElement. length;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
var el = elChildElement[i];
if ( el.className && cReg.test(el.cl assName)) {
if (el.id && el.id != TheDivToShow ){
el.style.displa y = 'none';
} else {
el.style.displa y = '';
}
}
}
}
}
}

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/

[RobG]

Joseph wrote:

Do not cross post to so many groups, this is a JavaScript issue so
probably comp.lang.javas cript is the only place is should be posted, at
least in the first instance (even though you've been working on this a
little while... :-) ).

When posting code, please use 2 or 4 spaces for indenting, it makes the
code much more suitable for newsreaders. And manually wrap code at
about 65 characters to stop automatic wrapping, then others can simply
copy and paste your code to work on it without having to fix a heap of
errors caused by automatic wrapping.

The idea is to show only one of the <Baby_Div> while hiding all the others.
At the moment all I have managed to do is to show each <Baby_Div> in turn as
expected, but the problem is that once a <Baby_Div>.inne rHTML is replaced by one of the
procedures, it does not work anymore, ie, the <Baby_Div> content is not
displayed anymore, once code replaces the actual 'Blah' string.
I didn't see any attempt to replace the innerHTML, do you mean
Baby_Div or Baby_Span? Try the fix below and see if it's still an
issue.

Structure:
<Top-Div>
<Child_Div (6 in total)>
<Baby_Span>
<Baby_Span>
<Baby_Div>
<Child_Div... >

Any Idea?

Thanks in advance

<Top-Div id='idOutput'> contains 6 Child_Divs in each containing one<Baby_Div>:
The spans are fine, its the Baby_Divs I want to show/hide.

<DIV id='idOutput'>
<DIV id="idDivConfig " onclick="Hide_D ivs('idOutput', 'idDivConfigChi ld','Child')">
<span id="IMGidDivCon fig" style="display: inline;" class="PlusMinu s">+ </span>
<span style="display: inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfig Child">blah </DIV> </DIV>
<DIV id="idDivPing" onclick="Hide_D ivs('idOutput', 'idDivPingChild ','Child')">
<span id="IMGidDivPin g" style="display: inline;" class="PlusMinu s">+ </span>
<span style="display: inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingCh ild">blah </DIV> </DIV>
<DIV ...(4 more)

function Hide_Divs(theDi v,TheDivToShow, TheClass) {
var elDiv = getElementWithI d(theDiv);
If you want a method called "getElementWith Id" you'd better create it,
or maybe use getElementById like everyone else :-p

getElementById is a method of the document, so you have to call it like
this:

var elDiv = document.getEle mentById(theDiv );
for (var x = 0; elDiv.childNode s[x]; x++) {
if (elDiv.childNod es[x].id.length > 0) {
If elDiv.childNode s[x].id does not exist, then the script will die
right here when you try to get the length of something that doesn't
exist - and there are a number of elements that the browser creates
inside your div that don't have ids.

If you want to test if the element has an id, then:

if (elDiv.childNod es[x].id) {

will do the trick.

You are doing the right thing: testing for properties and attributes
before you try to use them is nearly always a good idea.
var elChildElement = elDiv.getElemen tsByTagName("di v");
This doesn't make sense. You get the childNodes of elDiv, then use
getElementsByTa gName to get the one div inside the many children. Why
not just get the divs inside elDiv in the first place, greatly reducing
the number of elements to loop through?

Just do your line above and ditch the outer loop.
var i = elChildElement. length;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
var el = elChildElement[i];
Better to declare var el outside the while, then you don't waste
processor time re-initialising it on each loop.

var el;
while (i--) {
el = elChildElement[i];
if ( el.className && cReg.test(el.cl assName)) {
if (el.id && el.id != TheDivToShow ){

[...]

The full corrected script is below (I've added a border to the divs so
I could see them and only included 2 divs for brevity).
<style type="text/css">
div {border: 1px solid green;}
</style>

<DIV id='idOutput'>
<DIV id="idDivConfig " onclick="
Hide_Divs('idOu tput','idDivCon figChild','Chil d');
">
<span id="IMGidDivCon fig" style="display: inline;"
class="PlusMinu s">+ </span>
<span style="display: inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfig Child">blah idDivConfigChil d</DIV>
</DIV>
<DIV id="idDivPing" onclick="
Hide_Divs('idOu tput','idDivPin gChild','Child' );
">
<span id="IMGidDivPin g" style="display: inline;"
class="PlusMinu s">+ </span>
<span style="display: inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingCh ild">blah idDivPingChild</DIV>
</DIV>
</DIV>
<script type="text/javascript">
function Hide_Divs(theDi v,TheDivToShow, TheClass) {
var elDiv = document.getEle mentById(theDiv );
var elChildElement = elDiv.getElemen tsByTagName('di v');
var i = elChildElement. length;
var el;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
el = elChildElement[i];
if ( el.className && cReg.test(el.cl assName)) {
if (el.id && el.id != TheDivToShow ){
el.style.displa y = 'none';
} else {
el.style.displa y = '';
}
}
}
}
</script>

--
Rob

[Joseph]

Hi Rob,

Thank you fr your help.
I must be really dumb cause I can't make it to work:
f
<script type="text/javascript">
function Hide_Divs(theDi v,TheDivToShow, TheClass) {
var elDiv = getElementWithI d(theDiv);
var elChildElement = elDiv.getElemen tsByTagName('di v');
var i = elChildElement. length;
var el;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
el = elChildElement[i];
if ( el.className && cReg.test(el.cl assName)) {
if (el.id && el.id != TheDivToShow ){
el.style.displa y = 'none';
} else {
el.style.displa y = '';
}
}
}
}

function getElementWithI d(id){
var obj = null;
if(document.get ElementById){
/* Prefer the widely supported W3C DOM method, if
available:-
*/
obj = document.getEle mentById(id);
}else if (document.all){
/* Branch to use document.all on document.all only
browsers. Requires that IDs are unique to the page
and do not coincide with NAME attributes on other
elements:-
*/
obj = document.all[id];
}
/* If no appropriate element retrieval mechanism exists on
this browser this function always returns null:-
*/
return obj;
}
</script>
<DIV id='idOutput'>

<DIV id="idDivConfig " onclick="Hide_D ivs('idOutput', 'idDivConfigChi ld','Child');">
<span id="IMGidDivCon fig" style="display: inline;" class="PlusMinu s">+ </span>
<span style="display: inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfig Child">blah iddivconfigchil d</div>
</DIV>

<DIV id="idDivPing" onclick="Hide_D ivs('idOutput', 'idDivPingChild ','Child');">
<span id="IMGidDivPin g" style="display: inline;" class="PlusMinu s">+ </span>
<span style="display: inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingCh ild">blah iddivpingchild</div>
</DIV>
</DIV>

Thanks mate

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/
"RobG" <rg***@iinet.ne t.auau> wrote in message news:42******** *************** @per-qv1-newsreader-01.iinet.net.au ...

Joseph wrote:

Do not cross post to so many groups, this is a JavaScript issue so
probably comp.lang.javas cript is the only place is should be posted, at
least in the first instance (even though you've been working on this a
little while... :-) ).

When posting code, please use 2 or 4 spaces for indenting, it makes the
code much more suitable for newsreaders. And manually wrap code at
about 65 characters to stop automatic wrapping, then others can simply
copy and paste your code to work on it without having to fix a heap of
errors caused by automatic wrapping.

The idea is to show only one of the <Baby_Div> while hiding all the others.
At the moment all I have managed to do is to show each <Baby_Div> in turn as
expected, but the problem is that once a <Baby_Div>.inne rHTML is replaced by one of the
procedures, it does not work anymore, ie, the <Baby_Div> content is not
displayed anymore, once code replaces the actual 'Blah' string.

I didn't see any attempt to replace the innerHTML, do you mean
Baby_Div or Baby_Span? Try the fix below and see if it's still an
issue.

Structure:
<Top-Div>
<Child_Div (6 in total)>
<Baby_Span>
<Baby_Span>
<Baby_Div>
<Child_Div... >

Any Idea?

Thanks in advance

<Top-Div id='idOutput'> contains 6 Child_Divs in each containing one<Baby_Div>:
The spans are fine, its the Baby_Divs I want to show/hide.

<DIV id='idOutput'>
<DIV id="idDivConfig " onclick="Hide_D ivs('idOutput', 'idDivConfigChi ld','Child')">
<span id="IMGidDivCon fig" style="display: inline;" class="PlusMinu s">+ </span>
<span style="display: inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfig Child">blah </DIV> </DIV>
<DIV id="idDivPing" onclick="Hide_D ivs('idOutput', 'idDivPingChild ','Child')">
<span id="IMGidDivPin g" style="display: inline;" class="PlusMinu s">+ </span>
<span style="display: inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingCh ild">blah </DIV> </DIV>
<DIV ...(4 more)

function Hide_Divs(theDi v,TheDivToShow, TheClass) {
var elDiv = getElementWithI d(theDiv);

If you want a method called "getElementWith Id" you'd better create it,
or maybe use getElementById like everyone else :-p

getElementById is a method of the document, so you have to call it like
this:

var elDiv = document.getEle mentById(theDiv );

for (var x = 0; elDiv.childNode s[x]; x++) {
if (elDiv.childNod es[x].id.length > 0) {

If elDiv.childNode s[x].id does not exist, then the script will die
right here when you try to get the length of something that doesn't
exist - and there are a number of elements that the browser creates
inside your div that don't have ids.

If you want to test if the element has an id, then:

if (elDiv.childNod es[x].id) {

will do the trick.

You are doing the right thing: testing for properties and attributes
before you try to use them is nearly always a good idea.

var elChildElement = elDiv.getElemen tsByTagName("di v");

This doesn't make sense. You get the childNodes of elDiv, then use
getElementsByTa gName to get the one div inside the many children. Why
not just get the divs inside elDiv in the first place, greatly reducing
the number of elements to loop through?

Just do your line above and ditch the outer loop.

var i = elChildElement. length;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
var el = elChildElement[i];

Better to declare var el outside the while, then you don't waste
processor time re-initialising it on each loop.

var el;
while (i--) {
el = elChildElement[i];

if ( el.className && cReg.test(el.cl assName)) {
if (el.id && el.id != TheDivToShow ){

[...]

The full corrected script is below (I've added a border to the divs so
I could see them and only included 2 divs for brevity).
<style type="text/css">
div {border: 1px solid green;}
</style>

<DIV id='idOutput'>
<DIV id="idDivConfig " onclick="
Hide_Divs('idOu tput','idDivCon figChild','Chil d');
">
<span id="IMGidDivCon fig" style="display: inline;"
class="PlusMinu s">+ </span>
<span style="display: inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfig Child">blah idDivConfigChil d</DIV>
</DIV>
<DIV id="idDivPing" onclick="
Hide_Divs('idOu tput','idDivPin gChild','Child' );
">
<span id="IMGidDivPin g" style="display: inline;"
class="PlusMinu s">+ </span>
<span style="display: inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingCh ild">blah idDivPingChild</DIV>
</DIV>
</DIV>
<script type="text/javascript">
function Hide_Divs(theDi v,TheDivToShow, TheClass) {
var elDiv = document.getEle mentById(theDiv );
var elChildElement = elDiv.getElemen tsByTagName('di v');
var i = elChildElement. length;
var el;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
el = elChildElement[i];
if ( el.className && cReg.test(el.cl assName)) {
if (el.id && el.id != TheDivToShow ){
el.style.displa y = 'none';
} else {
el.style.displa y = '';
}
}
}
}
</script>

--
Rob

[Joseph]

Rob,

This is the closest I got to what I want, bearing in mind that I didn;t manage to get your code to work as per my other email.

http://www.geocities.com/philippeoge..._IP_Tools.html

--
thanks a lot Rob

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/
"RobG" <rg***@iinet.ne t.auau> wrote in message news:42******** *************** @per-qv1-newsreader-01.iinet.net.au ...

Joseph wrote:

Do not cross post to so many groups, this is a JavaScript issue so
probably comp.lang.javas cript is the only place is should be posted, at
least in the first instance (even though you've been working on this a
little while... :-) ).

When posting code, please use 2 or 4 spaces for indenting, it makes the
code much more suitable for newsreaders. And manually wrap code at
about 65 characters to stop automatic wrapping, then others can simply
copy and paste your code to work on it without having to fix a heap of
errors caused by automatic wrapping.

The idea is to show only one of the <Baby_Div> while hiding all the others.
At the moment all I have managed to do is to show each <Baby_Div> in turn as
expected, but the problem is that once a <Baby_Div>.inne rHTML is replaced by one of the
procedures, it does not work anymore, ie, the <Baby_Div> content is not
displayed anymore, once code replaces the actual 'Blah' string.

I didn't see any attempt to replace the innerHTML, do you mean
Baby_Div or Baby_Span? Try the fix below and see if it's still an
issue.

Structure:
<Top-Div>
<Child_Div (6 in total)>
<Baby_Span>
<Baby_Span>
<Baby_Div>
<Child_Div... >

Any Idea?

Thanks in advance

<Top-Div id='idOutput'> contains 6 Child_Divs in each containing one<Baby_Div>:
The spans are fine, its the Baby_Divs I want to show/hide.

<DIV id='idOutput'>
<DIV id="idDivConfig " onclick="Hide_D ivs('idOutput', 'idDivConfigChi ld','Child')">
<span id="IMGidDivCon fig" style="display: inline;" class="PlusMinu s">+ </span>
<span style="display: inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfig Child">blah </DIV> </DIV>
<DIV id="idDivPing" onclick="Hide_D ivs('idOutput', 'idDivPingChild ','Child')">
<span id="IMGidDivPin g" style="display: inline;" class="PlusMinu s">+ </span>
<span style="display: inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingCh ild">blah </DIV> </DIV>
<DIV ...(4 more)

function Hide_Divs(theDi v,TheDivToShow, TheClass) {
var elDiv = getElementWithI d(theDiv);

If you want a method called "getElementWith Id" you'd better create it,
or maybe use getElementById like everyone else :-p

getElementById is a method of the document, so you have to call it like
this:

var elDiv = document.getEle mentById(theDiv );

for (var x = 0; elDiv.childNode s[x]; x++) {
if (elDiv.childNod es[x].id.length > 0) {

If elDiv.childNode s[x].id does not exist, then the script will die
right here when you try to get the length of something that doesn't
exist - and there are a number of elements that the browser creates
inside your div that don't have ids.

If you want to test if the element has an id, then:

if (elDiv.childNod es[x].id) {

will do the trick.

You are doing the right thing: testing for properties and attributes
before you try to use them is nearly always a good idea.

var elChildElement = elDiv.getElemen tsByTagName("di v");

This doesn't make sense. You get the childNodes of elDiv, then use
getElementsByTa gName to get the one div inside the many children. Why
not just get the divs inside elDiv in the first place, greatly reducing
the number of elements to loop through?

Just do your line above and ditch the outer loop.

var i = elChildElement. length;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
var el = elChildElement[i];

Better to declare var el outside the while, then you don't waste
processor time re-initialising it on each loop.

var el;
while (i--) {
el = elChildElement[i];

if ( el.className && cReg.test(el.cl assName)) {
if (el.id && el.id != TheDivToShow ){

[...]

The full corrected script is below (I've added a border to the divs so
I could see them and only included 2 divs for brevity).
<style type="text/css">
div {border: 1px solid green;}
</style>

<DIV id='idOutput'>
<DIV id="idDivConfig " onclick="
Hide_Divs('idOu tput','idDivCon figChild','Chil d');
">
<span id="IMGidDivCon fig" style="display: inline;"
class="PlusMinu s">+ </span>
<span style="display: inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfig Child">blah idDivConfigChil d</DIV>
</DIV>
<DIV id="idDivPing" onclick="
Hide_Divs('idOu tput','idDivPin gChild','Child' );
">
<span id="IMGidDivPin g" style="display: inline;"
class="PlusMinu s">+ </span>
<span style="display: inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingCh ild">blah idDivPingChild</DIV>
</DIV>
</DIV>
<script type="text/javascript">
function Hide_Divs(theDi v,TheDivToShow, TheClass) {
var elDiv = document.getEle mentById(theDiv );
var elChildElement = elDiv.getElemen tsByTagName('di v');
var i = elChildElement. length;
var el;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
el = elChildElement[i];
if ( el.className && cReg.test(el.cl assName)) {
if (el.id && el.id != TheDivToShow ){
el.style.displa y = 'none';
} else {
el.style.displa y = '';
}
}
}
}
</script>

--
Rob

[RobG]

Joseph wrote:

Hi Rob,

Thank you fr your help.
I must be really dumb cause I can't make it to work:
f

Please don't top-post, trim replies and remember to indent only
2 or 4 characters per indent.
I can't see your problem, your posted code works fine with no
obvious errors in IE and Firefox for me.

Are there any symptoms/results that make you think it isn't
working? I can't fix what ain't broke :-)

I've given a hint to making your 'getElementWith Id()' function a
little trimmer (I was actually joking on that one, but good to
see support for some older browsers).

function getElementWithI d(id){
var obj = null;
You don't need this variable, see below
if(document.get ElementById){
/* Prefer the widely supported W3C DOM method, if
available:-
*/
obj = document.getEle mentById(id);
Why store the value then only to return it? Just return right
here:

return document.getEle mentById(id);
}else if (document.all){
/* Branch to use document.all on document.all only
browsers. Requires that IDs are unique to the page
and do not coincide with NAME attributes on other
elements:-
*/
obj = document.all[id];
Same here:

return document.all[id];
}
/* If no appropriate element retrieval mechanism exists on
this browser this function always returns null:-
*/
return obj;

and if we get to here, neither getElementById or document.all
are supported so return false:

return false;

You could even get rid of the else statement and just have two
ifs, but I'm not sure that's of any real benefit. And returning
null or false probably makes no real difference, but false is
more explicit to me that the function failed to get the element.

Now when you get elDiv in Hide_Divs, the first thing you do is
make sure you can find elDiv. If not, don't do anything:

function Hide_Divs(theDi v,TheDivToShow, TheClass) {
var elDiv;
if ( (elDiv = getElementWithI d(theDiv))){

// the rest of your function

}
}

function getElementWithI d(id){
if(document.get ElementById){
return document.getEle mentById(id);
} else if (document.all){
return document.all[id];
}
return null;
}

or the compressed (but somewhat cryptic) version:

function getElementWithI d(id){
return (document.getEl ementById)? document.getEle mentById(id):
(document.all)? document.all[id] : false;
}

--
Rob