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!

Be Sociable, Share!

293 thoughts on “jquery vticker (vertical news ticker)”

Patrick on 2013/06/05 at 16:57 said:

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

Reply ↓
you can try here on 2013/06/02 at 11:34 said:

Hey! Do you know if they make any plugins to protect against hackers?
I’m kinda paranoid about losing everything I’ve worked hard
on. Any recommendations?

Reply ↓
Pingback: I want to add auto scrolling to my RSS Feed | BlogoSfera
wholesale soccer jerseys paypal on 2013/05/22 at 13:37 said:

jquery vticker (vertical news ticker) « JugBit

Reply ↓
anik ulvia on 2013/05/22 at 04:29 said:

good..thanks

Reply ↓
Yoshix64 on 2013/05/08 at 18:23 said:

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

Reply ↓
sarir on 2013/04/19 at 16:26 said:

Thanks so much for helping me

Reply ↓
JimmiV on 2013/03/26 at 12:32 said:

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 ?

Reply ↓
- JimmiV on 2013/03/26 at 15:14 said:
  
  PS: I’m using it with JQuery 1.9.1
  
  Reply ↓
  - JimmiV on 2013/03/26 at 16:28 said:
    
    Forget it … it’s only another div that overlay the feeds. z-Index helped me. Sorry.
    
    Reply ↓
especially wine on 2013/03/24 at 07:53 said:

I tend not to leave a lot of comments, however after browsing some of the comments on
this page jquery vticker (vertical news ticker)

Reply ↓
Juan on 2013/03/22 at 20:40 said:

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.

Reply ↓
Zhaowei on 2013/03/22 at 16:57 said:

Many thanks for this! It worked great for me.

Reply ↓
anietie james on 2013/03/16 at 12:42 said:

Where do you place the javascript code – $(‘.myclass’).vTicker();

Reply ↓
shivam khandelwal on 2013/03/06 at 10:58 said:

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

Reply ↓
- shivam khandelwal on 2013/03/06 at 10:59 said:
  
  Any solution to this issue ?
  
  Reply ↓
Daniel Dulic on 2013/02/09 at 17:14 said:

Have you update for nre jQuery? Because I using jQuery 1.8.5, but it’s not working with it…

Reply ↓
Vivek Moyal on 2013/01/25 at 07:12 said:

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

Reply ↓
Andreas on 2013/01/21 at 12:14 said:

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

Reply ↓
http://tinyurl.com/lmddbaird42734 on 2013/01/19 at 22:36 said:

I was initially researching for techniques for
my personal web site and found your own blog post,
“jquery vticker (vertical news ticker)

Reply ↓
metamorpher on 2013/01/17 at 21:42 said:

Its fantastic! Great work!

Reply ↓
Michael on 2013/01/11 at 01:03 said:

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

Reply ↓
Rob on 2013/01/10 at 23:14 said:

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!

Reply ↓
Swat on 2013/01/10 at 13:34 said:

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.

Reply ↓
alex on 2013/01/07 at 15:56 said:

How do I stop the scrolling at the end of the last item on the list?

Reply ↓
Nakolpin on 2013/01/02 at 13:58 said:

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

Reply ↓
- Nakolpin on 2013/01/02 at 17:27 said:
  
  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 …
  
  Reply ↓
Frank on 2012/12/31 at 00:04 said:

Excelente.. Gracias, Thanks…

Reply ↓
Julius on 2012/12/26 at 22:18 said:

Hi, I like the demo, something I am looking for, can you please provide the HTML and version of jQuery library required.

Reply ↓
harshal on 2012/12/17 at 12:34 said:

awesome………

Reply ↓
gerAB on 2012/12/10 at 19:20 said:

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

Reply ↓
- jugbit on 2012/12/10 at 19:30 said:
  
  If you would check older comments you can see that there is a comment to implementation of features you are looking for. Go to https://github.com/manish-in-java/vTicker
  
  Reply ↓
Ankita Maskara on 2012/12/04 at 17:34 said:

what direction value should I give If I need to slide the text not upwards but to the right horizontally??? Please reply asap!! Thanks

Reply ↓
- jugbit on 2012/12/05 at 12:27 said:
  
  It is not possible. It is vertical ticker, not horizontal.
  
  Reply ↓
Kundan on 2012/12/03 at 19:39 said:

Great and easy to implement….

Reply ↓