Totem: A Vertical Ticker jQuery Plugin

WRITTEN BY

Zach Dunn

Zach is the Co-Founder and Director of Front End Development at One Mighty Roar in Boston, Massachusetts.

Files

Highlights

Totem is Build Internet's latest jQuery Plugin
It makes vertical animated tickers easy

Short URL

Totem: A Vertical Ticker jQuery Plugin

Totem is our latest jQuery plugin release. It makes animated tickers easy.

A New Release

We’re very excited to launch our next jQuery plugin since the widely popular Supersized. Totem makes implementing animated vertical tickers with navigation easy. It is the result of a few recent client projects which required finely controlled tickers plus navigation. This is certainly not the first vertical ticker plugin released for jQuery, but it does have a few features that help it stick out. We hope you’ll find it useful.

Totem is a relatively simple plugin that focuses on being flexible without too many bloated preformatted options. Apply it to a list, and Totem will take it from there. Style and structure as you planned.

The project page has full documentation and download links, and will be the hub for current and future versions going forward.

Project on GitHub

For the cutting edge releases and outstanding issues, we’ve set up a GitHub repository to keep everything in order. Feel free to post any code related issues or contributions there in addition to in the comments below. We’ll also be doing minor releases there from time to time without making full blog posts.

The Roadmap

There’s still plenty left to do. Future versions will include more animations, and the ability to have a continuous scrolling mode. Have any other suggestions? We’d love to hear them in to comments.

Support Requests

Based on feedback from previous plugins, here’s a reminder regarding support requests: We’re physically unable to address every “How do I make it do ABC under situation XYZ” posted to the comments. For example, we can’t provide support for “How can I load my recent blog posts to this?” or “How can I make this pull live results from the following sites.” If there are clear bugs that need fixing, that’s another story entirely.

This plugin controls presentation, and the specific structure (CSS, HTML, and data) will be unique to your project. We are available for custom work through One Mighty Roar if needed.

Wordpress.com stats not installed! Posted Thursday, February 17th, 2011 / Back to Top

I this post. Tweet

More in Resources »

SPONSOR

63 Comments 20 Mentions

Drew Author Editor
This looks great! Is there an easy way to reverse the scroll direction?

Thanks!

February 17, 2011 · Reply
- Zach Dunn Author Editor
  Not yet, although I think that’s one of the features that will probably have to be included next. You can do it manually by flipping the margin values in the current plugin files, but that might get messy.
  
  February 17, 2011 · Reply
  - Zach Dunn Author Editor
    Followup on this: I just pushed an update to the master branch on Github with added support for direction. The tag is v.1.0.1 https://github.com/buildinternet/totem/tree/v.1.0.1
    
    February 19, 2011 ·
  - Drew Author Editor
    Thanks Zach!
    
    February 21, 2011 ·
Luci Author Editor
This looks great – well done! Can I vote for a continuous scrolling option to be moved to the top of the road map? *g*

February 17, 2011 · Reply
Spencer Author Editor
Totem! The name is GENIUS.

February 18, 2011 · Reply
anon Author Editor
can i set every second box to bg=black then set the speed to like, speed=sooperdooper and make it the full size of user screen on load, then like, disco totem strobe light…

watch the poor little (insert origin here) kids fall.

February 21, 2011 · Reply
Rohan Author Editor
Thanks a lot! Was looking for something exactly like this for the updates section to my website.

Though there’s a small issue, somehow I can’t find the location where I can change the width of the Totem. Am I missing something?

March 2, 2011 · Reply
- Zach Dunn Author Editor
  The width of the ticker doesn’t affect the animations, so you can change the width via CSS as you normally would with any div.
  
  March 7, 2011 · Reply
Raj Author Editor
Hi Zach!

I liked the plugin.Currently i’m using the plugin.

Is there any way to highlight the current list.

March 6, 2011 · Reply
- Zach Dunn Author Editor
  Good question. The way it is currently written, there is no “Current item” exactly. It’s only the visible list items versus non-visible. I take it that you would like to have the middle item be assigned a certain class or something like that?
  
  March 7, 2011 · Reply
lxn Author Editor
Hi Zack,
very nice plugin, i like it!
For mine personal work i need to extend the plugin with the autostart.
If you’re interested i can send mine changes!

