0 Replies - 2814 Views - Last Post: 18 August 2012 - 01:14 AM

#1 kippie32  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 18-August 12

How to change scrolling direction?

Posted 18 August 2012 - 01:14 AM

Hi, I have a code here using smoothDivScroll and I want to make to buttons to change the scrolling direction to the Right and to the Left. As far as I can see the code for changing the direction is already in there, but I do not know how to add a button....

This is the 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>



Is This A Good Question/Topic? 0
  • +

Page 1 of 1