Hi, I have a code here using smoothDivScroll and I want to make two buttons to change the scrolling direction to the Right and to the Left. Can anyone help?
This is the code:
Code:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Lab page - jQuery Smooth Div Scroll - Thomas Kahn</title>
<meta charset="utf-8">
<!-- the CSS for Smooth Div Scroll --><!-- the CSS for this page -->
<link rel="Stylesheet" type="text/css" href="http://www.smoothdivscroll.com/css/smoothDivScroll.css">
<link rel="Stylesheet" type="text/css" href="http://www.smoothdivscroll.com/css/pageStyle.css">
<style type="text/css"><!--
#makemescrollable {
position: relative;
width: 100%;
height: 330px;
float: left; }
#makemescrollable div.scrollablearea * { float: left; margin: 0; padding: 0; border: none; position: relative }
#makemescrollable div.scrollablearea .contentbox { margin: 0px 5px; padding: 10px; border: solid 1px #ccc; width: 200px; height: 308px }
#makemescrollable div.scrollablearea .contentbox img { margin-bottom: 10px }
.subpanel { font-size: 12px; font-family: Calibri, Courier, Sans-Serif; background-color: #efefef; margin-bottom: 5px; padding: 7px }
.subpanel span { color: blue; text-decoration: underline; cursor: pointer; }
.subpanel span.notclickable { text-decoration: none; cursor: inherit; }-->
</style>
</head>
<body>
<div id="wrapper">
<div id="mainColumn">
<div id="makeMeScrollable">
<img src="http://www.smoothdivscroll.com/images/demo/field.jpg" alt="Demo image" id="field">
<img src="http://www.smoothdivscroll.com/images/demo/gnome.jpg" alt="Demo image" id="gnome">
<img src="http://www.smoothdivscroll.com/images/demo/pencils.jpg" alt="Demo image" id="pencils">
<img src="http://www.smoothdivscroll.com/images/demo/golf.jpg" alt="Demo image" id="golf">
<img src="http://www.smoothdivscroll.com/images/demo/river.jpg" alt="Demo image" id="river">
<img src="http://www.smoothdivscroll.com/images/demo/train.jpg" alt="Demo image" id="train">
<img src="http://www.smoothdivscroll.com/images/demo/leaf.jpg" alt="Demo image" id="leaf">
<img src="http://www.smoothdivscroll.com/images/demo/dog.jpg" alt="Demo image" id="dog">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("div#makeMeScrollable").smoothDivScroll({
visibleHotSpotBackgrounds: "onstart",
hotSpotsVisibleTime: 5000,
autoScrollingMode: "onstart",
startAtElementId: "field",
autoScrollingInterval: 15,
autoScrollingStep: 1,
autoScrollingMode: "onstart",
autoScrollingDirection: "backandforth",
easingAfterHotSpotScrolling: true,
easingAfterHotSpotScrollingDistance: 25,
easingAfterHotSpotScrollingDuration: 300,
easingAfterHotSpotScrollingFunction: 'easeOutQuart',
hiddenOnStart: false,
scrollToEasingDuration: 2000
});
// Handle callbacks
var callbackCounter = 1;
$("div#makeMeScrollable").smoothDivScroll({
scrollerLeftLimitReached: function () {
updateCallbackDisplayArea("Scroller left limit reached.");
}, scrollerRightLimitReached: function () {
updateCallbackDisplayArea("Scroller right limit reached.");
},
scrolledToStartElement: function (eventObj, data) {
updateCallbackDisplayArea("Scrolled to start element.");
},
autoScrollingStarted: function (eventObj, data) {
updateCallbackDisplayArea("Autoscrolling started.");
},
autoScrollingStopped: function (eventObj, data) {
updateCallbackDisplayArea("Autoscrolling stopped.");
},
autoScrollingRightLimitReached: function (eventObj, data) {
updateCallbackDisplayArea("Autoscrolling right limit reached.");
},
autoScrollingLeftLimitReached: function (eventObj, data) {
updateCallbackDisplayArea("Autoscrolling left limit reached.");
},
autoScrollingIntervalStopped: function (eventObj, data) {
console.log(eventObj);
updateCallbackDisplayArea("Autoscrolling interval stopped.");
}
});
function updateCallbackDisplayArea(message) {
$("#callbackDisplayArea").append(callbackCounter + ". " + message + "\n");
$("#callbackDisplayArea").scrollTop(99999);
callbackCounter++;
}
/********************************************
Stop and start autoscolling
********************************************/
// Stop auto scrolling
$("#stopAutoScrolling").click(function () {
$("div#makeMeScrollable").smoothDivScroll("stopAutoScrolling");
});
// Start auto scrolling
$("#startAutoScrolling").click(function () {
$("div#makeMeScrollable").smoothDivScroll("startAutoScrolling");
});
// Change the auto scrolling direction
$(".autoScrollingDirection").click(function () {
$("div#makeMeScrollable").smoothDivScroll("option", "autoScrollingDirection", $(this).attr("id"));
$(".autoScrollingDirection").css("font-weight", "normal");
$(this).css("font-weight", "bold");
});
$("#right").click(function() {
$("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","right");
});
$("#left").click(function() {
$("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","left");
});
$("#backandforth").click(function() {
$("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","backandforth");
});
});
// -->
</script>
</body>
</html>
Before you post, read our: 
