By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,704 Members | 1,475 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,704 IT Pros & Developers. It's quick & easy.

Can anyone help me please!

P: n/a
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>.innerHTML 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_Divs('idOutput','idDivConfigChild',' Child')">
<span id="IMGidDivConfig" style="display:inline;" class="PlusMinus">+ </span>
<span style="display:inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfigChild">blah </DIV> </DIV>
<DIV id="idDivPing" onclick="Hide_Divs('idOutput','idDivPingChild','Ch ild')">
<span id="IMGidDivPing" style="display:inline;" class="PlusMinus">+ </span>
<span style="display:inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingChild">blah </DIV> </DIV>
<DIV ...(4 more)

function Hide_Divs(theDiv,TheDivToShow,TheClass) {
var elDiv = getElementWithId(theDiv);
for (var x = 0; elDiv.childNodes[x]; x++) {
if (elDiv.childNodes[x].id.length > 0) {
var elChildElement = elDiv.getElementsByTagName("div");
var i = elChildElement.length;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
var el = elChildElement[i];
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != TheDivToShow ){
el.style.display = 'none';
} else {
el.style.display = '';
}
}
}
}
}
}

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Joseph wrote:

Do not cross post to so many groups, this is a JavaScript issue so
probably comp.lang.javascript 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>.innerHTML 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_Divs('idOutput','idDivConfigChild',' Child')">
<span id="IMGidDivConfig" style="display:inline;" class="PlusMinus">+ </span>
<span style="display:inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfigChild">blah </DIV> </DIV>
<DIV id="idDivPing" onclick="Hide_Divs('idOutput','idDivPingChild','Ch ild')">
<span id="IMGidDivPing" style="display:inline;" class="PlusMinus">+ </span>
<span style="display:inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingChild">blah </DIV> </DIV>
<DIV ...(4 more)

function Hide_Divs(theDiv,TheDivToShow,TheClass) {
var elDiv = getElementWithId(theDiv);
If you want a method called "getElementWithId" 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.getElementById(theDiv);
for (var x = 0; elDiv.childNodes[x]; x++) {
if (elDiv.childNodes[x].id.length > 0) {
If elDiv.childNodes[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.childNodes[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.getElementsByTagName("div");
This doesn't make sense. You get the childNodes of elDiv, then use
getElementsByTagName 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.className)) {
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('idOutput','idDivConfigChild','Child');
">
<span id="IMGidDivConfig" style="display:inline;"
class="PlusMinus">+ </span>
<span style="display:inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfigChild">blah idDivConfigChild</DIV>
</DIV>
<DIV id="idDivPing" onclick="
Hide_Divs('idOutput','idDivPingChild','Child');
">
<span id="IMGidDivPing" style="display:inline;"
class="PlusMinus">+ </span>
<span style="display:inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingChild">blah idDivPingChild</DIV>
</DIV>
</DIV>
<script type="text/javascript">
function Hide_Divs(theDiv,TheDivToShow,TheClass) {
var elDiv = document.getElementById(theDiv);
var elChildElement = elDiv.getElementsByTagName('div');
var i = elChildElement.length;
var el;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
el = elChildElement[i];
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != TheDivToShow ){
el.style.display = 'none';
} else {
el.style.display = '';
}
}
}
}
</script>

--
Rob
Jul 23 '05 #2

P: n/a
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(theDiv,TheDivToShow,TheClass) {
var elDiv = getElementWithId(theDiv);
var elChildElement = elDiv.getElementsByTagName('div');
var i = elChildElement.length;
var el;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
el = elChildElement[i];
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != TheDivToShow ){
el.style.display = 'none';
} else {
el.style.display = '';
}
}
}
}

