News Ticker

News Ticker

by mrjordy

HTML

<div class="ticker pure-g-r">
                    <div class="pure-u-3-4">
                        <ul class="lines">
   <li>News Item - Lorem ipsum dolor sit amet,asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf  consectetuerasdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf  adipiscing elit.</li>
   <li>News Item - Aliquam tincidunt mauris eu risus.</li>
   <li>News Item - Vestibulum auctor dapibus neque.</li>
                        </ul>
                    </div>
                </div>

CSS

.ticker {
  margin: 15% auto;
  background-color: yellow;
  line-height: 18px;
  color: yellow;
  box-shadow: 0 10px 18px -11px #555;
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  line-height: 1.4;
  text-align:center;
}

@media (min-width: 980px) {
  .ticker {
    width: 980px;
  }
}
.ticker .prefix {
  margin: 5px;
  padding: 10px;
}
@media (min-width: 980px) {
  .ticker .prefix {
    margin-right: 0;
    height: 40px;
  }
}

.ticker .lines {
 
  margin: 0px;
  padding: 10px;
  background-color: darkblue;
}


.ticker .lines li {
  list-style: none;
  line-height: 20px;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 0px;
}

JavaScript

(function($){
  $.fn.list_ticker = function(options){
    
    var defaults = {
      speed:1000,
	  effect:'slide',
	  run_once:false,
	  random:false
    };
    
    var options = $.extend(defaults, options);
    
    return this.each(function(){
      
      var obj = $(this);
      var list = obj.children();
      var count = list.length - 1;

      list.not(':first').hide();
      
      var interval = setInterval(function(){
        
        list = obj.children();
        list.not(':first').hide();
        
        var first_li = list.eq(0)
		var second_li = options.random ? list.eq(Math.floor(Math.random()*list.length)) : list.eq(1)
		
		if(first_li.get(0) === second_li.get(0) && options.random){
			second_li = list.eq(Math.floor(Math.random()*list.length));
		}
			first_li.fadeOut(function(){
				obj.css('height',second_li.height());
				second_li.fadeIn(0);
				first_li.remove().appendTo(obj);
			});
		
		count--;
		
		if(count == 0 && options.run_once){
			clearInterval(interval);
		}
		
      }, 3000)
    });
  };
})(jQuery);


$('.lines').list_ticker({
    speed: 3000,
    effect: "slide"
});