Hide/Show Divs

11-18-2008

I am trying to control the visibility of a set of div based on
selected values but can't seem to get it right. Below is what I have
so far but it does not work at all.

The basic concept was to have a set of Divs A through Z and by click
the associated text character that Div would be visible and all others
would be hidden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function HideAll() {
var DivName
//Loop through each lette of the alphabet
for (var i = 0; i < 26; i++) {
//document.write(String.fromCharCode(i+65)+" ");
//Hide the specified div
DivName = String.fromCharCode(i+65);
//alert(DivName);
//document.getElementById(''+DivName+'').style.displ ay=='none';
document.getElementById('P').style.display=='none' ;
}
return false;
}

function ShowDiv() {

}
</script>
</head>
<body>
<div id="outerWrapper">
<div id="header">
<p></p>
</div>
<p><SPAN onclick="JavaScript: return HideAll();">A</SPAN>-B-C-D-E-F-
G-H-I-J-K-L-M-N-O-P-Q-R-S-T-U-V-W-X-Y-Z</p>
</div>
</body>
</html>

On a side note, working with javascript, how does a professional
developer troubleshot functions etc? Are there any tools that permit
evaluating variable, placing code breaks, outputing error codes/desc.,
etc during execution?

Thank you so very much for the enlightenment!

QB

11-18-2008

Sorry my HTML was incomplete. Here it is again

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function HideAll() {
var DivName
//Loop through each lette of the alphabet
for (var i = 0; i < 26; i++) {
//document.write(String.fromCharCode(i+65)+" ");
//Hide the specified div
DivName = String.fromCharCode(i+65);
//alert(DivName);
//document.getElementById(''+DivName
+'').style.display=='none';
document.getElementById('P').style.display=='none' ;
}
return false;

}

function ShowDiv() {

}

</script>
</head>
<body>
<div id="outerWrapper">
<div id="header">
<p></p>
</div>
<p><SPAN onclick="JavaScript: return HideAll();">A</SPAN>-B-C-D-E-
F-
G-H-I-J-K-L-M-N-O-P-Q-R-S-T-U-V-W-X-Y-Z</p>
<div id="M"><p>M text goes here</p></div>
<div id="P"><p>P text goes here</p></div>
</div>
</body>
</html>

11-18-2008

On Nov 17, 9:42*pm, question....@hotmail.com wrote:
> Sorry my HTML was incomplete. *Here it is again
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <script language="javascript" type="text/javascript">
> function HideAll() {
> * * * * var DivName
> * * * * //Loop through each lette of the alphabet
> * * * * for (var i = 0; i < 26; i++) {
> * * * * * * * * //document.write(String.fromCharCode(i+65)+" ");
> * * * * * * * * //Hide the specified div
> * * * * * * * * DivName = String.fromCharCode(i+65);
> * * * * * * * * //alert(DivName);
> * * * * * * * * //document.getElementById(''+DivName
> +'').style.display=='none';
> * * * * * * * * document.getElementById('P').style.display=='none' ;
> * * * * }
> * * * * return false;
>
> }
>
> function ShowDiv() {
>
> }
>
> </script>
> </head>
> <body>
> <div id="outerWrapper">
> * <div id="header">
> * * <p></p>
> * </div>
> * *<p><SPAN onclick="JavaScript: return HideAll();">A</SPAN>-B-C-D-E-
> F-
> G-H-I-J-K-L-M-N-O-P-Q-R-S-T-U-V-W-X-Y-Z</p>
> * <div id="M"><p>M text goes here</p></div>
> * <div id="P"><p>P text goes here</p></div>
> </div>
> </body>
> </html>

Never mind. It was an extra =!!!!

document.getElementById('P').style.display=='none' ;
should be
document.getElementById('P').style.display='none';

11-18-2008

Reply at bottom

<> wrote in message
news:bab01ae3-1978-4ab9-b55e-...
>I am trying to control the visibility of a set of div based on
> selected values but can't seem to get it right. Below is what I have
> so far but it does not work at all.
>
> The basic concept was to have a set of Divs A through Z and by click
> the associated text character that Div would be visible and all others
> would be hidden.
>
> [snip]
>
> On a side note, working with javascript, how does a professional
> developer troubleshot functions etc? Are there any tools that permit
> evaluating variable, placing code breaks, outputing error codes/desc.,
> etc during execution?
>
> Thank you so very much for the enlightenment!
>
> QB

