CSS Codes
CSS Layouts

<html>

<head>
<link rel="stylesheet" href="pausingscroller.css" />

<style>

/* Demo CSS for Pausing Scrollers */

#pscroller1{
width: 100%;
max-width: 400px;
height: 100px;
border: 1px solid black;
background-color: lightyellow;
margin-bottom: 1em;
}

#pscroller1 > div.innerDiv{
padding: 8px;
}


#pscroller2{
width: 100%;
max-width: 350px;
height: 35px;
border: 1px solid black;
}

#pscroller2 > div.innerDiv{
padding: 4px;
}

#pscroller2 a{
text-decoration: none;
}

</style>

<script type="text/javascript">

/*Example message arrays for the two demo scrollers*/

var pausecontent=new Array()
pausecontent[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!'
pausecontent[1]='<a href="http://www.dynamicdrive.com">Dynamic Drive</a><br />Free, original JavaScript and CSS codes to instantly add interactive features to your site!'
pausecontent[2]='<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'

var pausecontent2=new Array()
pausecontent2[0]='<a href="http://www.news.com">News.com: Technology and business reports</a>'
pausecontent2[1]='<a href="http://www.cnn.com">CNN: Headline and breaking news 24/7</a>'
pausecontent2[2]='<a href="http://news.bbc.co.uk">BBC News: UK and international news</a>'

</script>

<script type="text/javascript" src="pausingscroller.js">

/***********************************************
* Pausing up-down scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/


</script>
</head>

<body>

<div id="pscroller1" class="pausescroller"></div>

<div id="pscroller2" class="pausescroller"></div>


<script type="text/javascript">

//new pausescroller(message_array, CSS_ID, pause_in_ms, slideeffect_in_ms)

var scroller1 = new pausescroller(pausecontent, "pscroller1", 2000, 1500)

var scroller2 = new pausescroller(pausecontent2, "pscroller2", 2000, 500)

</script>

<p>
<button onClick="scroller1.pause()">Pause Scroller 1</button>
<button onClick="scroller1.resume()">Resume Scroller 1</button>
<button onClick="scroller1.populate(pausecontent2)">Populate Scroller 1 w/ Scroller 2 contents</button>
</p>

</body>
</html>