Thank’s for sharing this awesome stuff and sorry for my bad english! :)

March 7, 2011 · Reply
- Zach Dunn Author Editor
  I’m curious, what type of changes regarding autostart? A delay?
  
  March 7, 2011 · Reply
  - lxn Author Editor
    Sorry Zach, i haven’t downloaded the latest version and i found a problem on the automatic start sliding of the plugin. When i’ve downloaded the latest version this problem is solved. The problem probably is a “comma bug” reported on github. So, now mine extend is useless ;)
    
    March 8, 2011 ·
  - Peter Author Editor
    Sorry but I cannot see which option to set to enable an autostart of the slider. Could you kindly point me to it? Thanks!
    
    June 15, 2011 ·
Vladislavs Judins Author Editor
Terrific. So much thanks, thanks, thanks!

March 14, 2011 · Reply
Soccer Jerseys Author Editor
Thanks in advance for your help

April 30, 2011 · Reply
guillermo Author Editor
Could this plugin be used in horizontal?

May 4, 2011 · Reply
herry candi Author Editor
from makassar, south sulawesi, Indonesia. Terrific, very good, and Terima kasih ( thank you) Zach

could this item link to display foto on the right . for example the word show Zach and in the right show Zach photo of the handsome man picture with 4 photo with 250 x 200px

June 22, 2011 · Reply
Acmeous Author Editor
Look cool. But don’t you think it would have been better if user get an option to scroll the ticker with mouse, say click and drag, rather than having a pagination kind of representation :)

July 13, 2011 · Reply
Eriko Author Editor
Zack your plugin is great!

In all the good browsers it works perfectly but I had an issue at IE8 and i saw that you updated a fix for it although this fix killed the direction option, here it just fo down and i tried to change the options in the JS array but the problem continous, any tip?

Thanks for you time ^^

July 27, 2011 · Reply
- Zach Dunn Author Editor
  Hi Eriko, was there a link you tried to post in this comment? Might have gotten lost in the shuffle.
  
  July 27, 2011 · Reply
