Creating news ticker/text slider in web pages
The simpleTicker.js is a jQuery based simple plug-in for creating the ticker or text sliding with different patterns.
The supported patterns are fade, roll, and slide which you may set by using the JavaScript options.
Developer’s page Download plug-in
Setting up the jquery.simpleTicker.js plugin
All you need is to get the jquery.simpleTicker.js file from the downloaded package and include its reference with the jQuery library.
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=”js/simpleTicker/jquery.simpleTicker.js”></script>
The markup is pretty simple:
<div id="news-ticker-fade-demo" class="ticker"> <ul> <li>The new version of jQuery is going to release on ....</li> </div>
Where the ID is referred for initiating the plug-in and the ticker class contains the style of the div containing the sliding text or ticker.
Initiate the plug-in:
$.simpleTicker($(“#news-ticker-fade-demo”),{‘effectType’:’fade’});
See the demos below with different values for effect type and other options.
A demo of fade effect ticker
By using the effectType option in jQuery code, you may specify the pattern of the ticker. In this demo, the fade value is used while you may also set the speed or delay, etc.
See online demo and code
The markup:
<h2>fade pattern</h2> <div id="news-ticker-fade-demo" class="ticker"> <ul> <li>The new version of jQuery is going to release on ....</li> <li>Bootstrap has become the most popular framework</li> <li>New features are added in Bootstrap</li> <li>Stay tuned for PHP updates</li> <li>New features are added</li> </ul> </div><!--/#ticker -->
The jQuery:
$.simpleTicker($("#news-ticker-fade-demo"),{'effectType':'fade'});
The CSS for styling the div:
<style>
div.ticker{
margin:10px auto;
background: linear-gradient(360deg, #5E005E, #306161);
color:#fff;
font-size:18px;
}
div.ticker ul{
margin:auto;
}
</style>
A demo of roll effect with speed option
The roll option is set for the ticker along with the delay. If you have long text for a news item then this option can be useful. It will pause the current item with the specified time. For this demo, I have used 2 seconds i.e. 2000 milliseconds.
The jQuery code:
<script>
$(function(){
$.simpleTicker($("#news-ticker-roll-demo"),{
delay : 2000,
effectType : 'roll'
});
});
</script>
Complete code for this example
<!DOCTYPE html>
<html>
<head>
<link href="css/simpleTicker/jquery.simpleTicker.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/simpleTicker/jquery.simpleTicker.js"></script>
<script>
$(function(){
$.simpleTicker($("#news-ticker-roll-demo"),{
delay : 2000,
effectType : 'roll'
});
});
</script>
<style>
div.ticker{
margin:10px auto;
background: linear-gradient(45deg, #5E005E, #306161);
color:#fff;
font-size:18px;
}
div.ticker ul{
margin:auto;
}
</style>
</head>
<body>
<h2>A demo of roll pattern</h2>
<div id="news-ticker-roll-demo" class="ticker">
<ul>
<li>The new version of jQuery is going to release on ....</li>
<li>Bootstrap has become the most popular framework</li>
<li>New features are added in Bootstrap</li>
<li>Stay tuned for PHP updates</li>
<li>New features are added</li>
</ul>
</div><!--/#ticker -->
</body>
</html>
An example of sliding text with speed and delay
You may create the news ticker or text slider by using the slide value for the effectType option. See this example where I used the delay and speed as well:
The script:
<script>
$(function(){
$.simpleTicker($("#news-ticker-slide-demo"),{
delay : 2500,
effectType : 'slide',
speed : 1500
});
});
</script>
For learning more about this simple yet useful plug-in, visit the developer’s page (removed).
Note: You may get the JS file of plug-in from the first demo (view-source and download in your system)