Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to change scrolling direction?

    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>
    Last edited by scooter32; 08-19-2012 at 11:42 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •