Swapping between sites
By Marcin Olejarz
This javascript code allows us to change displaying div which looks like whole site, so there is impression of switching three sites.
<!DOCTYPE html>
<html>
<head>
<script>
var currentlocation = "center";
function sw1(status){
if ((status == "right") && (currentlocation == "center"))
{
document.getElementById("left").style.display = "none";
document.getElementById("center").style.display = "none";
document.getElementById("right").style.display = "block";
currentlocation = "right";
status = null;
}
if ((status == "right") && (currentlocation == "right"))
{
document.getElementById("left").style.display = "block";
document.getElementById("center").style.display = "none";
document.getElementById("right").style.display = "none";
currentlocation = "left";
status = null;
}
if ((status == "right") && (currentlocation == "left"))
{
document.getElementById("left").style.display = "none";
document.getElementById("center").style.display = "block";
document.getElementById("right").style.display = "none";
currentlocation = "center";
status = null;
}
if ((status == "left") && (currentlocation == "center"))
{
document.getElementById("left").style.display = "block";
document.getElementById("center").style.display = "none";
document.getElementById("right").style.display = "none";
currentlocation = "left";
status = null;
}
if ((status == "left") && (currentlocation == "right"))
{
document.getElementById("left").style.display = "none";
document.getElementById("center").style.display = "block";
document.getElementById("right").style.display = "none";
currentlocation = "center";
status = null;
}
if ((status == "left") && (currentlocation == "left"))
{
document.getElementById("left").style.display = "none";
document.getElementById("center").style.display = "none";
document.getElementById("right").style.display = "block";
currentlocation = "right";
status = null;
}
}
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 "/>
<style>
body {
background-color:black;
}
div {
width:305px;
height:490px;
}
div#left {
display:none;
float:left;
background-color:red;
}
div#center {
float:left;
background-color:green;
}
div#right {
display:none;
float:left;
background-color:blue;
}
#toleft{
position:absolute;
left:0px;
top:0px;
}
#toright{
position:absolute;
right:0px;
top:0px;
}
button{
background-color:black;
border:none;
color:white;
}
</style>
</head>
<body>
<div id="left"><p>LEFT</p> </div>
<div id="center"><p>CENTER</p> </div>
<div id="right"><p>RIGHT</p> </div>
<button id="toleft" onclick="sw1('left')"><<<</button><button id="toright" onclick="sw1('right')">>>></button>
</body>
</html>