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

Hide/Show Divs

P: n/a
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
Nov 18 '08 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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>
Nov 18 '08 #2

P: n/a
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';
Nov 18 '08 #3

P: n/a
Reply at bottom

<qu**********@hotmail.comwrote in message
news:ba**********************************@z28g2000 prd.googlegroups.com...
>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
Nov 18 '08 #4

P: n/a
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

Nov 18 '08 #5

P: n/a
On Nov 17, 10:34*pm, "Trevor Lawrence" <Trevor L.@Canberrawrote:
Reply at bottom

<question....@hotmail.comwrote in message

news:ba**********************************@z28g2000 prd.googlegroups.com...
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]
Nov 19 '08 #6

This discussion thread is closed

Replies have been disabled for this discussion.