function getElementWithId(id){
var obj = null;
if(document.getElementById){
/* Prefer the widely supported W3C DOM method, if
available:-
*/
obj = document.getElementById(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_Divs('idOutput','idDivConfigChild',' Child');">
<span id="IMGidDivConfig" style="display:inline;" class="PlusMinus">+ </span>
<span style="display:inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfigChild">blah iddivconfigchild</div>
</DIV>

<DIV id="idDivPing" onclick="Hide_Divs('idOutput','idDivPingChild','Ch ild');">
<span id="IMGidDivPing" style="display:inline;" class="PlusMinus">+ </span>
<span style="display:inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingChild">blah iddivpingchild</div>
</DIV>
</DIV>

Thanks mate

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/
"RobG" <rg***@iinet.net.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.javascript 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>.innerHTML 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_Divs('idOutput','idDivConfigChild',' Child')">
<span id="IMGidDivConfig" style="display:inline;" class="PlusMinus">+ </span>
<span style="display:inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfigChild">blah </DIV> </DIV>
<DIV id="idDivPing" onclick="Hide_Divs('idOutput','idDivPingChild','Ch ild')">
<span id="IMGidDivPing" style="display:inline;" class="PlusMinus">+ </span>
<span style="display:inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingChild">blah </DIV> </DIV>
<DIV ...(4 more)

function Hide_Divs(theDiv,TheDivToShow,TheClass) {
var elDiv = getElementWithId(theDiv);


If you want a method called "getElementWithId" 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.getElementById(theDiv);
for (var x = 0; elDiv.childNodes[x]; x++) {
if (elDiv.childNodes[x].id.length > 0) {


If elDiv.childNodes[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.childNodes[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.getElementsByTagName("div");


This doesn't make sense. You get the childNodes of elDiv, then use
getElementsByTagName 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.className)) {
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('idOutput','idDivConfigChild','Child');
">
<span id="IMGidDivConfig" style="display:inline;"
class="PlusMinus">+ </span>
<span style="display:inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfigChild">blah idDivConfigChild</DIV>
</DIV>
<DIV id="idDivPing" onclick="
Hide_Divs('idOutput','idDivPingChild','Child');
">
<span id="IMGidDivPing" style="display:inline;"
class="PlusMinus">+ </span>
<span style="display:inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingChild">blah idDivPingChild</DIV>
</DIV>
</DIV>
<script type="text/javascript">
function Hide_Divs(theDiv,TheDivToShow,TheClass) {
var elDiv = document.getElementById(theDiv);
var elChildElement = elDiv.getElementsByTagName('div');
var i = elChildElement.length;
var el;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
el = elChildElement[i];
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != TheDivToShow ){
el.style.display = 'none';
} else {
el.style.display = '';
}
}
}
}
</script>

--
Rob

Jul 23 '05 #3

P: n/a
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.net.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.javascript 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>.innerHTML 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_Divs('idOutput','idDivConfigChild',' Child')">
<span id="IMGidDivConfig" style="display:inline;" class="PlusMinus">+ </span>
<span style="display:inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfigChild">blah </DIV> </DIV>
<DIV id="idDivPing" onclick="Hide_Divs('idOutput','idDivPingChild','Ch ild')">
<span id="IMGidDivPing" style="display:inline;" class="PlusMinus">+ </span>
<span style="display:inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingChild">blah </DIV> </DIV>
<DIV ...(4 more)

function Hide_Divs(theDiv,TheDivToShow,TheClass) {
var elDiv = getElementWithId(theDiv);


If you want a method called "getElementWithId" 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.getElementById(theDiv);
for (var x = 0; elDiv.childNodes[x]; x++) {
if (elDiv.childNodes[x].id.length > 0) {


If elDiv.childNodes[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.childNodes[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.getElementsByTagName("div");


This doesn't make sense. You get the childNodes of elDiv, then use
getElementsByTagName 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.className)) {
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('idOutput','idDivConfigChild','Child');
">
<span id="IMGidDivConfig" style="display:inline;"
class="PlusMinus">+ </span>
<span style="display:inline;" id=1> IP Config Results: </span>
<div class="Child" id="idDivConfigChild">blah idDivConfigChild</DIV>
</DIV>
<DIV id="idDivPing" onclick="
Hide_Divs('idOutput','idDivPingChild','Child');
">
<span id="IMGidDivPing" style="display:inline;"
class="PlusMinus">+ </span>
<span style="display:inline;" id=2> Ping Results: </span>
<div class="Child" id="idDivPingChild">blah idDivPingChild</DIV>
</DIV>
</DIV>
<script type="text/javascript">
function Hide_Divs(theDiv,TheDivToShow,TheClass) {
var elDiv = document.getElementById(theDiv);
var elChildElement = elDiv.getElementsByTagName('div');
var i = elChildElement.length;
var el;
var cReg = new RegExp('\\b' + TheClass + '\\b');
while (i--) {
el = elChildElement[i];
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != TheDivToShow ){
el.style.display = 'none';
} else {
el.style.display = '';
}
}
}
}
</script>

--
Rob

Jul 23 '05 #4

P: n/a
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 'getElementWithId()' function a
little trimmer (I was actually joking on that one, but good to
see support for some older browsers).

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

return document.getElementById(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(theDiv,TheDivToShow,TheClass) {
var elDiv;
if ( (elDiv = getElementWithId(theDiv))){

// the rest of your function

}
}

function getElementWithId(id){
if(document.getElementById){
return document.getElementById(id);
} else if (document.all){
return document.all[id];
}
return null;
}

or the compressed (but somewhat cryptic) version:

function getElementWithId(id){
return (document.getElementById)? document.getElementById(id):
(document.all)? document.all[id] : false;
}

--
Rob
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.