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 Cambridge, 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

40 Comments 9 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
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
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