First look at the html. You'll see that there are three stories just one after the other in the code (divs called 'one', 'two' and 'three').
Onmousedown (i.e. when you click the link) one of those divs will be shown (display : block) while the other two will be hidden (display : none). Onmouseup (i.e. when you release the mouse button), the script is called again to show 'story one' (#one). The 'for' loop in the javascript starts with an 'if' statement that checks to see if the div we want to change actually exists on the page. It starts off with only #one visible due to the last line of the javascript which calls the function on load with the variable 'div' being 'one'.
So, two divs are hidden and one is shown. Simple enough.
If javascript is disabled, the user will still be able to view all of the content as nothing is hidden by the css.
I found that, although everything seems great here (or at least I think so), it's not perfect.
On some other pages, I have/had the code boxes at the bottom floated left and right so they're next to each other. I tried that here too, but when the content was switched, the floated content stayed where it was. "Hmmm..." I thought.
FACTS
* Population: 127.8 million (UN, 2004)
* Capital: Tokyo
* Area: 377,864 sq km (145,894 sq miles)
* Major language: Japanese
* Major religions: Shintoism, Buddhism
* Life expectancy: 78 years (men), 85 years (women) (UN)
* Monetary unit: yen
* Main exports: Vehicles, computer parts, chemicals, scientific instruments
and watches
* GNI per capita: US $34,510 (World Bank, 2003)
* Internet domain: .jp
* International dialling code: +81
HTML
<h1>Switching content (javascript)</h1>
<div id="switchcontent">
<div class="headfoot">
<ul id="switches">
<li><a href="javascript:void[0];" onmousedown="switch1('two');" onmouseup="switch1('one');">story two</a></li>
<li><a href="javascript:void[0];" onmousedown="switch1('three');" onmouseup="switch1('one');">story three</a></li>
</ul>
</div>
<div id="one">
<h2>About this page</h2>
<p>First look at the html. You'll see that there are three stories just one after the other in the code (divs called 'one', 'two' and 'three'). </p>
<p>Onmousedown (i.e. when you click the link) one of those divs will be shown (display : block) while the other two will be hidden (display : none). Onmouseup (i.e. when you release the mouse button), the script is called again to show 'story one' (#one). The 'for' loop in the javascript starts with an 'if' statement that checks to see if the div we want to change actually exists on the page. It starts off with only #one visible due to the last line of the javascript which calls the function on load with the variable 'div' being 'one'. </p>
<p>So, two divs are hidden and one is shown. Simple enough.</p>
<p>If javascript is disabled, the user will still be able to view all of the content as nothing is hidden by the css. </p>
</div>
<div id="two">
<h2>Small problem</h2>
<p>I found that, although everything seems great here (or at least I think so), it's not perfect.</p>
<p>On some other pages, I have/had the code boxes at the bottom floated left and right so they're next to each other.
I tried that here too, but when the content was switched, the floated content stayed where it was. "Hmmm..."
I thought.</p>
</div>
<div id="three">
<h2>Country profile: Japan</h2>
<p>FACTS</p>
<p> * Population: 127.8 million (UN, 2004)<br />
* Capital: Tokyo<br />
* Area: 377,864 sq km (145,894 sq miles)<br />
* Major language: Japanese<br />
* Major religions: Shintoism, Buddhism<br />
* Life expectancy: 78 years (men), 85 years (women) (UN)<br />
* Monetary unit: yen<br />
* Main exports: Vehicles, computer parts, chemicals, scientific instruments
and watches<br />
* GNI per capita: US $34,510 (World Bank, 2003)<br />
* Internet domain: .jp<br />
* International dialling code: +81</p>
</div>
<div class="headfoot">Footer goes here</div>
</div>
<div class="clear"></div>
CSS
#switchcontent {
border:1px solid purple;
}
#switchcontent div {
color:purple; padding:10px;
}
div.headfoot {
height:30px;
padding:0;
background-color: yellow;
color:red;
text-align:center;
border:1px solid purple;
border-left:0;
border-right:0;
}
#switchcontent a {
cursor:pointer;
}
#switchcontent li:hover {
color:red;
}
#switches {
width:400px;
margin:auto;
text-align:center;
}
ul#switches li {
padding:0 20px;
float:left;
width:100px;
}
Javascript
function switch1(div) {
var option=['one','two','three'];
for(var i=0; i<option.length; i++) {
if (document.getElementById(option[i])) {
obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none";
}
}
}
window.onload=function () {switch1('one')}