A
antonyliu2002
I never have luck in toggling divs with javascript, to which I am new.
Not even with a single browser, let alone making it compatible with all
major browsers. Also, I lack experience with client side codes.
I am gonna have a static calendar page like so:
2005
Jan
Feb
...
Dec
2006
Jan
Feb
...
Dec
2007
Jan
Feb
...
Dec
Initially, I only wanna display
2005
2006
2007
1. When 2005 is clicked I show the list of months below it.
2. When 2005 is clicked again, I hide the list of months of 2005.
3. Suppose, the list of months of 2005 is displayed right now, and the
user clicks on 2006, then hide the list of months of 2005, display the
list of months for 2006.
4. The same pattern happens with 2007.
5. The year headings are always displayed, but at any point of time,
only one list of months is displayed. They are mutually exclusive.
Simple (or maybe hard) as such, and below is what I have tried, but it
just refuses to work. Therefore, I am trying my luck here in this
forum.
<html>
<head>
<script language="javascript" type="text/javascript">
<!-- Begin
function toggleLayer(div1, div2, div3)
{
if (document.getElementById)
{
// this is the way the standards work
var style1 = document.getElementById(div1).style;
var style2 = document.getElementById(div2).style;
var style3 = document.getElementById(div3).style;
style1.display = "block";
style2.display = "none";
style3.display = "none";
}
else if (document.all)
{
// this is the way old msie versions work
var style1 = document.all[div1].style;
var style2 = document.all[div2].style;
var style3 = document.all[div3].style;
style1.display = "block";
style2.display = "none";
style3.display = "none";
}
else if (document.layers)
{
// this is the way nn4 works
var style1 = document.layers[div1].style;
var style2 = document.layers[div2].style;
var style3 = document.layers[div3].style;
style1.display = "block";
style2.display = "none
style3.display = "none";
}
}
// End -->
</script>
<title> Just a test</title>
</head>
<body>
<a href="#" onclick="toggleLayer('2005', '2006', '2007'); return
false;">2005</a><br/>
<div id="2005" style="display:none">
Jan<br/>
Feb<br/>
Mar<br/>s
Apr<br/>
May<br/>
Jun<br/>
Jul<br/>
Aug<br/>
Sep<br/>
Oct<br/>
Nov<br/>
Dec<br/>
</div>
<a href="#" onclick= "toggleLayer('2006', '2005', '2007'); return
false;">2006</a><br/>
<div id="2006" style="display:none">
Jan<br/>
Feb<br/>
Mar<br/>
Apr<br/>
May<br/>
Jun<br/>
Jul<br/>
Aug<br/>
Sep<br/>
Oct<br/>
Nov<br/>
Dec<br/>
</div>
<a href="#" onclick= "toggleLayer('2007', '2005', '2007'); return
false;">2007</a><br/>
<div id="2007" style="display:none">
Jan<br/>
Feb<br/>
Mar<br/>
Apr<br/>
May<br/>
Jun<br/>
Jul<br/>
Aug<br/>
Sep<br/>
Oct<br/>
Nov<br/>
Dec<br/>
</div>
</body>
</html>
Not even with a single browser, let alone making it compatible with all
major browsers. Also, I lack experience with client side codes.
I am gonna have a static calendar page like so:
2005
Jan
Feb
...
Dec
2006
Jan
Feb
...
Dec
2007
Jan
Feb
...
Dec
Initially, I only wanna display
2005
2006
2007
1. When 2005 is clicked I show the list of months below it.
2. When 2005 is clicked again, I hide the list of months of 2005.
3. Suppose, the list of months of 2005 is displayed right now, and the
user clicks on 2006, then hide the list of months of 2005, display the
list of months for 2006.
4. The same pattern happens with 2007.
5. The year headings are always displayed, but at any point of time,
only one list of months is displayed. They are mutually exclusive.
Simple (or maybe hard) as such, and below is what I have tried, but it
just refuses to work. Therefore, I am trying my luck here in this
forum.
<html>
<head>
<script language="javascript" type="text/javascript">
<!-- Begin
function toggleLayer(div1, div2, div3)
{
if (document.getElementById)
{
// this is the way the standards work
var style1 = document.getElementById(div1).style;
var style2 = document.getElementById(div2).style;
var style3 = document.getElementById(div3).style;
style1.display = "block";
style2.display = "none";
style3.display = "none";
}
else if (document.all)
{
// this is the way old msie versions work
var style1 = document.all[div1].style;
var style2 = document.all[div2].style;
var style3 = document.all[div3].style;
style1.display = "block";
style2.display = "none";
style3.display = "none";
}
else if (document.layers)
{
// this is the way nn4 works
var style1 = document.layers[div1].style;
var style2 = document.layers[div2].style;
var style3 = document.layers[div3].style;
style1.display = "block";
style2.display = "none
style3.display = "none";
}
}
// End -->
</script>
<title> Just a test</title>
</head>
<body>
<a href="#" onclick="toggleLayer('2005', '2006', '2007'); return
false;">2005</a><br/>
<div id="2005" style="display:none">
Jan<br/>
Feb<br/>
Mar<br/>s
Apr<br/>
May<br/>
Jun<br/>
Jul<br/>
Aug<br/>
Sep<br/>
Oct<br/>
Nov<br/>
Dec<br/>
</div>
<a href="#" onclick= "toggleLayer('2006', '2005', '2007'); return
false;">2006</a><br/>
<div id="2006" style="display:none">
Jan<br/>
Feb<br/>
Mar<br/>
Apr<br/>
May<br/>
Jun<br/>
Jul<br/>
Aug<br/>
Sep<br/>
Oct<br/>
Nov<br/>
Dec<br/>
</div>
<a href="#" onclick= "toggleLayer('2007', '2005', '2007'); return
false;">2007</a><br/>
<div id="2007" style="display:none">
Jan<br/>
Feb<br/>
Mar<br/>
Apr<br/>
May<br/>
Jun<br/>
Jul<br/>
Aug<br/>
Sep<br/>
Oct<br/>
Nov<br/>
Dec<br/>
</div>
</body>
</html>