- Savannah Author Editor
  Can you share the IE8 fix? I can’t seem to find it and mine won’t scroll :(
  
  January 13, 2012 · Reply
George Author Editor
It doesn’t work in IE7 :(

August 31, 2011 · Reply
Delano Author Editor
Hello Zach,

I am currently looking at your script and trying to find a way if the text in each row has different heights.
For example is one row has a bigger height than the ’100px’.
Is that possible with this script?

Regards

September 6, 2011 · Reply
Benjamin Author Editor
Hey Zack, great plugin! :)

A callback after each scroll would be really nice.

October 19, 2011 · Reply
blondy Author Editor
its not work in IE7 !??

October 23, 2011 · Reply
Benjamin Author Editor
In my case, it is working in IE7…

October 23, 2011 · Reply
Jamie Author Editor
First off, great script guys and love the name.

For those of you having a hard time with IE7, it’s due to IE7 throwing a hissy fit every time there is a comma at the end of a list of properties.

For example:
[code]
base.$el.find('li:first').animate({
marginTop: '0px'
}
[/code]

October 23, 2011 · Reply
Jamie Author Editor
Sorry, accidentally submitted that last comment before I was ready. So:

base.$el.find(‘li:first’).animate({
marginTop: ’0px’,
}

should be:

base.$el.find(‘li:first’).animate({
marginTop: ’0px’
}

(in order to placate IE7)

If you go through the jquery.totemticker.js file and remove those commas you’ll get rid of the errors in IE7.

Here’s a copy of the script without the commas:
http://jsfiddle.net/rNQp8/

October 23, 2011 · Reply
- MikeC Author Editor
  It still doesn’t work for me
  
  November 12, 2012 · Reply
  - dara Author Editor
    base.$el.find(‘li:first’).animate({
    marginTop: ‘-’ + base.options.row_height,
    
    replace to
    
    base.$el.find(‘li:first’).animate({
    marginTop: ‘-’ + base.options.row_height
    
    without comma
    
    December 21, 2012 ·
moedas pw Author Editor
You have to believe in yourself . That’s the secret of success .

November 2, 2011 · Reply
rift platinum Author Editor
You have to believe in yourself . That’s the secret of success

November 2, 2011 · Reply
Luis Pumaricra Diaz Author Editor
Hello, muy bueno el post.. muchas gracias..

November 18, 2011 · Reply
Stoker Author Editor
Thanks for this cool script.

Unfortunately I have users who reports that there is a problem with IE7
Looks like this: http://img39.imageshack.us/img39/1929/snap2011111718h39m21s00.png

I am using the version from github
How can I fix this problem?

November 18, 2011 · Reply
- keb Author Editor
  Try adding overflow:hidden; to the CSS for the list.
  
  January 6, 2013 · Reply
Savannah Author Editor
I am having problems getting it to scroll in IE8.. any suggestions?

January 13, 2012 · Reply
Color Jam Author Editor
Hello Zach ,

Thanks for this useful plugin, we are going to this in our site for testimonials. Looking forward for this work to work like a charm.

Thanks

January 30, 2012 · Reply
3littlepenguins Author Editor
Hi – is there any way to use the easing plugin with this scroller? I like the simplicity of it, but would like more options om the move itself….
Thanks

February 6, 2012 · Reply
Clazzid Author Editor
Hello there Zach, congrats on the work, im lovin it and using it as a latest news slider, one issue is been bothering me though…
if many people are like me and get a little impatient on the scroll speed, they would notice that after a couple reapeated clicks on the next link, the li’s start piling up on the bottom, :( not pretty, and even less if you are using floated images inside.

anything you can do?
i think we all would love that bug fixed.

February 11, 2012 · Reply
priya Author Editor
http://marwahjatin.blogspot.in/2012/04/title-bar-notifications-ticker.html

Refer to the solution above….

May 1, 2012 · Reply
Gary Author Editor
I had success modifying this code to work with different row heights. Edit the jquery.totemticker.js file and modify the base.start_interval function. Replace the fixed row_height with the height of the top row.

Replace
base.$el.find(‘li:first’).animate({
marginTop: ‘-’ + base.options.row_height,

With
base.$el.find(‘li:first’).animate({
marginTop: ‘-’ + base.$el.find(‘li:first’).outerHeight(),

Extend this to the next/prev buttons if you wish also. Running on IE8.

May 9, 2012 · Reply
Brian Author Editor
This is what I was after.

May 29, 2012 · Reply
Dennis Author Editor
Anyone know how to get rid of light border around each LI item? It doesn’t show up in all browsers, but shows up on some smart phone OS’s. MAny thanks.

September 29, 2012 · Reply
hitesh Author Editor
HI

i am using pulgin, as it server my current project requirement

i am using this plugin in http://bhardwajgroup.com/

i am getting trouble in mozila its showing [object Object]

all other browser its working fine can any one let me know y this issue raised in mozila

October 5, 2012 · Reply
Scott Author Editor
First off, thanks! Just what I was looking for. Is there a way to make it not repeat (continuous loop) ?

October 25, 2012 · Reply
Razvan Author Editor
Great plugin, my only problem is that i don’t want to continouus scroll. Is there a way allready implemented or you must write more code?

October 31, 2012 · Reply
بهینه سازی سایت Author Editor
problem in IE8and 7?

November 10, 2012 · Reply
Scott Author Editor
Is this compatible with all Browsers?

December 22, 2012 · Reply
Hemant Author Editor
Hi Zach, Is there any way to scroll + hide more than 1 list element using which clicking on Next/Previous anchor tags? I am using your plugin on my website, my list is very big and vertically inclined. If i have to scroll it to the very end of the list it will take me a lot of time and user might not take interest in it and leave. So Is there any way to select and hide more than 1 element in the list, like 5-10 elements at once, on both Next and Previous Buttons. Any scope if we can add a scroll bar in the list. I am not using auto scroll option so i have increased the time to reduce its affect. And the same with Start & stop buttons are not used.

January 3, 2013 · Reply
Hemant Author Editor
Hi Zach,
Is there any way to scroll + hide more than 1 list element using when clicking on Next/Previous anchor tags? I am using your plugin on my website, my list is large and vertically inclined. If i have to scroll it to the very end of the list it will take me a lot of time and user might not take interest in it and leave. So Is there any way to hide more than 1 element in the list, like 5-10 elements at once, on both Next and Previous Buttons? Any scope if we can add a scroll bar in the list? So user can either scroll using scroll bar or clicking on the buttons and user know that there is more to scroll. I am not using auto scroll option so i have increased the time to reduce its affect. And the same with Start & stop buttons are not used.

PS: Please ignore my previous comment.

January 3, 2013 · Reply
- keb Author Editor
  This is easy to do, you can add another parameter and a “page_back” and “page_fwd” commands.
  
  Change the default options in the JS to this:
  
  $.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) */
  mousestop : false, /* If set to true, the ticker will stop on mouseover */
  direction : ‘down’, /* Direction that list will scroll */
  page_bk : null, /* ID of the page back button or link */
  page_fwd : null, /* ID of the page forward button or link */
  bg_scroll : 4 /* The number of rows to scroll for paging */
  };
  
  then add these two functions that were copied from the next and previous buttons
  
  //Previous Page Button
  if (typeof(base.options.page_bk) != “undefined” && base.options.page_bk != null){
  $(base.options.page_bk).click(function(){
  for (i=0;i<base.options.bg_scroll;i++){
  base.$el.find('li:last').detach().prependTo(base.$el).css('marginTop', '-' + base.options.row_height);
  base.$el.find('li:first').animate({
  marginTop: '0px'
  }, 0, function () {
  base.reset_interval();
  });
  };
  return false;
  });
  }
  
  //Next Page Button
  if (typeof(base.options.page_fwd) != "undefined" && base.options.page_fwd != null){
  $(base.options.page_fwd).click(function(){
  for (i=0;i<base.options.bg_scroll;i++){
  base.$el.find('li:first').animate({
  marginTop: '-' + base.options.row_height
  }, 0, function() {
  $(this).detach().css('marginTop', '0px').appendTo(base.$el);
  base.reset_interval();
  });
  };
  return false;
  });
  }
  
  Finally, set the number of rows you want to page through with your link or button on the page, of course you have to edit the values to fit your IDs and row height.
  
  $('#jobticker').totemticker({
  row_height : '28px',
  next : '#ticker-next',
  previous : '#ticker-previous',
  stop : '#stop',
  start : '#start',
  mousestop : true,
  page_bk : '#pgbk',
  page_fwd : '#pgfwd',
  bg_scroll : 10
  });
  
  January 6, 2013 · Reply
fulltutsplus Author Editor
your script is great but i doesn’t work with ie8 and ie7, please we need a fixed version.and thx

January 3, 2013 · Reply
- keb Author Editor
  I am using it successfully in ie7 and ie8.
  
  Make sure you have removed any trailing commas in the javascript file. It causes problems in ie7. Also, I had problems with the document not being ready, so I wrapped my implementation like this:
  
  $(document).ready(function(){
  $(‘#jobticker’).totemticker({
  row_height : ’28px’,
  next : ‘#ticker-next’,
  previous : ‘#ticker-previous’,
  stop : ‘#stop’,
  start : ‘#start’,
  mousestop : true
  });
  });
  
  January 6, 2013 · Reply
  - fulltutsplus Author Editor
    thx bro for your answer i wil try this….
    and thx again
    
    January 6, 2013 ·
Jo Author Editor
How do you incorporate images instead of the text shown?

January 11, 2013 · Reply
- keb Author Editor
  The script works by manipulating the location of items in an unordered list. You can make this work by adjusting the row_height in the settings to match the specified height of your images. Then in the list, simply place images in the list.
  
  January 14, 2013 · Reply
Jo Author Editor
Thank you.

January 16, 2013 · Reply
سئو Author Editor
hi ,

Thank you.

February 18, 2013 · Reply
Zabi Author Editor
Hello,

Very nice one, i need to show without sliding at first when i press next button only it should scroll. Any solution for this.

Regards
Zabi

May 7, 2013 · Reply
- keb Author Editor
  I have provided code above to make the scroll paginate if you want multiple items to scroll at once.
  
  As far as the not scrolling automatically, have you tried setting the interval to 0 or perhaps calling $.omr.totemticker.stop_interval() when the page loads?
  
  May 7, 2013 · Reply
Wowa Author Editor
Hi,
is it possible to start the scrolling if there are more than 5 “li” objects? Otherwise it should stand still until there are more than 5 objects.

May 17, 2013 · Reply