I am currently working on a website that includes a section where the content needs to scroll horizontally as you click on the menu buttons. I have managed to implement the direction navigation, however, I am struggling to track the position of my divs in order to move them each time a button is clicked. I have been attempting to use offset(); with jQuery but have not been successful. Any assistance in guiding me through this process would be greatly appreciated. Below is some of the code and a link to a JS Fiddle for reference.
HTML Code:
<nav>
<ul>
<li id="1" class="active-state">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
</ul>
</nav>
<section id="content">
<div id="wrapper">
<div class="content" id="yellow"></div>
<div class="content" id="blue"></div>
<div class="content" id="red"></div>
<div class="content" id="purple"></div>
<div class="content" id="green"></div>
</div>
</section>
<ul id="directionNav">
<li id="left">left</li>
<li id="right">right</li>
</ul>
jQuery Code for Horizontal Scroll:
$("#3").on("click", horizontalScroll);
$("#4").on("click", horizontalScroll2);
function horizontalScroll() {
console.log($("#3").offset().left);
$("#wrapper").animate({
right: ($("#4").offset().left -1200)
});
console.log("clicked");
}
function horizontalScroll2() {
console.log($("#4").offset().left);
$("#wrapper").animate({
right: ($("#4").offset().left -1200)
});
console.log("clicked");
}
Here is the JS Fiddle link for reference: http://jsfiddle.net/xtatanx/DY3k3/
Thank you for any help or insight!