Awesome Scrolling News Ticker

Hello Bloggers In Last Post I Published A New Way To Highlight Author Comments but today i am giving you an awesome scrolling news ticker which is very light and fully responsive! which means that it is compatible for both desktop users as well as mobile users.This widget works on a simple Javascript which simply scrolls the link with the given time interval.Also I've added beautiful hover effects with transition effects which will definitely attract your visitors and let them click on the links! So lets start adding this awesome widget in the blog-

 

Adding Awesome Scrolling News Ticker-

1- Go To Blogger Dashboard

2- Go To Layout >> Add A Gadget >> HTML/JAVASCRIPT

3- Paste This Magical Code In It With Customization's-

<!--Ngtechzone Scroller Starts-->

<style type="text/css">

#ngtechzone-scroller{ 

background:url(http://myfilezone.96.lt/uploads/agt_announcements.png) no-repeat top left; 

width: auto; 

height: 26px; 

border: 1px dashed #008E00; 

padding: 3px 3px 3px 40px; 

margin:10px 0; 

}

#ngtechzone-scroller a{ 

text-decoration: none; 

color:#008E00; 

font-size: 120% ;

}

#ngtechzone-scroller a:hover{ 

text-decoration: bold;

color:black; 

font-size: 125% ;

}

#ngtechzone-scroller a { transition: 0.5s; }

.someclass{ 

}

</style>

<script type="text/javascript">

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

var pausecontent2=new Array() 

pausecontent2[0]='<a href="#">HEADLINE TEXT</a>' 

pausecontent2[1]='<a href="#">HEADLINE TEXT</a>' 

pausecontent2[2]='<a href="#">HEADLINE TEXT</a>' 

pausecontent2[3]='<a href="#">HEADLINE TEXT</a>'

pausecontent2[4]='<a href="#">HEADLINE TEXT</a>'

pausecontent2[5]='<a href="http://ngtechzone.blogspot.com/2015/07/awesome-scrolling-news-ticker.html">+ Create This</a>'
</script>

<script type="text/javascript"> 

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 class="innerDiv" 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(pausecontent2, "ngtechzone-scroller", "someclass", 2000)

</script>

<!--Ngtechzone Scroller Ends-->

Customization's-

1-To Change The Icon Replace http://myfilezone.96.lt/uploads/agt_announcements.png with your icon url.
2- To Change Width Of News Ticker Change width: auto; .
3- Replace HEADLINE TEXT with anything you wish to write as announcement or updates. Write any text description you want.
4-Replace # with the link url.
5- To Change Link Color Replace #008E00; with your color code.
6- To Change Scroll Speed Replace 2000 with your choice.For More Speed Less Value And For Less Speed More Value.

Note- To Add More Headings Add pausecontent2[no.]='<a href="#">HEADLINE TEXT</a>' Code Again With the customization stated above And Don't Forget To Change no.  with next numerical value.

FROM THE AUTHOR:
Hope you liked this widget and share it with your comments and Share your feedback's through comments. Have A Good Day :)