Window Scroll H
Instead of scrolling vertically this script allows you to scroll the window horizontally to set positions using links.
Although CSS is used to set the positions that the window scrolls to, it is the window that scrolls and not the layer.
For more information and examples on scrolling layers see my CSS & Script section.
This example has 5 Displays, you can scroll left or right using the links at the top of each Display.
<script type="text/javascript">
<!--
// Jeff
//www.huntingground.freeserve.co.uk
timer=null
currentID="div1"
function next(n){
count=currentID.substring(3,currentID.length)
if(n==1){count++}
if(n==0){count--}
ScrollToDiv("div"+count)
}
function ScrollToDiv(id){
steps=20
currentID=id
curPos=document.body.scrollLeft
totalWidth=document.body.scrollWidth-document.body.clientWidth
nextPos=parseInt(document.getElementById(id).offsetLeft+document.getElementById(id).offsetParent.offsetLeft)
if(curPos<nextPos){
if((nextPos-curPos)<steps){steps=1}
window.scrollBy(steps,0)
clearTimeout(timer)
timer=setTimeout("ScrollToDiv('"+id+"')",20)
if(curPos>=nextPos||curPos>=totalWidth){
clearTimeout(timer)
}
}
else{
if(curPos>nextPos){
if((curPos-nextPos)<steps){steps=1}
window.scrollBy(-steps,0)
clearTimeout(timer)
timer=setTimeout("ScrollToDiv('"+id+"')",20)
}
else{
clearTimeout(timer)
}
}
}
//-->
</script>
</HEAD>
<BODY>
<h1>Window Scroll H</h1>
<DIV style="width:3260px">
<div id="div1" style="width:600px; height:500px; float:left; border:1px solid #000000;margin-right:50px">
<div style="text-align:center">
<span style="font-weight:bold">Display 1</span>
<a href="#null" onclick="ScrollToDiv('div2')">Display 2</a>
<a href="#null" onclick="ScrollToDiv('div3')">Display 3</a>
<a href="#null" onclick="ScrollToDiv('div4')">Display 4</a>
<a href="#null" onclick="ScrollToDiv('div5')">Display 5</a>
<b><a href="#null" onclick="next(1)">Next</a></b>
</div>
<br><br>
<center><img src="pic01.jpg"></center>
</div>
<div id="div2" style="width:600px; height:500px; float:left; border:1px solid #000000;margin-right:50px">
<div style="text-align:center">
<b><a href="#null" onclick="next(0)">Previous</a></b>
<a href="#null" onclick="ScrollToDiv('div1')">Display 1</a>
<span style="font-weight:bold">Display 2</span>
<a href="#null" onclick="ScrollToDiv('div3')">Display 3</a>
<a href="#null" onclick="ScrollToDiv('div4')">Display 4</a>
<a href="#null" onclick="ScrollToDiv('div5')">Display 5</a>
<b><a href="#null" onclick="next(1)">Next</a></b>
</div>
<br><br>
<center><img src="pic02.jpg"></center>
</div>
<div id="div3" style="width:600px; height:500px; float:left; border:1px solid #000000;margin-right:50px">
<div style="text-align:center">
<b><a href="#null" onclick="next(0)">Previous</a></b>
<a href="#null" onclick="ScrollToDiv('div1')">Display 1</a>
<a href="#null" onclick="ScrollToDiv('div2')">Display 2</a>
<span style="font-weight:bold">Display 3</span>
<a href="#null" onclick="ScrollToDiv('div4')">Display 4</a>
<a href="#null" onclick="ScrollToDiv('div5')">Display 5</a>
<b><a href="#null" onclick="next(1)">Next</a></b>
</div>
<br><br>
<center><img src="pic03.jpg"></center>
</div>
<div id="div4" style="width:600px; height:500px; float:left; border:1px solid #000000;margin-right:50px">
<div style="text-align:center">
<b><a href="#null" onclick="next(0)">Previous</a></b>
<a href="#null" onclick="ScrollToDiv('div1')">Display 1</a>
<a href="#null" onclick="ScrollToDiv('div2')">Display 2</a>
<a href="#null" onclick="ScrollToDiv('div3')">Display 3</a>
<span style="font-weight:bold">Display 4</span>
<a href="#null" onclick="ScrollToDiv('div5')">Display 5</a>
<b><a href="#null" onclick="next(1)">Next</a></b>
</div>
<br><br>
<center><img src="pic04.jpg"></center>
</div>
<div id="div5" style="width:600px; height:500px; float:left; border:1px solid #000000;margin-right:50px">
<div style="text-align:center">
<b><a href="#null" onclick="next(0)">Previous</a></b>
<a href="#null" onclick="ScrollToDiv('div1')">Display 1</a>
<a href="#null" onclick="ScrollToDiv('div2')">Display 2</a>
<a href="#null" onclick="ScrollToDiv('div3')">Display 3</a>
<a href="#null" onclick="ScrollToDiv('div4')">Display 4</a>
<span style="font-weight:bold">Display 5</span> </b>
</div>
<br><br>
<center><img src="pic05.jpg"></center>
</div>
</DIV>
<br style="clear:both">