New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact

<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- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</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>

Sweet Ads X