Skip to content

Instantly share code, notes, and snippets.

@zachdunn
Created February 12, 2011 03:28
Show Gist options
  • Save zachdunn/823468 to your computer and use it in GitHub Desktop.
Save zachdunn/823468 to your computer and use it in GitHub Desktop.
jQuery plugin for an automated vertical ticker
/*
Vertical Ticker Plugin
Copyright (c) 2011 Zach Dunn / www.onemightyroar.com
Released under MIT License
--------------------------
Structure based on Doug Neiner's jQuery plugin blueprint: http://starter.pixelgraphics.us/
*/
(function( $ ){
if(!$.omr){
$.omr = new Object();
};
$.omr.verticalticker = function(el, options ) {
var base = this;
//Define the DOM elements
base.el = el;
base.$el = $(el);
// Add a reverse reference to the DOM object
base.$el.data("omr.verticalticker", base);
base.init = function(){
base.options = $.extend({},$.omr.verticalticker.defaultOptions, options);
//Define the ticker object
base.ticker;
//Adjust the height of ticker if specified
base.format_ticker();
//Setup navigation links (if specified)
base.setup_nav();
//Start the ticker
base.start_interval();
//Debugging info in console
//base.debug_info();
};
base.start_interval = function(){
//Clear out any existing interval
clearInterval(base.ticker);
base.ticker = setInterval(function() {
base.$el.find('li:first').animate({
marginTop: '-' + base.options.row_height,
}, base.options.speed, function() {
$(this).detach().css('marginTop', '0').appendTo(base.$el);
});
}, base.options.interval);
}
base.reset_interval = function(){
clearInterval(base.ticker);
base.start_interval();
}
base.stop_interval = function(){
clearInterval(base.ticker);
}
base.format_ticker = function(){
if(typeof(base.options.max_items) != "undefined" && base.options.max_items != null) {
//Remove units of measurement (Should expand to cover EM and % later)
var stripped_height = base.options.row_height.replace(/px/i, '');
var ticker_height = stripped_height * base.options.max_items;
base.$el.css({
height : ticker_height + 'px',
overflow : 'hidden',
});
}else{
//No heights were specified, so just doublecheck overflow = hidden
base.$el.css({
overflow : 'hidden',
})
}
}
base.setup_nav = function(){
//Stop Button
if (typeof(base.options.stop) != "undefined" && base.options.stop != null){
$(base.options.stop).click(function(){
base.stop_interval();
return false;
});
}
//Start Button
if (typeof(base.options.start) != "undefined" && base.options.start != null){
$(base.options.start).click(function(){
base.start_interval();
return false;
});
}
//Previous Button
if (typeof(base.options.previous) != "undefined" && base.options.previous != null){
$(base.options.previous).click(function(){
base.$el.find('li:last').detach().prependTo(base.$el).css('marginTop', '-' + base.options.row_height);
base.$el.find('li:first').animate({
marginTop: '0px',
}, base.options.speed, function () {
base.reset_interval();
});
return false;
});
}
//Next Button
if (typeof(base.options.next) != "undefined" && base.options.next != null){
$(base.options.next).click(function(){
base.$el.find('li:first').animate({
marginTop: '-' + base.options.row_height,
}, base.options.speed, function() {
$(this).detach().css('marginTop', '0px').appendTo(base.$el);
base.reset_interval();
});
return false;
});
}
}
base.debug_info = function()
{
//Dump options into console
console.log(base.options);
}
//Make it go!
base.init();
};
$.omr.verticalticker.defaultOptions = {
message : 'Ticker Loaded', /* Disregard */
next : null, /* ID of next button or link */
previous : null, /* ID of previous button or link */
stop : null, /* ID of stop button or link */
start : null, /* ID of start button or link */
row_height : '100px', /* Height of each ticker row in PX. Should be uniform. */
speed : 800, /* Speed of transition animation in milliseconds */
interval : 4000, /* Time between change in milliseconds */
max_items : null, /* Integer for how many items to display at once. Resizes height accordingly (OPTIONAL) */
};
$.fn.verticalticker = function( options ){
return this.each(function(){
(new $.omr.verticalticker(this, options));
});
};
})( jQuery );
@zachdunn
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment