help creating a horizontally scrolling website.
Hello everyone,
I'm fairly new to javascript and the world of jQuery.
I'm trying to implement the jquery plugins, localScroll and scrollTo to make a horizontally scrolling website.
I've scoured the internet for a cohesive tutorial on those plugins but all of them seem to either assume the reader is fairly competent with javascript already, or just leave some "obvious" coding out of their tutorials.
I will explain what I would like to accomplish.
I have a menu div at the left of the window that when you click on an item it scrolls to a div item with the respective id horizontally, but also remains 'fixed' to that side of the screen to make the content divs appear to go inside or underneath the menu as they scroll.
I got this working fine, by scrolling the entire page however what I would like to accomplish is the same effect but scrolling within a contentwrapper div instead of scrolling the entire browser window.
I've tried to search the internet to find out how to do this, but to no avail.
I'm hoping maybe someone can shed some light for a beginner?
I'm not particularly keen on the specific CSS code i would need to use on the divs either.
The HEAD section:
-
<script language="JavaScript" type="text/javascript" src="javascript/jquery-1.3.2.js"></script>
<script language="JavaScript" type="text/javascript" src="javascript/jquery.scrollTo-1.4.2-min.js"></script>
<script language="JavaScript" type="text/javascript" src="javascript/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.scrollTo();
});
</script>
The BODY section:
-
<div id="sitecontainer">
<div id="menu">
<a href="#" onclick="$.scrollTo( '#Info', 1500, {offset:-200});">INFO</a>
<a href="#" onclick="$.scrollTo( '#service', 1500, {offset:-200});">SERVICE</a>
</div>
<!-- this would be the div that i would like to scroll within -->
<div id="contentwrapper">
<div id="Info">info content goes here</div>
<div id="service">service content goes here</div>
</div>
I threw in a couple overflow:hidden attributes in the CSS, but really don't know whether the CSS plays a major role in how the div would scroll.
Any ideas would be really appreciated