<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=”##########“>Read More</a></center>’
pausecontent[1]=’ <EXETESTIMONIALS>News Heading:</EXETESTIMONIALS></br><i>Your Latest News…!!!</i></br></br><center align=”right”><a href=”##########“>Read More</a></center> ‘
pausecontent[2]=’ <EXETESTIMONIALS>News Heading:</EXETESTIMONIALS></br><i>Your Latest News…!!!</i></br></br><center align=”right”><a href=”##########“>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 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(pausecontent, “pscroller1”, “someclass”, 3000)
document.write(“<br />”)
new pausescroller(pausecontent2, “pscroller2”, “someclass”, 3000)
</script>
Does it slow down the speed of the website ?
I Am Not Sure But Not, Because It Did Not Contain Any External Link. This Is Simple JavaScript Code Instead For J-Query.
Great! Just added on my site!!! Thanksssss 🙂
You Are Welcome…
Hello, pls help! I added the codes on my blog @ http://www.lifemeditation.org but it did not take effect. What could be wrong?
When I Visited On Your Site, There Is No Code There. Pleas Implant Again The Tell Me The Prob.
is there a way a feed link can be added to this plug in.
Whereby the feed will serve as a news ticker and will update automatically?
thanks
This Is A Simple Slider, You Have To Add Links Manually…
You Are Welcome…
Awesome java script news…
Thanks for Sharing !!
You Are Welcome…
neglect previous comment,it was wronglt posted in this article..can we coonect this thing to rss that will show recent posts in this manner..?
Use This Code, Just Change showitem:5′ To showitem:1′
Stylish J-Query Latest Post Widget For Blogger Or Blogspot
It Works man thankss…
You Are Welcome For Visiting Us…