jquery.LCRscrollingText.js

/**
 * LCRscrollingText jquery plugin
 * @description Left Center Right, with center vertical scrolling text using a ul
 * @author Jim Kinsman | Paul Kulp | InterVarsity Christian Fellowship (intervarsity.org)
 * @version 1.1.0
 * @example
 * JAVASCRIPT: 
 * With html already defined:
 *
 * $('#scrolling_text_container').LCRscrollingText();
 * 
 * With only container div defined:
 * $('#scrolling_text_container2').LCRscrollingText({
 		left:'How to ', 
 		center_words: ['study', 'read', 'learn', 'explore', 'live'], 
 		right: ' the Bible?'
 	});
 *
 * Another example of what worked:
   jQuery('#scrolling_text_container').LCRscrollingText({
       baseTopMargin: '-5px', 
       doNotStart: false, 
       inlineCSS: true, 
       addCSStoUL: {'line-height': '1.5em'}, 
       addCSS: {'line-height': 'normal', position:'absolute', top: '100px', color: 'white'} 
   });
 * HTML:
 *
 *	<div id="scrolling_text_container">
 *		<div class="left">How to&nbsp;</div>
 *		<div class="center">	
 *			<ul>
 *				<li>study</li>
 *				<li>read</li>
 *				<li>learn</li>
 *				<li>explore</li>
 *				<li>live</li>
 *			</ul>
 *		</div>
 *		<div class="right">&nbsp;the Bible?
 *		</div>
 *	</div>
 *
 * CSS:
 * <style>
	div.LCRscrollingText {
		width: 100%;
		padding: 0;
		vertical-align: top;
	}
	div.LCRscrollingText div {
		margin: 0;
		margin-right: 0;
		background-color: white;
		display: inline-block;

		font-size: 300%;
		height: 1.2em;
		overflow-y: hidden;
	}
	div.LCRscrollingText div.center {
		text-align: center;

		padding:0;
	}	

	div.LCRscrollingText div.center ul {
		position:relative;
	}	

	div.LCRscrollingText div.right {
		width: auto;
		text-align: left;
	}

	div.LCRscrollingText div.left {
		width: auto;
		text-align: right;
	}

	div.LCRscrollingText ul {
		list-style: none outside none;
		margin:0;
		padding-left: 0;
	}
 * </style>
 */
