Live Chat

Our Blogs

Our every actions and thoughts.


Warning: Undefined variable $title in /var/www/vhosts/hostspacer.com/httpdocs/pages/blogs/index.php on line 13

media

News Ticker JQuery Plugin

June 3, 2020, 08:07 AM
/* * NewsTicker Plugin v1.0. * Copyright(c) 2009 Host Spacer Pvt. Ltd. * Contact us at info@hostspacer.com * Author: Shivasis Biswal (Krushna) * Usage: * $(document).ready(function(){ * $('#ticker').newsticker(); * }); * */ ;(function ($) { $.fn.newsticker = function (opts) { let settings = $.extend({}, $.fn.newsticker.defaults, opts); return this.each(function () { let ths = $(this); let news = []; let i = -1; let timeout; let buttons = ['btnplay', 'btnpause', 'btnprev', 'btnnext']; function create() { $(ths).hide(); let styles = ''; let controls = '
'+ '❮'+ '⏸'+ ''+ '❯'+ '
'; let container = '
'+ '
'+ '
'+ '
'; $('head').append(styles); $(container).insertAfter(ths); if(settings.button){ $('#ticker_container').append(controls); } if(settings.place == "right"){ $('#controls').css({ float: 'left' }); $('#newscontent').css({ float: 'right' }); } else { $('#controls').css({ float: 'right' }); $('#newscontent').css({ float: 'left' }); } $(ths).children().each(function (el) { news[el] = $(this).html(); }); wrapperWidth = $('#newscontent').width(); contentWidth = $('#news').width(); fading(); } function fading() { if (i == news.length - 1) { i = 0 } else { i++; } if (settings.type == "fade") { $("#news").fadeOut(settings.fade_speed, function () { $("#newscontent").html('
' + news[i] + "
"); $("#news").fadeIn(settings.fade_speed) }); } timeout = setTimeout(fading, settings.duration); } create(); let pause = settings.pause; $('#controls .icon').each(function(){ if(settings.color){ $(this).css({ color: settings.color }); } if(settings.hovercolor){ $(this).hover(function(){ $(this).css({ color: settings.hovercolor }); }, function(){ $(this).css({ color: settings.color }); }); } }); // buttons action $("#" + buttons[0]).click(function (e) { e.preventDefault(); fading(); $(this).hide(); $("#" + buttons[1]).show(); return false; }); $("#" + buttons[1]).click(function (e) { e.preventDefault(); clearTimeout(timeout); $(this).hide(); $("#" + buttons[0]).show(); return false; }); $("#" + buttons[2]).click(function () { if (i == 0) { i = news.length - 1 } else { i--; } $("#newscontent").html('
' + news[i] + "
"); if(settings.auto_play){ let newtimeout = 10000; clearTimeout(timeout); setTimeout(function(){ $("#" + buttons[0]).trigger("click"); }, newtimeout); } if (settings.auto_stop){ $("#" + buttons[1]).trigger("click"); return false; } }); $("#" + buttons[3]).click(function () { if (i == news.length - 1) { i = 0 } else { i++; } $("#newscontent").html('
' + news[i] + "
"); if(settings.auto_play){ let newtimeout = 10000; clearTimeout(timeout); setTimeout(function(){ $("#" + buttons[0]).trigger("click"); }, newtimeout); } if (settings.auto_stop){ $("#" + buttons[1]).trigger("click"); return false; } }); $(document).on("mouseover", '#news', function(){ if(pause){ $("#" + buttons[1]).trigger("click"); return false; } }); $(document).on("mouseout", '#news', function(){ $("#" + buttons[0]).trigger("click"); return false; }); }); }; $.fn.newsticker.defaults = { fade_speed: 500, duration: 3000, auto_play: true, auto_stop: true, type: "fade", pause: true, button: true, place: "left", color: "#999", hovercolor: "#333" }; })(jQuery);
#ticker_container { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; background: #FFFFFF; border: 1px solid #f00; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #newscontent {} #controls {} #news { color: #777; padding: 5px 10px; } .icon { margin-left:5px; padding: 3px; font-weight: bold; font-size: 16px; width: 24px; height: 24px; } .icon-pause:hover { background: #e3e3e3; } .icon-play:hover { background: #e3e3e3; } .icon-prev:hover { background: #e3e3e3; } .icon-next:hover { background: #e3e3e3; }

How to use?

Basic Use:

$(document).ready(funcion(){
     $('#ticker').newsticker();
});

Advanced Use:

Auto Play: true, false

The news ticker will run automatically from strart also after some time of any action on news ticker.

$(document).ready(funcion(){
     $('#ticker').newsticker({ auto_play: true});
});


Auto Stop: true, false 
$(document).ready(funcion(){
     $('#ticker').newsticker({ auto_stop: true});
});


Place: left, right

You can place the news leftside and rightside of buttons

$(document).ready(funcion(){
     $('#ticker').newsticker({ auto_play: true, auto_stop: true, place: 'left'});
});


Pause: true, false

On mouse over the news ticker will stop.

$(document).ready(funcion(){
     $('#ticker').newsticker({ auto_stop: true, place: 'left', pause: true});
});


button: true, false

True will show buttons and false will hide buttons.

$(document).ready(funcion(){
     $('#ticker').newsticker({ auto_stop: true, button:false});
});

HTML

News Ticker JQuery Plugin!

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • A quick brown fox jumps over the lazy dog.
  • Early to bed and early to rise make man healthy wealth and wise.
  • Failure is the pillar of success.
  • Coding is like poetry. Love it or leave it.