Home Scrollers SAG Content Scroller Developer's View
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="sagscroller.css" />
<script src="sagscroller.js">
/***********************************************
* SAG Content Scroller- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* Please keep this notice intact
***********************************************/
</script>
<style type="text/css">
/* #SAG scroller demo #1 */
div#mysagscroller{
width: 200px; /*width of scroller*/
height:250px;
}
div#mysagscroller ul li{
background:navy;
color:white;
padding:5px;
margin-bottom:5px; /*bottom spacing between each LI*/
}
div#mysagscroller ul li:first-letter{
font-size:28px;
background:white;
color:black;
padding:0 2px;
margin-right:2px;
}
/* #SAG scroller demo #2 */
div#mysagscroller2{
width: 250px; /*width of scroller*/
height:300px;
border:7px solid #C0C0C0;
}
div#mysagscroller2 ul li img{
border-width:0;
display:block; /*this causes each image to be flush against each other*/
}
</style>
<script>
//SAG scroller demo #1:
var sagscroller1=new sagscroller({
id:'mysagscroller',
mode: 'manual' //<--no comma following last option
})
//SAG scroller demo #2:
var sagscroller2=new sagscroller({
id:'mysagscroller2',
mode: 'auto',
pause: 2500,
animatespeed: 400 //<--no comma following last option
})
</script>
</head>
<body>
<body>
<div id="mysagscroller" class="sagscroller">
<ul>
<li>Ajax is a group of interrelated web development techniques used on the
client-side to create interactive web applications.</li>
<li>XML's design goals emphasize simplicity, generality, and usability over the
Internet.</li>
<li>SVG and HTML5's canvas element allow for the creation of simple graphical
objects using programming.</li>
<li>The new audio and video elements of HTML5 offer an alternative to flash for
embedding multimedia on the web.</li>
<li>CSS is a style sheet language used to describe the presentation semantics
(the look and formatting) of a document written in a markup language.</li>
</ul>
</div>
<br />
<div id="mysagscroller2" class="sagscroller">
<ul>
<li><a href="#"><img src="http://i29.tinypic.com/xp3hns.jpg" /></a></li>
<li><a href="#"><img src="http://i26.tinypic.com/11l7ls0.jpg" /></a></li>
<li><a href="#"><img src="http://i31.tinypic.com/119w28m.jpg" /></a></li>
<li><a href="#"><img src="http://i27.tinypic.com/34fcrxz.jpg" /></a></li>
</ul>
</div></body>
</html>