Scoller Text [JavaScript]

Tuesday, May 26, 2009
Posted by EmI

Example tengok seperti Announcement sebelah

Code:

<style type="text/css">


/*Example CSS for the two demo scrollers*/


#pscroller1{

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

}


</style>


<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="http://helmi87.blogspot.com/2009/02/freelancer-web-programmer.html">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="http://e43d044d.linkbucks.com">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>


<script type="text/javascript">


/***********************************************

* Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ 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

// -------------------------------------------------------------------


pausescroller.prototype.initialize=function(){

this.tickerdiv=document.getElementById(this.tickerid)

this.visiblediv=document.getElementById(this.tickerid+"1")

this.hiddendiv=document.getElementById(this.tickerid+"2")

this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))

//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)

this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"

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

this.hiddendiv.style.visibility="visible"

var scrollerinstance=this

document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}

document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}

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

// -------------------------------------------------------------------


pausescroller.prototype.animateup=function(){

var scrollerinstance=this

if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){

this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"

this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"

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

}

else{

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

this.swapdivs()

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

}

}


// -------------------------------------------------------------------

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

// -------------------------------------------------------------------


pausescroller.prototype.swapdivs=function(){

var tempcontainer=this.visiblediv

this.visiblediv=this.hiddendiv

this.hiddendiv=tempcontainer

}


pausescroller.prototype.getinline=function(div1, div2){

div1.style.top=this.visibledivtop+"px"

div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"

}


// -------------------------------------------------------------------

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

// -------------------------------------------------------------------


pausescroller.prototype.setmessage=function(){

var scrollerinstance=this

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

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

else{

var i=this.hiddendivpointer

var ceiling=this.content.length

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

this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]

this.animateup()

}

}


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

else

return 0

}


</script>


<script type="text/javascript">


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


new pausescroller(pausecontent, "pscroller1", "someclass", 5000)


</script>

Labels:

5 comments:

joegrimjow said...

lame ku cari
hekhek
gud2

-WaN- said...

bagus2..
boleh guna utk gmbar tak??

EmI said...

juz try then give feedback k...

CONNIE said...

da try! thnks! boleh je rs nye nk letak gmbr. tp ta try.

tp kan, aku try, cm bold kn tulisan. pastu tak kua. mmg tak boleh eh?takkn la takboleh.

EmI said...

Aku dah try, blod x der masalah. Ko check lik pastikan ade penutup bold dia.
Jika still ade masalah bg aku coding yang ko dah tukar 2