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.

Totem Ticker jQuery Plugin

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.

Totem on Github

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.

Posted Thursday, February 17th, 2011 · Back to Top

SPONSOR

Add Comment

71 Comments 20 Mentions

  1. Drew Author Editor

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

    Thanks!

    ·

    • 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.

      ·

  2. 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*

    ·

  3. Spencer Author Editor

    Totem! The name is GENIUS.

    ·

  4. 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.

    ·

  5. 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?

    ·

    • 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.

      ·

  6. Raj Author Editor

    Hi Zach!

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

    Is there any way to highlight the current list.

    ·

    • 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?

      ·

  7. 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! :)

    ·

    • Zach Dunn Author Editor

      I’m curious, what type of changes regarding autostart? A delay?

      ·

      • 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 ;)

        ·

      • 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!

        ·

  8. Vladislavs Judins Author Editor

    Terrific. So much thanks, thanks, thanks!

    ·

  9. Soccer Jerseys Author Editor

    Thanks in advance for your help

    ·

  10. guillermo Author Editor

    Could this plugin be used in horizontal?

    ·

  11. 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

    ·

  12. 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 :)

    ·

  13. 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 ^^

    ·

    • Zach Dunn Author Editor

      Hi Eriko, was there a link you tried to post in this comment? Might have gotten lost in the shuffle.

      ·

    • Savannah Author Editor

      Can you share the IE8 fix? I can’t seem to find it and mine won’t scroll :(

      ·

  14. George Author Editor

    It doesn’t work in IE7 :(

    ·

  15. 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

    ·

  16. Benjamin Author Editor

    Hey Zack, great plugin! :)

    A callback after each scroll would be really nice.

    ·

  17. blondy Author Editor

    its not work in IE7 !??

    ·

  18. Benjamin Author Editor

    In my case, it is working in IE7…

    ·

  19. 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]

    ·

  20. 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/

    ·

    • MikeC Author Editor

      It still doesn’t work for me

      ·

      • 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

        ·

  21. moedas pw Author Editor

    You have to believe in yourself . That’s the secret of success .

    ·

  22. rift platinum Author Editor

    You have to believe in yourself . That’s the secret of success

    ·

  23. Luis Pumaricra Diaz Author Editor

    Hello, muy bueno el post.. muchas gracias..

    ·

  24. 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?

    ·

    • keb Author Editor

      Try adding overflow:hidden; to the CSS for the list.

      ·

  25. Savannah Author Editor

    I am having problems getting it to scroll in IE8.. any suggestions?

    ·

  26. 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

    ·

  27. 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

    ·

  28. 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.

    ·

  29. 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.

    ·

  30. Brian Author Editor

    This is what I was after.

    ·

  31. 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.

    ·

  32. 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

    ·

  33. Scott Author Editor

    First off, thanks! Just what I was looking for. Is there a way to make it not repeat (continuous loop) ?

    ·

  34. 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?

    ·

  35. بهینه سازی سایت Author Editor

    problem in IE8and 7?

    ·

  36. Scott Author Editor

    Is this compatible with all Browsers?

    ·

  37. 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.

    ·

  38. 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.

    ·

    • 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
      });

      ·

  39. fulltutsplus Author Editor

    your script is great but i doesn’t work with ie8 and ie7, please we need a fixed version.and thx

    ·

    • 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
      });
      });

      ·

      • fulltutsplus Author Editor

        thx bro for your answer i wil try this….
        and thx again

        ·

  40. Jo Author Editor

    How do you incorporate images instead of the text shown?

    ·

    • 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.

      ·

  41. Jo Author Editor

    Thank you.

    ·

  42. سئو Author Editor

    hi ,

    Thank you.

    ·

  43. 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

    ·

    • 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?

      ·

  44. 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.

    ·

  45. er yery Author Editor

    er yewer yuers yesd u

    ·

  46. priya Author Editor

    HI,

    I am using your plugin in my coe. Automatic scrolling is working aswell as next button also working. But when i click the previous button for the first time the row is coming down at the same time going up also, not staying in the div. Some problem with click event of prev button.

    Can u pls help me to resolve this

    Thanks in advance
    Priya

    ·

  47. wilfran Author Editor

    good morning I’m trying to change the direction of travel and I can not, as I do help please

    ·

  48. wilfran Author Editor

    gracias ya esta listo Zach Dunn, muy bueno

    ·

  49. Harsha Author Editor

    IE7 Not Working :(

    ·

    • keb Author Editor

      Read the comments above from Jamie about the extra commas in the JS and my reply about the CSS fix for IE7.

      ·

  50. swapnil Author Editor

    Hi, thanks for Demo for reversed direction, i tried looking for solution and you have already given updated version. Thanks a lot.

    ·

  51. Sandeep Thomas Author Editor

    Hi boss, your plugin is awesome.. But am facing a little trouble which regarding the row height and max number. Actually if we specify max number as 3 and if the contents of the li is only a line, it may shows 5 or 6 item simultaneously. But actually according to the scenario it should show only 3 li item. Hope you got the issue. Waiting for your awesome reply..

    ·

 

Build Internet by One Mighty Roar. Since 2008.