Cara Membuat Pausing up-down Scroller

Seperti namanya, Pausing up-down Scroller ini adalah up-down scroller yang dapat dijeda untuk setiap pesannya! Tampilan scroller benar-benar ditata dengan menggunakan eksternal CSS, termasuk dimensinya. Mudah membuat baris pada scroller, hanya dengan menyesuaikan ketinggian scroller's saja.

Contoh:

Pause Scroller 1Resume Scroller 1Populate Scroller 1 w/ Scroller 2 contents

Cara Memasang Pausing up-down Scroller

Langkah Pertama:

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

Langkah Kedua:

Lalu Tambahkan script berikut ini dibawahnya, masih diatas kode </head>.

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

sumber: dynamicdrive