Can anyone help me please!

J

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>.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','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 </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;
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/
 
R

RobG

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.
Click to expand...

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','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 </DIV> </DIV>
<DIV ...(4 more)

function Hide_Divs(theDiv,TheDivToShow,TheClass) {
var elDiv = getElementWithId(theDiv);
Click to expand...

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) {
Click to expand...

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");
Click to expand...

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;
Click to expand...


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;
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != TheDivToShow ){
Click to expand...
[...]

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;
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != TheDivToShow ){
el.style.display = 'none';
} else {
el.style.display = '';
}
}
}
}
</script>
 
J

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(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;
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','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>

Thanks mate

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/
RobG said:
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.
Click to expand...

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','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 </DIV> </DIV>
<DIV ...(4 more)

function Hide_Divs(theDiv,TheDivToShow,TheClass) {
var elDiv = getElementWithId(theDiv);
Click to expand...

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) {
Click to expand...

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");
Click to expand...

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;
Click to expand...


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;
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != TheDivToShow ){
Click to expand...
[...]

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;
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != TheDivToShow ){
el.style.display = 'none';
} else {
el.style.display = '';
}
}
}
}
</script>
Click to expand...
 
J

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/philippeoget/test/26-2_Multi_IP_Tools.html

--
thanks a lot Rob

Joseph

philippeoget at hotmail dot com
http://www.geocities.com/philippeoget/a2z/
RobG said:
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.
Click to expand...

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','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 </DIV> </DIV>
<DIV ...(4 more)

function Hide_Divs(theDiv,TheDivToShow,TheClass) {
var elDiv = getElementWithId(theDiv);
Click to expand...

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) {
Click to expand...

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");
Click to expand...

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;
Click to expand...


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;
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != TheDivToShow ){
Click to expand...
[...]

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;
if ( el.className && cReg.test(el.className)) {
if (el.id && el.id != TheDivToShow ){
el.style.display = 'none';
} else {
el.style.display = '';
}
}
}
}
</script>
Click to expand...
 
R

RobG

Joseph said:
Hi Rob,

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

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;
Click to expand...

You don't need this variable, see below
if(document.getElementById){
/* Prefer the widely supported W3C DOM method, if
available:-
*/
obj = document.getElementById(id);
Click to expand...

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];
Click to expand...

Same here:

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

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;
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone help me correct this code? It should be a two line countdown timer. 3
can I do that? 0
<div> help 1
I dont get this. Please help me!! 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Help with code 0
Help with my responsive home page 2
Need help with stripe payment 0

Members online

No members online now.
Total: 29 (members: 1, guests: 28)
Robots: 138

Forum statistics

Threads
473,774
Messages
2,569,599
Members
45,175
Latest member
Vinay Kumar_ Nevatia

Latest Threads

Top