jquery vticker (vertical news ticker)

I want to share with you my jquery plugin. I have made this plugin for easy and simple vertical news automatic scrolling.
It will calculate height automaticaly, so no styling needed (added an option to set height manually). Just grab it and use it – so simple.
Don’t add margin/padding on ul and li tags, try to style elements inside li or around div tag.
This is my first jquery plugin, so if you see something wrong please don’t hesitate and say it to me. All criticism is welcome.

Click here to see example

Now about the plugin and how to use it.

Html structure looks like:

    • some content
    • some content

Javascript code:

$('.myclass').vTicker();

There are also few options:

speed – speed of scrolling animation (default 700)
pause – wait time between scrolling (default 4000)
showItems – how many items to show (default 2)
animation – animation of sliding. To fade in/fade out use a value ‘fade’
mousePause – stop scrolling on mouse over (default true)
height – set vTicker container height. Also disables all items auto height calculation. It is usable to remove space gaps between items. (default 0 – it means off)
direction – which direction all items will move. Values are ‘up’ and ‘down’. (default ‘up’)

Example of options usage:

$('.myclass').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});

Using with other plugins

I’ve got a question how to use this plugin with other jquery plugin for Twitter called Tweet! . Tweet! plugin is taking information from twitter and makes a list that can be used with vTicker, but if you try to load simply in $(document).ready({ .. }) it won’t work, because Tweet! plugin loads the list after the document is ready and vTicker won’t have any data to scroll. So you need to use .ajaxStop().

Example

$(function(){
$('.twitter').tweet({
......
}).ajaxStop(function(){
$('.twitter').vTicker();
});
});

3rd party modifications

In this section you can check modifications done by other users.
  • https://github.com/richhollis/vticker “I’ve modified the vTicker code so that you can manually scroll the next and previous items and turn pause on if say you are hovering over the next/previous buttons.” – Rich

Donation

I would be grateful if you will donate me, but this plugin is absolutely free!

License

Copyright 2013 Tadas Juozapaitis

Released under the MIT license: http://www.opensource.org/licenses/mit-license.php

 

Click here to download

 Or check at github

Be Sociable, Share!

315 thoughts on “jquery vticker (vertical news ticker)

  1. It’s hard to find your website in google. I found it on 21 spot, you should build quality backlinks ,
    it will help you to increase traffic. I know how to help you, just type in google
    - k2 seo tips and tricks

  2. how can we work with auto height for each ticker item ? please anybody can help ASAP, Actually I need height auto for each ticker because I need to click on ticker and display other more content div just below the ticker item…!

    Thanks in advance..!
    thew3freelancer

  3. Food allergies can cause small pets to act out and nearly
    60% of all behavior issues in pets can be attributed to diet.
    Having a good guide to shop for insurance and knowing what questions to
    ask will lead you to a policy that will be the
    most beneficial to your wallet and your pet. Unwilling to dip into their own pickets to cover their pet’s misadventures
    pet owners in the United Kingdom purchase something called third party insurance.

  4. Hi! I just wanted to ask if you ever have
    any trouble with hackers? My last blog (wordpress) was hacked and I ended
    up losing several weeks of hard work due to no back up. Do you have any solutions to protect
    against hackers?

  5. Thank you for the auspicious writeup. It in reality was once a enjoyment account it.
    Glance advanced to far introduced agreeable from you!
    By the way, how could we keep in touch?

  6. I absolutely love your blog and find most of your post’s to be exactly I’m looking for.
    Would you offer guest writers to write content for yourself?
    I wouldn’t mind producing a post or elaborating on most of the subjects you write with
    regards to here. Again, awesome web site!

  7. Hi,
    I find your plugin very useful! But I want to use it with bootstrap 3 grid system. Can you please send me some guidelines on how to do that.

    tnx

  8. Using with other plugins:
    I am trying to use vTicker within the Notificaton Bar (used notification.js & jquery-1.4.4.min.js).; no error generates, but cant see vTicker text on the Notification Bar. Kindly help. Thanx in advance.

  9. Pingback: vTicker | Web Design | DESIGNIFY

  10. Hi, thanks for that lovely code.
    I had a problem with the window keeping count of slides when the window is not active, and then shooting the slides like a tornado when returning to it.
    a simple JS addition to your code solved it:
    Hope you can show it well in comments, and that this can help someone out.
    $(window).bind(“blur”,function(){
    options.isPaused = true;
    }).bind(“focus”,function(){
    options.isPaused = false;
    });

    Generaly just add options.isPaused = true to the window blur and focus events, inside the returned function

    Thanks and happy coding :)

  11. Thanks a lot for this!
    Thanks to you I’ve made a great verticall scroller of news with radient CSS3 transition!
    Nice!

  12. I really like this plugin, however, i’m trying to make it so that it displays 3 which works well. But for every 3 items it shows I would like for the middle one to have a unique id or class. Is that possible?

  13. Can I also stop the tickertape. If I have only one message (one li-tag) it keeps on sliding and I like to disable the fading -functionality.

    thx

  14. Pingback: I want to add auto scrolling to my RSS Feed | BlogoSfera

  15. It was a liitle difficult to install it on WP Homepage, but it’s finally working. Thanks.

    • Hi, i have the same problem, trying to get it working in WP. Can you provide me the code to load it the right way in wordpress? I cant get it to work properly (especially the on document ready part)

  16. I noticed that, exept for IE, the anchors work only on the topmost news. Why ? Is it possible to made clickable all the news of the feeds ?

  17. Can you take my site and see why is not working properly? I don’t know what I do wrong, would you send me an answer as soon as make you posible? Thanks a lot.

  18. Hello,
    It is a very nice plugin but the css style of element when changed to relative by the plugin itself moves the whole ticker to next line ignoring the absolute position declared by me to keep it on a fixed position

  19. I am using the vticker but this time i am getting some error. Ticket is going crazy after some time and moves very fast and after some time it stopped showing over the website. please help me. I think it happens when i go to some other tab and come back

  20. hi, this is a really nice ticker. is there a way to connect it to a mysql database to display the latest entries?

  21. Hi!

    Thank you for this! I’m not strong with script and was hoping you could help me out. I have four columns, 2 going up, two going down. When I hover over one of the columns, on the two going in the same direction pause, the other two keep scrolling.

    How can I have the scroller go both ways and have all scrolls pause on mouseenter?

    Thank you in advance for your help!

    Michael

  22. Hi,

    Is it possible sort the items so that the last item in the list appears first? (ascending or descending – I can never remember which is which ;) )

    Thanks!

  23. Hi,
    I have an issue.
    In mozilla browser, if I open the site with vticker in one tab and open a new tab and switch to that tab and come back to the previous tab with vticker, the vticker goes crazy, It doesnot work properly.

    Any help appreciated.
    Thanks in advance.

  24. Hi, i’m trying to implement vticker with arrows prev/next from Rich, but i’ve got a problem with that.

    i’ve 2 containers, one for the news, one for a galery, the problem is that if i define
    $(‘#news-container’)
    and
    $(‘#galery-container’)

    It only takes the second implement and not the first anymore.

    I tryed to define on prev/next button special classes => next_news / next_galery and same for prev, but any of my button only works on the galery, the scrolling too …

    May you have an idea cause that vticker is perfect at the moment, and i’d love using it more and more

    • At worse i used => vticker1.js and vticker2.js while changing the called functions

      it’s awfull but after indent all the js, i didn’t see what the matter was …

  25. Hi, grate plugin!
    Is it possible to implement navigation arrows to slide up or slide down the vticker?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>