Awesome JavaScript News Slider Widget

Today’s featured Blogger widget comes from Muhammad Hassan and it’s a News Slider that runs on JavaScript. What it does is it displays a set of texts which scrolls upwards revealing another set of texts, kind of like a news ticker that behaves more like a chat box.
Check out the DEMO.
Of course you can also use this widget for other functions like a testimonial slider, a recent or popular posts slider, and whatever it is that you can come up with that involves text. It loads quickly and is easy to customize too.
Here’s how you can install it in your Blogger blog.

1. On your Blogger dashboard go to Design then Layout.
2. Click on any ‘Add a Gadget’ placeholder where you want the news slider to appear.
3. Scroll down to the list of gadgets and choose ‘HTML/JavaScript’ by clicking on it.
4. Copy and then paste the code below into the ‘Content’ field (you may leave the ‘Title’ field blank):

<style type="text/css">

#pscroller1{

width: 300px;

height: 80px;

border: 1px solid black;

padding: 5px;

background-color: #efefef;

}

#pscroller2{

width: 350px;

height: 20px;

border: 1px solid black;

padding: 3px;

}

#pscroller2 a{

text-decoration: none;

}

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

}

EXETESTIMONIALS {font-size: 20px; font-style: oblique;}

</style>

<script type="text/javascript">

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

var pausecontent=new Array()

pausecontent[0]='<EXETESTIMONIALS>News 

Heading:</EXETESTIMONIALS></br><i>Your Latest 

News...!!!</i></br></br><center align="right"><a href="newsURL">Read More</a></center>'

pausecontent[1]=' <EXETESTIMONIALS>News 

Heading:</EXETESTIMONIALS></br><i>Your Latest 

News...!!!</i></br></br><center align="right"><a href="newsURL">Read More</a></center> '

pausecontent[2]=' <EXETESTIMONIALS>News 

Heading:</EXETESTIMONIALS></br><i>Your Latest 

News...!!!</i></br></br><center align="right"><a href="newsURL">Read More</a></center> '

</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+'" class="'+divClass+'" style="position: relative; 

overflow: hidden"><div style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div 

class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+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", 3000)

document.write("<br />")

new pausescroller(pausecontent2, "pscroller2", "someclass", 3000)

</script>

5. Before hitting the ‘Save’ button, be sure to make the necessary changes to the following values:

• “News Heading”
• “Your Latest News…!!!”
• “newsURL”

6. Other optional changes to the widget you might want to consider are its:

• Size
  • width – currently set at ‘300px’
  • height – currently set at ‘80px’
  • Pause time – currently set at ‘3000’ (3 seconds)

1. Hit ‘Save’ and check the result by clicking on the ‘View blog’ or the ‘Preview’ button.

And you’re done. Hope you have fun with your new Blogger widget!