LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Sliders / HTML-CSS-PHP-JavaScript / JavaScript Codes / Website / Website Sliders » Awesome JavaScript News Slider Widget For Blog And Website

Awesome JavaScript News Slider Widget For Blog And Website

Awesome JavaScript Latest News Slider Widget For Blog And Website

This is not only a Latest News Slider but you can use it as Text Slider And Testimonial Slider Also

Many people want News slider for there website and blog to show there visitor that what they are going to do. For this purpose they want text box but if they have more then one news there is a big problem to them how to manage them all without wasting extra space from there site and blog.So i am here with a new article and an awesome JavaScript  code so that you can usre this on your site or blog, it is easy to install and quick to load so that visitor can see what is the latest news you have.
Now it is also called JavaScript Text Slider. You cancustomize the fill code easily through the given step, The news will scroll up one by one after the time which you will give to him, News box container also with your CSS, In this slider you can also add author name with there caption.Text style, size color, format, font any thing you can easily customize, If you don’t know How To Customize Feel Free To Ask.I Will Help You.

One more thing before proceeding further that this code is originally given by  © Dynamic Drive (www.dynamicdrive.com) I Just Up-Date It With Some Extra Codes.

Features:
1.) Unlimited Latest News.
2.) An Awesome Effect Of Scrolling Up.
3.) Simple Customizable Box Container.
4.) Quick To Load And Easy To Install.
5.) With Write Name And Caption Space.
6.) No External J-Query File.
7.) Read Full News Link Also.

Recommended For You:
10 Useful Tools That Help You to Find Domain Names

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

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

Customization:
1.) Change Width And Height According To Your Desire.
2.) Change “News Heading” With Your News Heading.
3.) Change “Your Latest News…!!!” With Your Your Latest News.
4.) Change “##########” With Your Full News Link.
5.) Also Change Yellow Highlighted Value With Your Desire Value.(Pausing Time Between News)
6.) If You Want More Customization, Feel Free To Ask.
7) Save And Enjoy.

Recommended For You:
How To Prevent CSS And Content Caching To Browsers?

You Like It, Please Share This Recipe With Your Friends Using...

15 Responses to “Awesome JavaScript News Slider Widget For Blog And Website”

  1. George Sin says:

    Does it slow down the speed of the website ?

    • EXEIdeas says:

      I Am Not Sure But Not, Because It Did Not Contain Any External Link. This Is Simple JavaScript Code Instead For J-Query.

  2. Great! Just added on my site!!! Thanksssss 🙂

  3. Samuel A. Ajayi says:

    Hello, pls help! I added the codes on my blog @ http://www.lifemeditation.org but it did not take effect. What could be wrong?

  4. Anonymous says:

    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

  5. EXEIdeas says:

    You Are Welcome…

  6. Web Design says:

    Awesome java script news…

    Thanks for Sharing !!

  7. Mohit Gupta says:

    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..?

  8. Mohit Gupta says:

    It Works man thankss…

Leave a Reply to Mohit Gupta Cancel reply

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