I didn't look at the two later posts but try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript">
function init(){
var HTML = '<p>Click letter to show relevant division</p>'
for (var i = 0; i < 26; i++) {
var letter = String.fromCharCode(i+65);
HTML += '<SPAN id="hide' + letter + '" onclick="hideAll(\'' + letter +
'\');"><u>' + letter + '</u></SPAN>';
HTML += (i<25) ? '-':''
}
document.getElementById('alphabet').innerHTML = HTML;
}

function hideAll(divSelected) {
//Loop through each letter of the alphabet
for (var i = 0; i < 26; i++) {
// Show the specified div ; Hide all othere
var DivName = String.fromCharCode(i+65);
document.getElementById(DivName).style.display
= (divSelected==DivName)?'':'none';
}
return false;
}
</script>

</head>
<body onload="init();hideAll(0)">
<div id="outerWrapper">
<div id="header">
<p></p>
</div>

<div id="alphabet"></div>

<div id="A">Div A</div>
<div id="B">Div B</div>
<div id="C">Div C</div>
<div id="D">Div D</div>
<div id="E">Div E</div>
<div id="F">Div F</div>
<div id="G">Div G</div>
<div id="H">Div H</div>
<div id="I">Div I</div>
<div id="J">Div J</div>
<div id="K">Div K</div>
<div id="L">Div L</div>
<div id="M">Div M</div>
<div id="N">Div N</div>
<div id="O">Div O</div>
<div id="P">Div P</div>
<div id="Q">Div Q</div>
<div id="R">Div R</div>
<div id="S">Div S</div>
<div id="T">Div T</div>
<div id="U">Div U</div>
<div id="V">Div V</div>
<div id="W">Div W</div>
<div id="X">Div X</div>
<div id="Y">Div Y</div>
<div id="Z">Div Z</div>
Some extra stuff (not hidden)
</div>
</body>
</html>

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

11-18-2008

> On a side note, working with javascript, how does a professional
> developer troubleshot functions etc? *Are there any tools that permit
> evaluating variable, placing code breaks, outputing error codes/desc.,
> etc during execution?
>
> Thank you so very much for the enlightenment!
>
> QB
For this: Just install Firefox and the plugin named Firebug...
You'll get it! (break points, step by step running, spies on variables
and so on...)

Cheers

Num

11-19-2008

On Nov 17, 10:34*pm, "Trevor Lawrence" <Trevor L.@Canberra> wrote:
> Reply at bottom
>
> <question....@hotmail.com> wrote in message
>
> news:bab01ae3-1978-4ab9-b55e-...
>
>
>
> >I am trying to control the visibility of a set of div based on
> > selected values but can't seem to get it right. *Below is what I have
> > so far but it does not work at all.
>
> > The basic concept was to have a set of Divs A through Z and by click
> > the associated text character that Div would be visible and all others
> > would be hidden.
>
> > [snip]
>
> > On a side note, working with javascript, how does a professional
> > developer troubleshot functions etc? *Are there any tools that permit
> > evaluating variable, placing code breaks, outputing error codes/desc.,
> > etc during execution?
>
> > Thank you so very much for the enlightenment!
>
> > QB
>
> I didn't look at *the two later posts but try this
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
>
> <script type="text/javascript">
> function init(){
> * var HTML = '<p>Click letter to show relevant division</p>'
> * for (var i = 0; i < 26; i++) {
> * * var letter = String.fromCharCode(i+65);
> * * HTML += '<SPAN id="hide' + letter + '" onclick="hideAll(\''+ letter +
> '\');"><u>' + letter *+ '</u></SPAN>';
> * * HTML += (i<25) ? '-':''
> * }
> * document.getElementById('alphabet').innerHTML = HTML;

You are replacing perfectly good static markup with some sort of
scripted faux links, using deprecated markup and a non-standard
property assignment. Just make them links (to bookmarks "A" through
"Z") to start with. If you detect getEBI and can find the "alphabet"
div, then attach a click listener to it (or use onclick) and delegate
from there.

[snip]

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
swapping divs -- when divs NOT positioned absolutely..	maya	Javascript	4	11-16-2007 05:11 PM
Managing divs within divs....	rich	HTML	0	02-02-2006 07:38 PM
Nested DIVs - is there a better way?	Guadala Harry	ASP .Net	2	10-26-2004 07:30 PM
asp.net and divs	mikieg_99	ASP .Net	6	07-30-2004 01:19 PM
Re: DIVs and overflow scroll bars	S. Justin Gengo	ASP .Net	0	07-18-2003 02:18 PM