(function ($) {

	jQuery.fn.LCRscrollingText = function(opts){
		var self = this;
		
		if ($(self).length == 0){
			console.log('LCRscrollingText: Does not exist, exiting...');
			return $(self);
		}

		var skip_ahead_and_start = false;
		var skip_ahead_and_stop = false;

		if (typeof(opts) == 'string'){
			if (opts == 'start'){
				skip_ahead_and_start = true;
				opts = {startImmediately: true};
				$(self).data('stop', false);
				//we will skip ahead the initialization options and just start the scrolling if the user did something like 
				// $('#scrolling_container').LCRscrollingText('start');
			}else if (opts == 'stop'){
				skip_ahead_and_stop = true;
				opts = {startImmediately: false, startOnPageLoad: false};
				$(self).data('stop', true);
			}
		}

		opts = opts || {};
		opts.timeMove = opts.timeMove || 1500;
		opts.transition = opts.transition || "swing";

		if (!skip_ahead_and_start && !skip_ahead_and_stop){
			opts.doNotStart = opts.doNotStart || false;

			opts.startImmediately = opts.startImmediately || false;
			opts.startOnPageLoad = opts.startOnPageLoad || true;

			//the base top margin to use (since for some reason we need to move it up 18 pixels)
			opts.baseTopMargin = opts.baseTopMargin || 0;

			if (opts.doNotStart){
				opts.startImmediately = false;
				opts.startOnPageLoad = false;
			}

			var left_exists = true;
			var center_exists = true;
			var right_exists = true;

			if ($(self).find('div.left').length == 0){
				//console.log('jquery.fn.LCRscrollingText: No div.left elements found.');
				left_exists = false;
			}
			if ($(self).find('div.center').length == 0){
				//console.log('jquery.fn.LCRscrollingText: No div.center elements found.');
				center_exists = false;
			}
			if ($(self).find('div.right').length == 0){
				//console.log('jquery.fn.LCRscrollingText: No div.right elements found.');
				right_exists = false;
			}

			if (!left_exists && !center_exists && !right_exists){
				if (opts.left && ( $.isArray(opts.center_words) || opts.center_html ) && opts.right){
					$(self).append($('<div>').addClass('left').html(opts.left));
					if (opts.center_html){
						$(self).append($('<div>').addClass('center').html(opts.center_html));
					}else{
						var $ul =$('<ul>');
						for (var i = 0; i < opts.center_words.length; ++i){
							$ul.append( $('<li>').html(opts.center_words[i]) );
						}
						$(self).append($('<div>').addClass('center').append($ul));
					}
					$(self).append($('<div>').addClass('right').html(opts.right));
				}else{
					console.log('jquery.fn.LCRscrollingText: No opts.left, opts.center, opts.right information, cannot proceed.')
					return $(self);
				}
			}

			//For CSS class haters, you can use this option to make all inline styles
			if (opts.inlineCSS){
				$(self).css({
				    width: '100%',
					padding: 0,
					'vertical-align': 'top'
				});

				//all divs
				$(self).find('div').css({
					margin: 0,
					'margin-right': 0,
					/*'background-color': 'white',*/
					display: 'inline-block',

					'font-size': '300%',
					'height': '1.2em',
					'overflow-y': 'hidden'
				});

				$(self).find('div.center').css({
					'text-align': 'center',
					 padding:0
				});

				$(self).find('div.center ul').css({
					position:'relative'
				});

				$(self).find('div.right').css({
					 width: 'auto',
					'text-align': 'left'
				});

				$(self).find('div.left').css({
					 width: 'auto',
					'text-align': 'right'
				});

				$(self).find('ul').css({
					'list-style': 'none outside none',
					 margin:0,
					 'margin-top': opts.baseTopMargin,
					'padding-left': 0
				});
			}

			$(self).addClass('LCRscrollingText');

			//custom CSS to add to the container div
			if (opts.addCSS){
				$(self).css(opts.addCSS);
			}

			//custom CSS to add to the UL
			if (opts.addCSStoUL){
				$(self).find('div.center ul').css(opts.addCSStoUL);
			}
		}//end if not skip_ahead and start

		var current;
		
		//attempt to use data current from this tag first
		if ($(self).data('current')){
			current = $(self).data('current');
		}else{
			//otherwise just use first li from .center
			current = $(self).find('div.center ul li').first();
		}

		function advance() {
			if ($(self).data('stop') !== true){
				current = current.next();
				
				$(self).data('current', current);
				
				if (current.size() == 0) {
					//console.log('DEBUG: no more current');
					
					current = $(self).find('div.center ul li').first();
					$(self).find('.center ul').css("margin-top", opts.baseTopMargin);
					setTimeout(advance, 0);
					return;
				}
			
				//console.log('DEBUG: moving to next li');
				var cleanBaseTopMargin = parseInt(opts.baseTopMargin);
				var nextpos = (-1 * current.position().top) + cleanBaseTopMargin;
				$(self).find(".center ul" ).animate({ "margin-top": nextpos}, 
					opts.timeMove, opts.transition, advance
				);
			}else{
				//we are stopping all advancing
				//console.log('DEBUG: stopped and ignoring advance.');
				//keep calling this function to poll for the next time we 'start'
				setTimeout(advance, opts.timeMove); 
			}
		}

		if (opts.startOnPageLoad){
			$(self).data('stop', false);
			$(function() {
				advance();
			});
		}else if (opts.startImmediately){
			$(self).data('stop', false);
			advance();
		}

		return $(self); //allow object chaining
	}

})(jQuery);