Scoller Text [JavaScript]

Example tengok seperti Announcement sebelah


<style type=”text/css”>

/*Example CSS for the two demo scrollers*/


width: 250px; /*kelebaran*/

height: 150px; /*ketinggian*/

border: 0px solid black; /*border 0px klu nk invi 1px klu nk show*/

padding: 5px; /*space text dgn kotak*/

background-color: white; /*color latarbelakang*/


.someclass{ //class to apply to your scroller(s) if desired



<script type=”text/javascript”>

/*Msg nak tulis sume area bawah ni*/

var pausecontent=new Array()

pausecontent[0]='<h4>Selamat Datang / Welcome</h4>Untuk permintaan lagu,lirik,movie,source code dan lain-lain, sila tulis di ruangan chat.Insyallah saya akan tunaikan’

pausecontent[1]='<h4><a href=””>Freelancer Web Programmer</a></h4>Anda ingin memiliki sebuah blog atau portal tetapi tidak mengetahui caranya untuk membuatnya? Jangan risau, saya akan membantu anda dengan harga berpatutan’

pausecontent[2]='<h4><a href=””>Myvi Extreme Club</a></h4>Have a myvi car? Come and join us. Our activity;Meeting members, Family Day, Safety Convoy, Events & Autoshows, Extreme Ur Idea, Frienldy Sport. We can Help; Service, Painting, Air Brush & Sticker Design, Customade & Modified, Spare Part, And many more…’

/*——Don’t change anythings below——-*/


<script type=”text/javascript”>


* Pausing up-down scroller- © Dynamic Drive (

* This notice MUST stay intact for legal use

* Visit for this script and 100s more.


function pausescroller(content, divId, divClass, delay){

this.content=content //message array content

this.tickerid=divId //ID of ticker div to display information

this.delay=delay //Delay between msg change, in miliseconds.

this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)

this.hiddendivpointer=1 //index of message array for hidden div

document.write(‘<div id=”‘+divId+'” style=”position: relative; overflow: hidden” class=”‘+divClass+'”><div id=”‘+divId+’1″ style=”position: absolute; width: 100%” class=”innerDiv”>’+content[0]+'</div><div id=”‘+divId+’2″ style=”position: absolute; width: 100%; visibility: hidden” class=”innerDiv”>’+content[1]+'</div></div>’)

var scrollerinstance=this

if (window.addEventListener) //run onload in DOM2 browsers

window.addEventListener(“load”, function(){scrollerinstance.initialize()}, false)

else if (window.attachEvent) //run onload in IE5.5+

window.attachEvent(“onload”, function(){scrollerinstance.initialize()})

else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec

setTimeout(function(){scrollerinstance.initialize()}, 500)


// ——————————————————————-

// initialize()- Initialize scroller method.

// -Get div objects, set initial positions, start up down animation

// ——————————————————————-






//set width of inner DIVs to outer DIV’s width minus padding (padding assumed to be top padding x 2)*2)+”px”

this.getinline(this.visiblediv, this.hiddendiv)”visible”

var scrollerinstance=this



if (window.attachEvent) //Clean up loose references in IE

window.attachEvent(“onunload”, function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})

setTimeout(function(){scrollerinstance.animateup()}, this.delay)


// ——————————————————————-

// animateup()- Move the two inner divs of the scroller up and in sync

// ——————————————————————-


var scrollerinstance=this

if (parseInt(>(this.visibledivtop+5)){”px””px”

setTimeout(function(){scrollerinstance.animateup()}, 50)



this.getinline(this.hiddendiv, this.visiblediv)


setTimeout(function(){scrollerinstance.setmessage()}, this.delay)



// ——————————————————————-

// swapdivs()- Swap between which is the visible and which is the hidden div

// ——————————————————————-


var tempcontainer=this.visiblediv




pausescroller.prototype.getinline=function(div1, div2){”px”, div1.offsetHeight)+”px”


// ——————————————————————-

// setmessage()- Populate the hidden div with the next message before it’s visible

// ——————————————————————-


var scrollerinstance=this

if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)

setTimeout(function(){scrollerinstance.setmessage()}, 100)


var i=this.hiddendivpointer

var ceiling=this.content.length

this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1





pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any

if (tickerobj.currentStyle)

return tickerobj.currentStyle[“paddingTop”]

else if (window.getComputedStyle) //if DOM2

return window.getComputedStyle(tickerobj, “”).getPropertyValue(“padding-top”)


return 0



<script type=”text/javascript”>

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

new pausescroller(pauseconte
nt, “pscroller1”, “someclass”, 5000)


About Emi

Emi atau nama sebenar Mohamad Zulhelmi berasal dari Sitiawan, Perak dan sekarang menetap di Shah Alam. Seorang programmer di sebuah organisasi yang terpaksa di rahsiakan atas sebab-sebab keselamatan. Mula aktif berblog pada akhir tahun 2008.

Leave a Reply

Your email address will not be published. Required fields are marked *