simplyScroll v2

a flexible jQuery content scroller with touch support

Manual Vertical scrolling example

Jump to: [HTML] [Javascript] [CSS]

This product is no longer supported! It was originally created in 2008 and web technology and processing speeds have increased to the point where this scrolling technique is no longer necessary. Please use something else!

Manual vertical scrolling with modified button positions via 'customClass', set to 'loop' scrolling mode.

HTML

<ul id="scroller">
	<li><img src="image1.jpg" width="290" height="200"></li>
	<li><img src="image2.jpg" width="290" height="200"></li>
	<li><img src="image3.jpg" width="290" height="200"></li>
    ...
</ul>            

Javascript

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.simplyscroll.js"></script>
<link rel="stylesheet" href="jquery.simplyscroll.css" media="all" 
type="text/css">

<script type="text/javascript">
(function($) {
	$(function() { //on DOM ready
		$("#scroller").simplyScroll({
			customClass: 'vert',
			orientation: 'vertical',
            auto: false,
            manualMode: 'loop',
			frameRate: 20,
			speed: 5
		});
	});
})(jQuery);
</script>

CSS

The styles are included in the CSS supplied

/* Container DIV - automatically generated */
.simply-scroll-container { 
	position: relative;
}

/* Clip DIV - automatically generated */
.simply-scroll-clip { 
	position: relative;
	overflow: hidden;
}

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list { 
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
	
.simply-scroll-list li {
	padding: 0;
	margin: 0;
	list-style: none;
}
	
.simply-scroll-list li img {
	border: none;
	display: block;
}

/* Master button styles - note that left and right 
versions are included although they are not used in this example */

.simply-scroll-btn {
	position: absolute;
	background-image: url(buttons.png);
	width: 42px;
	height: 44px;
	z-index:3;
	cursor: pointer;
}
	
.simply-scroll-btn-left {
	left: 6px;
	bottom: 6px;
	background-position: 0 -44px;
}
.simply-scroll-btn-left.disabled {
	background-position: 0 0 !important;
}
.simply-scroll-btn-left:hover {
	background-position: 0 -88px;
}
	
.simply-scroll-btn-right {
	right: 6px;
	bottom: 6px;
	background-position: 84px -44px;
}
.simply-scroll-btn-right.disabled {
	background-position: 84px 0 !important;
}
.simply-scroll-btn-right:hover {
	background-position: 84px -88px;
}
	
.simply-scroll-btn-up {
	right: 6px;
	top: 6px;
	background-position: -126px -44px;
}
.simply-scroll-btn-up.disabled {
	background-position: -126px 0 !important;
}
.simply-scroll-btn-up:hover {
	background-position: -126px -88px;
}
	
.simply-scroll-btn-down {
	right: 6px;
	bottom: 6px;
	background-position: -42px -44px;
}
.simply-scroll-btn-down.disabled {
	background-position: -42px 0 !important;
}
.simply-scroll-btn-down:hover {
	background-position: -42px -88px;
}

/* Custom class modifications - adds to / overrides above

Vertical scroller example, with custom base class */

/* Container DIV */
.vert { 
	width: 340px; /* wider than clip for custom button pos. */
	height: 400px;
	margin-bottom: 1.5em;
}

/* Clip DIV */
.vert .simply-scroll-clip {
	width: 290px;
	height: 400px;
}

/* Explicitly set height/width of each list item */
.vert .simply-scroll-list li {
	width: 290px;
	height: 200px;
}

/* Modified button positions, overriding previous styles */
.vert .simply-scroll-btn-up { 
	right: 0;
	top: 0;
}

.vert .simply-scroll-btn-down { 
	right: 0;
	top: 52px;
}

« Back to simplyScroll Home

Images used on this page are courtesy of Key-2 Luxury / Firehouse