27 Aug 2011
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

For Multiple Usage
For Single Usage

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

Til next time,
Prayag Verma at 17:43

scribble

27 Aug 2011 Implementing Smooth Div Scroll in Blogger

27 Aug 2011
Implementing Smooth Div Scroll in Blogger