News Ticker V1

Custom News Ticker Plugin generation

by LyndseyB

HTML

<ul id="lb-newsticker">
    <li><a href="#"> This is a news item... </a></li>    
    <li><a href="#"> This is the second news item... </a></li>   
    <li><a href="#"> This is the third news item... </a></li>   
    <li><a href="#"> This is the fourth news item... </a></li>    
    <li><a href="#"> This is the fifth news item... </a></li>    
</ul>

CSS

body,html,ul, li { margin:0; padding:0; }
ul, li { list-style:none; }

.lb-newsticker-wrap { background:#eee; width:80%; margin:20px auto; }

.lb-newsticker-title { font-weight:bold; color:#1a1a1a; }

JavaScript

(function( $ ) {
  $.fn.lbNewsticker = function( options ) {
  
    //default settings
    var settings = {      
      newsTitle : 'Recent News', 
      animation: 'fade', //default: fade. Available: fade, slideDown, random
      animationSpeed: 'slow', //ms, slow, fast
      maxChars : 200,
      pause: 3000, //milliseconds. Any less than 2000 renders items unreadable, thus default will be used.
      randomise: false, //options: true or false
      maxItems : 5 //used in conjuction with randomise
    };
      
    //define options      
    var options = $.extend(settings, options);
    //counter keeps track of the list items we're displaying
    var counter = 0;
    //variable to stop randomisation repeating
    var tempVar = -1;
    var masterElement = this;
      
    //first check that the element passed is a valid DOM element
    if ( this.length === 0) {
        alert('DOM Element not found. Please ensure you are referencing the correct element, either by ID(#element) or Class(.element)');
        return false;
    } 
      
    //DOM element exists, create variables.
    var lbMaster = this.selector;     
    var lbEltype = this[0].nodeName;
    
    //ensure that a valid list element has been passed
    if(lbEltype != 'UL' && lbEltype != 'OL') {
        alert('The selected element <'+lbEltype.toLowerCase()+'> cannot be used for this plugin. Please use elements of type <ul> or <ol> only!');
        return false;
    }       
    
    var listEl = $(lbMaster).find('li');      
    //if list count is 0, don't continue!
    if(listEl.length === 0) {
          alert('You haven\'t added any news items to your list!');
          return false;
     }; 
      
     if(options.animation) {
         var animationType = options.animation; 
     } else {
         var animationType = 'fade';
     }

      //element is valid, begin newsticker
      return this.each(function(index) {
        //create the html that contains the newsticker
        generateHTML(this);

 ...