Below are examples of different methods that can be used with the web ticker.
The Markup Used for Initializing the Web Ticker
<ul id="webticker-update-example" >
<li data-update="item1">WebTicker v3.0.0 has just been released! Read the new documentation.</li>
<li data-update="item2">WebTicker v3.0.0 now has commercial licenses available. Check which license is applicable for you.</li>
</ul>
The first ticker is running the default options with an exception to the height, which is being set to 75px.
$("#webticker-update-example").webTicker({
height:'75px'
});
The update method is called using the below trigger.
$("#update-newsticker1").click(function(){
$("#webticker-update-example").webTicker('update',
'<li data-update="item1">Web Ticker v3.0.0 has just been released! And the documentation has become even better!</li>
<li data-update="item2">The Web Ticker v3.0.0 commercial license no longer binds you to make your projects open source.</li>
<li data-update="item3">An OEM License is also available if your would like to make the WebTicker part of your website builder</li>
<li data-update="item4">Maze Digital will now be commercially supporting the Web Ticker</li>',
'swap',
true,
false
);
});
The second ticker is using some of the available options; such as having hover-pause disabled, transition set to ‘ease’ and ‘duplicate’ set to true.
$("#webticker-stop-continue-example").webTicker({
height:'75px',
duplicate:true,
rssfrequency:0,
startEmpty:false,
hoverpause:false,
transition: "ease"
});
The stop method is called using:
$("#stop-newsticker2").click(function(){
$("#webticker-stop-continue-example").webTicker('stop');
});
The continue method is called using:
$("#continue-newsticker2").click(function(){
$("#webticker-stop-continue-example").webTicker('cont');
});
The ease transition method is called using:
$("#ease-financeticker").click(function(){
$("#webticker-transition-ease").webTicker('transition', 'ease');
});
The linear transition method is called using:
$("#linear-financeticker").click(function(){
$("#webticker-transition-ease").webTicker('transition', 'linear');
});
<ul id="right-to-left-webticker" dir="ltr">
<li data-update="item1"> وقد تم الافراج عن عادل WebTicker 3.0.0! الرخص التجارية المتاحة.</li>
<li data-update="item2"> WebTicker 3.0.0 עתה שוחרר! רישיונות מסחריים זמינים.</li>
</ul>
The ticker can be set to scroll from left to right using the following initializing settings.
$("#right-to-left-webticker").webTicker({
height:'75px',
direction: 'right'
});
The fifth ticker includes images instead of plain text.
<div class="ticker-wrapper">
<ul id="images-webticker">
<li>
<img style='width:200px; height: 150px;' src="img/MER_800_600.jpg"/>
</li>
</ul>
</div>
Rss Feeds are automatically supported by the ticker; note that as per javascript cross-domain restrictions you can only load RSS feeds from your own website.
$("#webticker").webTicker({
rssurl:'http://maze.digital/rss/',
rssfrequency:5
});