Permalink
Browse files

Initial commit

Signed-off-by: Zach Dunn <zach@onemightyroar.com>
  • Loading branch information...
0 parents commit 8cd369781f7ebfcbb16ea31116b4a2888eb5b0f9 @zachdunn zachdunn committed Feb 12, 2011
Showing with 292 additions and 0 deletions.
  1. +20 −0 LICENSE.txt
  2. +32 −0 README.md
  3. +32 −0 css/style.css
  4. +43 −0 index.html
  5. +164 −0 js/jquery.totemticker.js
  6. +1 −0 js/jquery.totemticker.min.js
@@ -0,0 +1,20 @@
+Copyright (c) 2011 Zach Dunn, http://buildinternet.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,32 @@
+# Totem Ticker jQuery Plugin
+
+Totem is a jQuery plugin that turns lists into animated vertical tickers. It supports navigation and basic animation control.
+
+## Getting Started
+
+A sample ticker might look something like this.
+
+<code>$('#vertical-ticker').totemticker({
+ row_height : '100px',
+ next : '#ticker-next',
+ previous : '#ticker-previous',
+ stop : '#stop',
+ start : '#start',
+});</code>
+
+### Options
+
+The following options are available via the plugin array. Defaults are listed below.
+
+<code>
+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) */
+</code>
+
+** More documentation to follow **
@@ -0,0 +1,32 @@
+/*
+ Totem Ticker Stylesheet
+ Zach Dunn / Build Internet (buildinternet.com)
+ Winter 2011
+*/
+
+body{
+ font-family:Lucida Grande, Helvetica, Arial, sans-serif;
+}
+
+#wrapper{
+ width:300px;
+}
+
+ #wrapper p{
+ text-align:center;
+ }
+
+#vertical-ticker{
+ height:400px;
+ width:300px;
+ overflow:hidden;
+ margin:0; padding:0;
+}
+
+ #vertical-ticker li{
+ padding:41px 20px;
+ display:block;
+ background:#efefef;
+ border-bottom:1px solid #ddd;
+ text-align:center;
+ }
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Totem Ticker</title>
+ <link rel="stylesheet" type="text/css" href="css/style.css"/>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+ <script type="text/javascript" src="js/jquery.totemticker.min.js"></script>
+ <script type="text/javascript">
+ $(function(){
+ $('#vertical-ticker').totemticker({
+ row_height : '100px',
+ next : '#ticker-next',
+ previous : '#ticker-previous',
+ stop : '#stop',
+ start : '#start',
+ });
+ });
+ </script>
+</head>
+<body>
+
+ <h1>Totem Ticker</h1>
+ <p>Vertical scrolling ticker plugin for jQuery.</p>
+
+ <div id="wrapper">
+
+ <ul id="vertical-ticker">
+ <li>Slide 1</li>
+ <li>Slide 2</li>
+ <li>Slide 3</li>
+ <li>Slide 4</li>
+ <li>Slide 5</li>
+ <li>Slide 6</li>
+ <li>Slide 7</li>
+ <li>Slide 8</li>
+ </ul>
+
+ <p><a href="#" id="ticker-previous">Previous</a> / <a href="#" id="ticker-next">Next</a> / <a id="stop" href="#">Stop</a> / <a id="start" href="#">Start</a></p>
+
+ </div>
+</body>
+</html>
@@ -0,0 +1,164 @@
+/*
+ Totem Ticker Plugin
+ Copyright (c) 2011 Zach Dunn / www.buildinternet.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.totemticker = 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.totemticker", base);
+
+ base.init = function(){
+ base.options = $.extend({},$.omr.totemticker.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.totemticker.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.totemticker = function( options ){
+ return this.each(function(){
+ (new $.omr.totemticker(this, options));
+ });
+ };
+
+})( jQuery );

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 8cd3697

Please sign in to comment.