Implementing Smooth Div Scroll in Blogger



Smooth Div Scroll is a jQuery plugin that scrolls content horizontally. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scroling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hotspots within the scrollable area or via autoscrolling.




             See Demo                                                                                            Download




Steps to Add it to Blogger:

1.Login to the Blogger account


2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)

<link rel="Stylesheet" type="text/css" href="smoothDivScroll.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
<script src="jquery.ui.widget.js" type="text/javascript"></script>  
<script src="jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
		$(window).load(function() {
			$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", 
														autoScrollDirection: "backandforth",
														autoScrollStep: 1,
														autoScrollInterval: 15,
														startAtElementId: "startAtMe",
														visibleHotSpots: "always" });
 
		});
	</script> 
<style type="text/css"> 
	
	#makeMeScrollable
	{
		width:100%;
		height: 330px;
		position: relative;
	}
	
	#makeMeScrollable div.scrollableArea *
	{
		position: relative;
		float: left;
		margin: 0;
		padding: 0;
	}
	
	</style> 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!




2.Go to the Post/Page you want to add this plugin and then go to Edit HTML tab .



3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="Stylesheet" type="text/css" href="smoothDivScroll.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
<script src="jquery.ui.widget.js" type="text/javascript"></script>  
<script src="jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
		$(window).load(function() {
			$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", 
														autoScrollDirection: "backandforth",
														autoScrollStep: 1,
														autoScrollInterval: 15,
														startAtElementId: "startAtMe",
														visibleHotSpots: "always" });
 
		});
	</script> 
<style type="text/css"> 
	
	#makeMeScrollable
	{
		width:100%;
		height: 330px;
		position: relative;
	}
	
	#makeMeScrollable div.scrollableArea *
	{
		position: relative;
		float: left;
		margin: 0;
		padding: 0;
	}
	
	</style> 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!


4.Now for adding the images into this plugin see the following markup:





<div id="makeMeScrollable">
		<div class="scrollingHotSpotLeft">
</div>
<div class="scrollingHotSpotRight">
</div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="field.jpg" /><img src="gnome.jpg"  /><img src="pencils.jpg"  /><img src="golf.jpg" /><img src="river.jpg"  /><img src="train.jpg"  /><img src="leaf.jpg" /><img src="dog.jpg"\ /> 
</div>
</div>
</div>

Here you might observe that we have placed all the img tags with no spaces in between them, this is because if the img tag is placed in the next line then Blogger Editor by default adds a br tag in between the line which in-turn disturbs the indenting of the images and they appear out of place, do therefore leave no space between them.




5.Now save the Post/Page.


             See Demo                                                                                            Download






Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
dvshubham said...

how to make it automatic and stop on hover

@dvshubhamYou can change the autoscroll present in Line 8 from onstart to always. And when you hover over it stops by itself. Do you want something else.

I have a Q but this reply box does not allow me to place code. How do I ask a Q and include some code in it?