Switching content (javascript)
Hello
Bonjour
Buenos días
こんにちは
Beer
Bière
Cerveza
ビール
Wine
Vin
Vino
ワイン
Love
Amour
Amor
愛
HTML
CSS
#switchlang {
padding:5px;
border:1px solid purple;
}
#switchlang div {
color:purple; padding:10px;
}
#switchlang div.headfoot {
height:30px;
padding:10px 0;
background-color: yellow;
color:red;
text-align:center;
border:1px solid purple;
border-left:0;
border-right:0;
margin-bottom:5px;
}
#switchlang a {
cursor:pointer;
}
#switchlang li:hover {
color:red;
}
#switchlang #switches {
width:550px;
margin:auto;
text-align:center;}
#switchlang ul#switches li {
padding:0 20px;
float:left;
width:90px;
}
#box1 {
border:1px solid red;
width:205px; float:left;
}
#box2 {
position:relative;
border:1px solid brown;
margin-left:230px;
}
#box3 {
border:1px solid blue;
width:380px; float:left;
}
#box4 {
position:relative;
border:1px solid green;
margin-left:405px;
}
#box1, #box2, #box3, #box4 {
height:100px;
margin-bottom:10px;
}
Javascript
//
function switchlang(lang) {
if (document.getElementById('switchlang')) {
var option=['english','french','spanish','japanese'];
for(var i=0; i<option.length; i++) {
for(var j=1; j<5; j++) {
obj=document.getElementById(option[i]+j);
obj.style.display=(option[i]==lang)? "block" : "none"; }
}
var option=['eng','fre','spa','jap']; //to show the 'active' language
for(var i=0; i<option.length; i++) {
obj=document.getElementById(option[i]);
obj.style.color=(option[i]==lang.substr(0,3))? "red" : "navy"; }
}
}
//
window.onload=function () {switchlang('english')}
Comments
#1 #2The pages work fine in Firefox 1.0, of course... I should have stayed with that.
Shannon,
Yeah... funnily enough - I noticed that problem with the form only today. I was making a few changes - adding the BB code - and when I checked IE I saw the name field wasn't appearing... I'll see what I can do. Thanks for letting me know though.
As for this page, I think in the long run, this kind of thing is best done server-side - especially if it's a big site. I'm a bit wary of recommending javascript, to be honest (although you wouldn't think it when you see all the javascript demos I've put up). Some people (about 10%) have javascript disabled and so some of these things won't work for them...
Wow, I've been searching for something like this for a while!
Yes, exactly! Thanks A LOT -- I will study what you did. BTW, When I first click the "Comment on this page" link, the form does not appear correctly, and the Name field doesn't appear. After I clicked it a few more times it finally showed up. I'm using MSIE 6.0. Yesterday I used Netscape 7.1 successfully on your site, but today it would not bring up the pages correctly.