simplyScroll v2

a flexible jQuery content scroller with touch support

Home » jQuery » simplyScroll » Custom example

Custom content example

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

This example shows how existing custom markup can easily be used with simplyScroll. Thanks to Gighit for allowing me to use their images/markup!

HTML

Excerpt of HTML code used in this example (adapted from gighit.com)

<div id="scroller">
  <div class="section">
    <div class="hp-highlight" 
style="background:url(path/to/image.jpg) no-repeat 0 0">
      <div class="feature-headline">
        <h1><a href="http://gighit.com/artists/the-prodigy/" 
title="The Prodigy">The Prodigy</a></h1>
        <p>The Prodigy is an English electronic music group formed 
by ...</p>
      </div>
    </div>
  </div>
  <div class="section">
    ...
  </div>
  ...
</div>            

Javascript

<script type="text/javascript" 
src="//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: 'custom',
			direction: 'backwards',
			pauseOnHover: false,
			frameRate: 20,
			speed: 2
		});
	});
})(jQuery);
</script>

CSS

Modified styles from gighit.com (some changes to make it work within this site)

.custom { /* Applied to container DIV */
	width: 576px;
	height: 210px;
	background-color: #FFF;
	margin-bottom: 1em;
}

.custom .simply-scroll-clip { /* Applied to clip DIV */
	width: 576px;
	height: 210px;
}

/* Existing styles */
#scroller .section {
	float:left;
	width: 480px;
	height: 210px;
}

#scroller .hp-highlight {
	height:210px;
	margin:-10px 10px 10px 0;
}

#scroller .feature-headline {
	position:relative;
	top:140px;
	width:432px;
	background:white;
	margin:10px 10px 20px 10px;
	padding:10px 10px 0 10px;
}
#scroller .feature-headline a {
	font-weight: bold;
	text-decoration: none;
	color:#cc0000;
}

#scroller h1 {
	font-weight:normal;
	font-size:19px;
}

#scroller p {
	font-size: 14px !important;
	color:#666666;
	line-height:130%;
	padding:0 0 10px;
}


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

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

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list { 
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	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;
}

« Back to simplyScroll Home