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:

<div class='myclass'>
<ul>
<li>some content</li>
<li>some content</li>
...
</ul>
</div>

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 without any licensing, just leave a comment area in plugin where author details are.  Cheers!

Click here to download 

 

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

  1. hi, very nice plugin!

    One question, how can i loop the items like in your example?

    after my last its blank, and doesnt repeat the first

    Greets!

    Reply ↓

    • It should repeat all over again. Maybe you are using it with other plugins that cause the problem. You can also try to download latest version of the plugin. Or give more information/code

      Reply ↓

      • hi,

        i also use jquery.prettyPhoto but i dont think that has anything to do with it.

        This i my code:

        head:

        $(function(){
        $(‘#release-container’).vTicker({
        speed: 500,
        pause: 5000,
        showItems: 1,
        animation: ‘fade’,
        mousePause: false,
        height: 0,
        direction: ‘up’
        });
        });

        Body:

        test1

        test2

        test3

        test4



        i use no CSS for the release-container, but i do for release and inner.

        Thanks in advance!

        Reply ↓

        • If you use that plugin with vticker it may cause the problem. Maybe you use ajax to refresh your data and then when you refresh data don’t activate vticker again. Try to make a fresh page without other plugins active, just a list and vticker. If you see that it works ok, then it means you need to find a problem.

          Reply ↓

          • I´m having the same problem. In case that the number of ´s is tinier than the number of shown items everything is fine. In case that the number of ´s is bigger than the number of items it runs empty…

  2. Hi! I love your plugin – Thank you!

    I’ve run into some problems trying to incorporate it with “Tweet!.” I followed your directions, but I must be getting something wrong.

    Here is my code:

    $(function(){
    $(‘#news-container’).tweet({
    count: 3,
    query: “from:seaofclouds http”,
    loading_text: “searching twitter…”
    }).ajaxStop(function(){
    $(‘#news-container’).vTicker({
    speed: 500,
    pause: 3000,
    animation: ‘fade’,
    mousePause: false,
    showItems: 1
    });
    });
    });

    Reply ↓

    • Do you have a example of a successful integration? That would be very helpful!

      Thanks again!!

      Reply ↓

    • I have never used tweet! plugin, but how I understood it should work like that. It would be helpful to get a link where you try to use it and what is wrong. Try to make a fresh page only with those 2 plugins. Try to make a simple list and use vticker only and check if it works. There are a lot of posibilities to try. So to sum up first of all I need to know what is wrong.

      Reply ↓

  4. Handy plugin – great job!

    Noticed an issue where ie7 does not display text clearly from hidden items. First however many items display well, then items that slide into view have noticeably grainy text.

    Anyone noticed the same thing?

    Reply ↓

      • Hi I see this issue in IE7 and its persistent in the example demo too. I also see that the width of each of the li is not 100%.

        Reply ↓

        • The width issue can be resolved by adding width:100% to #news-container ul

          I could not get through the grainy text issue yet.. Anyone else seeing this?

          Reply ↓

          • I haven’t tried out this script yet, but you can try this after each animation:

            this.style.removeAttribute(‘filter’);

  6. Very nice. Is there a way to control the fade effect ?
    It fades in and out so fast that one hardly notices it.

    Thanks

    Reply ↓

  8. i have a style applied to each li using li:nth-child

    Each style has a set opacity and font size.

    Ive uploaded the page to here:
    http://bit.ly/9x3Xv3

    How do i get the style to stay in place and have the text cycle?

    I’m stuck so any help would be great

    Thanks!

    Reply ↓

    • Example works on IE8, so it means, that you done something worng in your project. I saw there was javascript error something about jquery.min.js

      Reply ↓

  11. First of all the jquery website is all messed up and it would be terrific if you can provide a not compressed version.

    Also how would I change the parameters on the fly. I tried just createing another vticker but that didn’t stop the previous from running.

    Reply ↓

  12. Can you post the non compressed script. Also how can I adjust the parameters on the fly. I tried recreating it but this did not delete the old and they just conflicted.

    Reply ↓

    • nice work! how can i enable fade IN? also, direction option not working. here’s my options:
      var defaults = {
      speed: 4000,
      pause: 8000,
      showItems: 3,
      animation: ‘fade’,
      mousePause: true,
      direction: ‘down’,
      isPaused: false
      };

      thanks

      Reply ↓

        • Hi,

          I have a div that is 200px wide and 80px high.
          plugin works nice in mozilla / safari, but IE8 seems to shift all list items 100px to the right (so the left border in the center of the div), while the right half of the text is truncated.

          Any idea how to solve this?

          Thanks in advance,
          Ken

          Reply ↓

          • Hi,
            should that be done inside the vTicker code, or in the DIV / UL / LI elements?

            Thanks again,
            Ken

          • Hi,

            without additional styling, all text is centered.
            However, IE8 moves the (imaginary) left border of the centered text to the center of the surrounding div so the right side of the text disappears.

            Explicit styling of the UL does the trick for all browsers:
            style=”position:relative; left:0px; text-align:center;”

            Best regards,
            Ken

            Thanks,
            Ken

  15. I plugged in jQuery 1.4.2 into your demo page, didn’t work.
    All I did was change the jQuery reference to 1.4.2.

    Any ideas?

    Reply ↓

  16. Very nice plug-in! I have the same issue with the looping failing and when I winnowed it down to a test case it has to do with the latest jQuery.

    If I hotlink for test case to

    http://www.jugbit.com/jquery/jquery.js the looping works.

    If instead I use

    http://code.jquery.com/jquery-latest.js

    Then the looping fails. In my situation I cannot simply use a copy of your jQuery.

    I did a test using your page code (http://www.jugbit.com/jquery/vticker.php ) where I replaced the script tag to reference the latest and the issue occurred there too.

    I would be willing to make a donation for a fix!

    Please let me know.

    David

    Reply ↓

  17. I have done a little extension:

    if height is set to -1 the height of each element is calculated dynamicly. Means not every entry has the same height!

    /*
    * vertical news ticker
    * Tadas Juozapaitis ( kasp3rito@gmail.com )
    * http://www.jugbit.com/jquery-vticker-vertical-news-ticker/
    */
    (function($) {
    $.fn.vTicker = function(options) {
    var defaults = {
    speed : 700,
    pause : 4000,
    showItems : 3,
    animation : ”,
    mousePause : true,
    isPaused : false,
    direction : ‘up’,
    height : 0
    };

    var options = $.extend(defaults, options);

    moveUp = function(obj2, height, options) {
    if (options.isPaused)
    return;

    var obj = obj2.children(‘ul’);

    var clone = obj.children(‘li:first’).clone(true);

    if (options.height > 0) {
    height = obj.children(‘li:first’).height();
    }

    obj.animate({
    top : ‘-=’ + height + ‘px’
    }, options.speed, function() {
    $(this).children(‘li:first’).remove();
    $(this).css(‘top’, ’0px’);
    });

    if (options.animation == ‘fade’) {
    obj.children(‘li:first’).fadeOut(options.speed);
    if (options.height == 0) {
    obj.children(‘li:eq(‘ + options.showItems + ‘)’).hide()
    .fadeIn(options.speed).show();
    }
    }

    clone.appendTo(obj);
    };

    moveDown = function(obj2, height, options) {
    if (options.isPaused)
    return;

    var obj = obj2.children(‘ul’);

    var clone = obj.children(‘li:last’).clone(true);

    if (options.height > 0) {
    height = obj.children(‘li:first’).height();
    }

    obj.css(‘top’, ‘-’ + height + ‘px’).prepend(clone);

    obj.animate({
    top : 0
    }, options.speed, function() {
    $(this).children(‘li:last’).remove();
    });

    if (options.animation == ‘fade’) {
    if (options.height == 0) {
    obj.children(‘li:eq(‘ + options.showItems + ‘)’).fadeOut(
    options.speed);
    }
    obj.children(‘li:first’).hide().fadeIn(options.speed).show();
    }
    };

    return this.each(function() {
    var obj = $(this);
    var maxHeight = 0;

    obj.css({
    overflow : ‘hidden’,
    position : ‘relative’
    }).children(‘ul’).css({
    position : ‘absolute’,
    margin : 0,
    padding : 0
    }).children(‘li’).css({
    margin : 0,
    padding : 0
    });

    if (options.height maxHeight) {
    maxHeight = $(this).height();
    }
    });

    if (options.height != -1) {
    obj.children(‘ul’).children(‘li’).each(function() {
    $(this).height(maxHeight);
    });
    calcHeight = maxHeight * options.showItems;
    }

    obj.height(calcHeight);
    } else {
    obj.height(options.height);
    }

    var interval = setInterval(function() {
    var currentHeight = maxHeight;
    var ulObj = obj.children(‘ul’);

    if (options.direction == ‘up’) {
    if (options.height == -1) {
    currentHeight = ulObj.children(‘li:first’).height();
    }
    moveUp(obj, currentHeight, options);
    } else {
    if (options.height == -1) {
    currentHeight = ulObj.children(‘li:last’).height();
    }
    moveDown(obj, currentHeight, options);
    }
    }, options.pause);

    if (options.mousePause) {
    obj.bind(“mouseenter”, function() {
    options.isPaused = true;
    }).bind(“mouseleave”, function() {
    options.isPaused = false;
    });
    }
    });
    };
    })(jQuery);

    Reply ↓

    • Do you have a live version of this as a demo. I have come across the height issue, and would very much like to see variable height divs, but I can’t seem to get your code amendment to work

      cheers

      Ben

      Reply ↓

  18. Thank you for the great plugin. It’s exactly what I was looking for.

    However, there seems to be a bug. I do an ajax call every 10 seconds to refresh my data. Even though I clear out and replace my list each time, the plugin keeps all the data it has ever seen.

    That is, when you first go in the page, I have 10 items and it looks great. After the first refresh and ajax call, even though I clear out my and re-add the , I get 20 items. The next refresh, I have 30 items, etc.

    Does your code save the old data?

    Thank you.

    Reply ↓

  19. Great plugin… I love it.
    Can you show me how to get showItems works? I set showItems: 1 but it doesn’t works for me, my code like this:

    $(‘.hotnews’).vTicker({
    showItems: 1
    });

    Thanks.

    Reply ↓

  21. Is it possible to intergrate this with RSS titles? I really want to get the latest blog posts in this vertical news ticker. Would be awsome if it reads the RSS blog titles and use them instead of manual input. :-)

    Reply ↓

  22. I really like this plugin but I’m having a problem with it. Since the list is in the html code, the listed items are there on the page but hidden other than the number of items specified in ‘showItems:’. If you have a lot of items, you get a lot of white space at the end of your page.

    How can I get rid of the space at the bottom?

    Reply ↓

      • I found the issue.. It wasn’t a problem with vTicker. Creating the long list did cause the page to become very long but that was fixed by editing the html code, not the vTicker code.

        Thanks for the excellent plugin!

        Reply ↓

    • Hello!
      No there is no such option to start at a random position. You should generate html in random. I could make such option in plugin, but I want to keep this script simple and small. If you request that, then I can implement it

      Reply ↓

      • Hey,

        Thanks for the great plugin. Works great for me but I need this option too. I want to start at a particular position, not the start of my list. Is there an easy way to do this?

        Reply ↓

  25. Is it possible to add a callback function in the future?
    So, each time the feed has stopped moving a function can be called to handle content updates.

    cheers,
    sjaakie

    Reply ↓

  26. It works, but when the ticker loads, it will briefly show all the elements that it will cycle through before the script seems to kick in and ONLY show the first entry.

    Granted it’s a brief flicker for half a second, but is there something I can do about this? I tried styling my way out of it with no luck. Happens in any of my browsers ( FF 3.6, Chrome 7, IE 8)

    Reply ↓

    • I am having this problem as well, excellent plugin and I’ve had no trouble besides this content flash.

      Any possible solution to this?

      Reply ↓

        • Fixed this one… er, actually I just positioned it off the viewable screen for 2.5 secs – enough time for the script to instantiate and hide the extra elements, and then move it back into view.

          Some code:

          vTicker ul here

          function carousel_align()
          {
          var t = setTimeout(‘document.getElementById(“carousel-container”).style.left=”0px”‘,2500);
          }

          document.onload=carousel_align();

          works for me, ymmv.

          Reply ↓

  27. Hi, Nice lighweight plugin and works very easily straight off the bat. One slight problem, I would like to add padding the the bottom of the LI, is there a reason why there is 0 padding?

    I guess I have to do that in the script, I supose I could create an extra var for padding?

    Reply ↓

    • Quote: “Don’t add margin/padding on ul and li tags, try to style elements inside li or around div tag.”

      If I remember, then it is because of animation. So you can’t add padding to li element.

      Reply ↓

    • i just added a transparent image (gif or png) at the begining of the li (like a spacer) and it works fine.

      example:

      your content here…

      Reply ↓

  28. i completly rewrote you HTML and CSS in your demo, if youre interested in it, hit me up via email. Good work on this one, man!

    Reply ↓

  29. Hi, nice plugin, works great! however ive encountered one problem with my page:

    The news ticker doesnt run until everything else on the page is loaded which to my understanding is how jquery operates. the problem however is that whilst the rest of the page is loading, my entire list appears rather than just the first point on the list.

    Please bare with me if the answer is obvious as i am very new to jquery!

    If anyone could help id be very appreciative
    Cheers

    Reply ↓

  31. Hi,

    Nice plugin. Can i have Twitter like effect using this Plugin. What i want is, if a new record is added in the database, i am doing ajax push to the client side [each DB row is displayed as a single row of a table], but i want to display the new record at the top and push the already present records down with an animated effect.

    Reply ↓

  32. Hi,

    Great Plugin!!!

    I was wondering if there is an option for it too loop continuously. Like a news ticker. Because for example if you take your sample and add a set height to
    #news-container ul li div
    {
    border: 1px solid #aaaaaa;
    background: #ffffff;
    height: 400px;
    }

    Then add a lot of text to the div and you get cutoff text if the text is very long.

    Thanks,
    Joe

    Reply ↓

  33. Pingback: The Best jQuery Vertical News Ticker « Eleven2 Blog

  35. Pingback: Nuovo tema | Napolux.com

  37. Hi there… is there any way to disable the automatic height of each element? my content length varies, but the script seems to set a single height for each element regardless of the amount of content. To show this you could look here:

    http://www.voxmedia.co.uk/test.html

    I have coloured in the background of the div elements to illustrate the problem. Ideally the divs would auto size to the height of the content, and the gaps between the divs would then be even.

    cheers

    ben

    Reply ↓

    • There is an option “height”, that you could use to remove space gaps:

      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)

      Reply ↓

      • That’s a great plugin jugbit, it’s exactly what I was looking for. I’ve implemented it in the following site of one of my clients: http://www.saphirsystems.com.

        While testing some options, I needed to do like ben, but the “height” option isn’t the one, or I haven’t been able to make it work when setting it to a value different from ’0′.

        The comment from Mike Leber (www.jaxfront.com) sent on 2010/11/10 at 14:51, was a good start (obviously some lines were missing) so here’s my code in order to set auto height for both individual items AND whole ticker.

        /*
        * vertical news ticker
        * Tadas Juozapaitis ( kasp3rito@gmail.com )
        * http://www.jugbit.com/jquery-vticker-vertical-news-ticker/
        * Extended by Abdelaziz Bennouna http://www.tellibus.com, based on
        * comment from Mike Leber (http://www.jaxfront.com/)
        * 2010/11/10 at 14:51
        * ‘I have done a little extension:
        * if height is set to -1 the height of each element is calculated dynamically. Means not every entry has the same height!’
        */

        (function($){
        $.fn.vTicker = function(options) {
        var defaults = {
        speed: 700,
        pause: 4000,
        showItems: 3,
        animation: ”,
        mousePause: true,
        isPaused: false,
        direction: ‘up’,
        height: 0
        };

        var options = $.extend(defaults, options);

        moveUp = function(obj2, height, options){
        if(options.isPaused)
        return;

        var obj = obj2.children(‘ul’);

        var clone = obj.children(‘li:first’).clone(true);

        if(options.height > 0)
        {
        height = obj.children(‘li:first’).height();
        }

        /* Abdelaziz Bennouna (tellibus) 2011/03/07
        * Computing new total height in case auto height is off
        */
        if(options.height == -1) {
        newHeight = obj2.height() + obj.children(‘li’).eq(options.showItems).height() – height + ‘px’;
        obj2.animate({height: newHeight});
        //obj2.css(‘height’, newHeight); // or without animation
        }
        /* End of Abdelaziz Bennouna (tellibus) 20110307 */

        obj.animate({top: ‘-=’ + height + ‘px’}, options.speed, function() {
        $(this).children(‘li:first’).remove();
        $(this).css(‘top’, ’0px’);
        });

        if(options.animation == ‘fade’)
        {
        obj.children(‘li:first’).fadeOut(options.speed);
        if(options.height == 0)
        {
        /*
        Comment from José
        2011/03/02 at 00:27
        Fix to JQuery 1.4.4 ->
        Search line:
        f.children(“li:eq(“+e.showItems+”)”).hide().fadeIn(e.speed)
        ” obj.children(‘li:eq(‘ + options.showItems + ‘)’).hide().fadeIn(options.speed).show();”
        Replace to:
        f.children(“li:eq(“+e.showItems+”)”).fadeIn(e.speed)
        ” obj.children(‘li:eq(‘ + options.showItems + ‘)’).fadeIn(options.speed);”
        */
        obj.children(‘li:eq(‘ + options.showItems + ‘)’).fadeIn(options.speed);
        }
        }

        clone.appendTo(obj);
        };

        moveDown = function(obj2, height, options){
        if(options.isPaused)
        return;

        var obj = obj2.children(‘ul’);

        var clone = obj.children(‘li:last’).clone(true);

        if(options.height > 0)
        {
        height = obj.children(‘li:first’).height();
        }

        obj.css(‘top’, ‘-’ + height + ‘px’)
        .prepend(clone);

        obj.animate({top: 0}, options.speed, function() {
        $(this).children(‘li:last’).remove();
        });

        if(options.animation == ‘fade’)
        {
        if(options.height == 0)
        {
        obj.children(‘li:eq(‘ + options.showItems + ‘)’).fadeOut(options.speed);
        }
        obj.children(‘li:first’).hide().fadeIn(options.speed).show();
        }
        };

        return this.each(function() {
        var obj = $(this);
        var maxHeight = 0;

        obj.css({overflow: ‘hidden’, position: ‘relative’})
        .children(‘ul’).css({position: ‘absolute’, margin: 0, padding: 0})
        .children(‘li’).css({margin: 0, padding: 0});

        if(options.height == 0)
        {
        obj.children(‘ul’).children(‘li’).each(function(){
        if($(this).height() > maxHeight)
        {
        maxHeight = $(this).height();
        }
        });

        obj.children(‘ul’).children(‘li’).each(function(){
        $(this).height(maxHeight);
        });

        obj.height(maxHeight * options.showItems);
        }
        /* Abdelaziz Bennouna (tellibus) 2011/03/07
        * Total height for all items in case auto height is off
        */
        else if(options.height == -1)
        {
        var totalHeight = 0;
        for(i = 0; i < options.showItems; i++)
        totalHeight += obj.children('ul').children('li').eq(i).height();
        obj.height(totalHeight);
        }
        /* End of Abdelaziz Bennouna (tellibus) 20110307 */
        else
        {
        obj.height(options.height);
        }

        var interval = setInterval(function(){
        /* Mike Leber 2010/11/10 at 14:51
        * The height of each element is calculated dynamically
        */
        var currentHeight = maxHeight;
        var ulObj = obj.children('ul');
        if (options.direction == 'up') {
        if (options.height == -1) {
        currentHeight = ulObj.children('li:first').height();
        }
        moveUp(obj, currentHeight, options);
        } else {
        if (options.height == -1) {
        currentHeight = ulObj.children('li:last').height();
        }
        moveDown(obj, currentHeight, options);
        }
        /* End of Mike Leber 20101110 */
        }, options.pause);

        if(options.mousePause)
        {
        obj.bind("mouseenter",function(){
        options.isPaused = true;
        }).bind("mouseleave",function(){
        options.isPaused = false;
        });
        }
        });
        };
        })(jQuery);

        Reply ↓

  39. Nice job with the vTicker. I’m using it for an RSS news feed that also uses the fine jquery.expander plugin that expands text in the news feed. When I try to expand the text to read more of the story the text overwrites the next item in the vTicker. Can you give me an idea how I can resolve this?

    Reply ↓

  41. Great program. Is there a way of having multiple tickers on the same page. I have two defined but only the last one is displayed.

    Any ideas ?

    Regards
    Phil

    Reply ↓

  42. Fix to JQuery 1.4.4 ->

    Search line:

    f.children(“li:eq(“+e.showItems+”)”).hide().fadeIn(e.speed)

    Replace to:

    f.children(“li:eq(“+e.showItems+”)”).fadeIn(e.speed)

    Reply ↓

  43. Hi, its very nice plugin.

    Is it possible to have “smooth” scrolling ?
    i tried to set “pause” to 0 but the ticker started to behave very strange, every item started to repeat. Also when i set speed to 1500 and pause to 1500, the ticker started to double some items and ended up showing white space.

    any setting of pause below 1000 will result strange behaviour :(

    could you please help me with this issue ?

    Reply ↓

    • Hey, I had the same issue. You need to make some changes in the plugin.

      under the moveUp function make the following change:
      f.animate({
      top: ["-=" + d + "px","linear"]
      },

      what i’m doing here is removing the ease.

      and when you call the plugin make sure the ‘speed’ and ‘pause’ are the same speed. with the exception of ‘pause’ which should be ever so slightly slower:

      speed: 2000,
      pause: 2010,

      Reply ↓

  44. Hi,
    How are you doing? very nice plug in!
    I’ve got a quick question

    I have images on the Rotator, and im wondering if i can do so when my page loads before the event listing opens all the images are hidden (so it doesn’t look like a stack of images until the script loads.
    Thank you

    Reply ↓

    • Hi,

      Try to give a style “display: none;” on the container and add javascript “$(function(){ $(‘#container’).show() });” . I hope it helps

      Reply ↓

  45. hi can tell me that can i control the animation with controls i mean with up down. is it working like when the page load the animation will auto work and when I hover on up and down then it will control by those buttons

    Thanks

    Reply ↓

  46. Hi There;

    Thank you for this nice jQuery code. I want to know is it possible to use links to navigate between items ?

    I try to use moveDown or moveUp functions but it fails :)

    Best Regards…

    Reply ↓

  47. Pingback: Siti ai Raggi X: Gang Cavaliere | Fedeweb

  48. Hi,

    Thanks for the small , easy to use scroller.
    Can anyone help with changing the scroll speed with the use of a button?
    I have pre set the value but want to give the user an option to speed up or slow down depending on their reading skills.

    Reply ↓

  53. Thanks for this plugin.
    I want to make a callback after all li element display.
    letsay I have 10 li element and show only 3 at a time when li 10 reach I want to findout if he really reach li 10.
    can anybody help me?
    thanks

    Reply ↓

  54. Thanks for the plugin. I have an anchor tag inside the li tag but somehow clicking on the anchor link always displays a random li anchor page and not the li anchor link I clicked on. Can you hep? Is the plugin meant strictly for news display purpose? Can you not click on the moving items to go deeper?

    Reply ↓

      • Thanks for the reply. I am able to click on the anchor tag, however the page that shows up is not the one I clicked on but the next one or one before that. Have you ever seen that or perhaps it is my wicket integration.

        Reply ↓

        • It is most likely that there is something wrong with your implemention. But if you could provide me with a test page , I could have a look

          Reply ↓

          • Got it. I needed to use a BookmarkablePageLink in wicket. Thanks.

  55. Fantastic script – worked like a charm on the first try. My only question is can the height of each element be determined independently? ie – can each element have its own height calculated on the fly?

    Thanks!

    Reply ↓

  56. Hi, very nice plugin. The only issue I face is auto calculation of height. I want to disable it.

    I try to set a value to height variable but it didn’t work according to my requirement. It set the container height not the height.

    Please let me know if anyone knows how to disable the height ?

    Thanks in advance.

    Reply ↓

    • sometimes with plugins we need to go back and modify the parameters, such as when the user changes them dynamically.. is there an ability to do something like this:

      $(‘.vticker).vticker(“option”,”speed”,200);

      ?

      Reply ↓

      • This is perfect news ticker. But I have examined that it work only if showItems greater than 1 and total items also greater than 1. If both total items and showItems are greater than 1, then, showItems should always less than total items, otherwise it will display and loop first time only mean no news will reappear again.

        If there are total 2 news items, showItems property should be 1, otherwise, looping will fail after displaying and scrolling first time.

        If you have total 2 items and showItems property is 2, then news will display and scroll but does not reappear?

        I think, this shouldn’t be implementation fault?

        Reply ↓

          • after checking, code, if we remove or comments these line, then all things work great

            /* Abdelaziz Bennouna (tellibus) 2011/03/07
            * Computing new total height in case auto height is off
            */
            if(options.height == -1) {
            newHeight = obj2.height() + obj.children(‘li’).eq(options.showItems).height() – height + ‘px’;
            obj2.animate({height: newHeight});
            //obj2.css(‘height’, newHeight); // or without animation
            }
            /* End of Abdelaziz Bennouna (tellibus) 20110307 */

            but keep other instance as intact.

  58. Has anyone noticed in Google Chrome, if you have a vTicker with multiple list items- that if you open a new tab and wait a good amount of time and switch back, the ticker goes crazy fast trying to “catch up”?

    Reply ↓

  59. This is a fantastic plugin. Thank you for creating it.

    I was wondering if there was a way to use the fade animation but not have the actual scroll up or down effect. Basically, I want to show one item at a time and have it just fade from one to the next.

    Thank you.

    Reply ↓

  61. Nice plugin, thanks. BUT height is not working for me. If no height, or a 0 height, is entered, it only displays 3 of my news items. I have to set the height manually, but then if news items vary in height some will be cut off or there is a gap.

    Reply ↓

    • hi there, nice plugin. Is it possible to adapt it to scroll through a repeated recordset region instead ?…

      Reply ↓

  62. hi there, nice plugin. Is it possible to adapt it to scroll through a repeated recordset region instead ?

    Reply ↓

  64. Brilliant. Vticker is exactly what I’ve been looking for.

    I’ll let you know when my site goes live so people can see it working “in real life”.

    Thanks for your hard work…I’ll be making a donation shortly.

    Reply ↓

  67. I’m having a heck of a time getting this to work with zRssFeed and the JQuery Tab control. I can get the first tab working but the susequent tabs are empty. It appears that there’s something about the vTicker that doesn’t play nicely with the tabs.

    any ideas?

    Reply ↓

    • I had same issue. Found a solution for you….
      Assign an id to your href tab and then put an onclick event to initiate the ticker
      For example:
      Your tabs list
      Top Ten

      the javascript
      $(‘#tabs-5-tab’).click(function() {
      $(‘.top-ten’).vTicker({
      speed: 500,
      pause: 5000,
      showItems: 1,
      animation: ‘fade’,
      mousePause: false
      });

      });

      Reply ↓

      • Thanks heaps for that one, it has almost got me back in action. Only problem is that it appears to show full height with all items instead of set the number (meaning no scroll).

        Any thoughts?

        Reply ↓

  69. Pingback: Asp.Net duyuru sistemi

  72. really great pluggin, worked great from start and for some months…. but recently have hit an issue… on jqueryv1.6 and the browsers (FF 5 or Chrome 12). it loads well at first (initial page load), then when u go to another tab and wait some time before returning, the scrolling fails totally, or keep repeating just one of the values (</li). Pls tyr fix it, dont want to change to another. Thanks

    Reply ↓

  73. Great plugin… though I’m having an issue in IE8. Works perfect in FF and Chrome.

    Basically, the scrolling ticker container is hidden in IE8. It was working in IE8 until I added the lightbox jquery libraries to my page so that thumbnails can open larger smoothly.

    I tried using jQuery instead of “$” in the code. No luck in IE. I tried using “display:block” on the element, but it is still hidden when including these libraries for IE. Any ideas?

    Reply ↓

  74. Hi, I wonder how I can do to have a control by clicking the direction is upward, and if I click, it changes direction, bone down, thank you very much

    Reply ↓

  75. Is there a way to make the scroll so that it scrolls all three news items and replaces them with the next three? Don’t worry I will extend the pause so folks can read it :) .

    Reply ↓

  76. Hi, i wanna thank you for this very nice plugin, but i got some trouble with it.
    I use it to display 3 news, scrolling one by one.
    But when vTicker is on the last one and the first one comes again, it’s adding a sort of padding top in the ul…
    ul and li got no style except “list-style:none” and background-color to see where’s the trouble, css is on a li > div …
    Is anyone got the same trouble?
    How can i fixed it?

    Please help me

    Reply ↓

  78. first off, let me say I like the plugin, as well as its simplicity.

    There seems to be an odd glitch in Firefox 6, only.
    If I have multiple tabs open and I go back and forth between tabs and then start looking at the vTicker, the vTicker text will scroll very, very quickly (more quickly than specified), seemingly continuously, and then will randomly go back to normal. Please take a look at http://portal2web.biz/webs/greensprig . The vTicker is the text toward the top of the page (not the slideshow, below). If you can illuminate why this weird issue is occurring, I would appreciate knowing about it. Thank you very much for your help!

    Reply ↓

    • I’m seeing the same issue in Chrome v13. Any insight you could provide on what is going on would be very helpful.

      Reply ↓

  79. Is there a fix for the focus bug? And is there a solution to multiple instances using the same div id but different content?

    Regards

    Bob

    Reply ↓

  80. Disregard the above post, I didn’t have time to wait around for answers so got it done with google and trial and error.

    For those having the focus issues and strange behaviour when returning to the page or tab, paste the below code under the options function in vticker.js near the top.
    $(window).bind(‘blur’, function(){
    console.debug(‘window blur’);
    options.isPaused = true;
    });

    $(window).bind(‘focus’, function(){
    console.debug(‘window focus’);
    options.isPaused = false;
    });

    So the top of vticker now looks like

    (function($){
    $.fn.vTicker = function(options) {
    var defaults = {
    speed: 700,
    pause: 2000,
    showItems: 3,
    animation: ”,
    mousePause: true,
    direction: ‘up’,
    isPaused: false,
    height: 0
    };
    $(window).bind(‘blur’, function(){
    console.debug(‘window blur’);
    options.isPaused = true;
    });

    $(window).bind(‘focus’, function(){
    console.debug(‘window focus’);
    options.isPaused = false;
    });

    That pauses it when page focus is lost on almost all browsers, and will restart when you go back to the tab / window.

    As for the multiple instances, i sorted that issue out for myself, but it was more a problem specific to my needs on multiple forum posts per page with same div id’s.

    Reply ↓

  82. Hi,

    I need to incorporate vTicker(), with individual .play and .pause image buttons.

    Please Help.

    Regard,
    Vijay A.

    Reply ↓

    • Thank you all,

      Please Ignore previous post, as i got the solutions for play-pause function.

      I added a new function as below, after the “if(options.mousePause)” function ends, in ticker.js file

      if(options.mouseClick)
      {
      $(‘#pause’).click(function(){
      options.isPaused = true;
      });
      $(‘#play’).click(function(){
      options.isPaused = false;
      });
      }

      And in vTicker() initialisation add a line ” mouseClick: true”

      It will look like as below-

      $(‘.newsticker’).vTicker({
      speed: 1000,
      pause: 2000,
      showItems: 1,
      animation: ‘fade’,
      height: 33,
      direction: ‘up’,
      easing: ‘swing’,
      isPaused: false,
      mouseClick: true
      });

      Hope It help someone who is trying to meet function like my requirement.

      Thank you again,

      Regards,
      Vijay A.

      Reply ↓

  85. Thank you for this nice and simple plugin. Just wanted to note that I did experience some wonky issues using this with jQuery.noConflict() and Prototype (jQuery ver 1.4.1 and Prototype ver 1.7.0.0) . I didn’t exactly find a fix but upgrading to jQuery ver 1.6.4 did the trick. Hope this helps someone else. Thanks!

    Reply ↓

  86. I have a question: How can I set the z-index? It appears before my menu and need to send it back.. Thanks..

    Reply ↓

  87. Hi, I have a question:
    How can I set the z-index? My menu can’t be seen and I need to bring menu to front. Thanks

    Reply ↓

  88. I cannot seem to get it to pause on mouse over. I set up the example code and everything works. I set mousePause to true but it makes no difference… hovering over the ticker and it will not stop! Safari version 4.

    Reply ↓

  90. Pingback: Anonymous

  92. First off, great plugin! Have you considered moving the code (including fixes by Abdelaziz/Mike) to GitHub? I think this would be a great opportunity for further improvement.

    Reply ↓

  93. has anyone else noticed this speed up after a while? Its a great little script, but after a while, it starts to take off.

    Reply ↓

    • Same problem here!
      When I´m browsing in Firefox 8.0 in different tabs and switch back to the tab where the plugin is implemented, the ticker goes crazy. After a reload everything works fine again. Have´nt tested it in other browsers jet.

      Has anyone got an idea?

      Reply ↓

  94. Hey – I wanted to add that I could not get the script to work with tweets as well. Here’s my script:

    $(document).ready(function(){
    $(“.tweet”).tweet({
    username: “username”,
    template: “{time}{join}{text} [{retweet_action}]“,
    join_text: “auto”,
    count: 4,
    auto_join_text_default: “we said,”,
    auto_join_text_ed: “we”,
    auto_join_text_ing: “we were”,
    auto_join_text_reply: “we replied to”,
    auto_join_text_url: “we were checking out”,
    loading_text: “Loading tweets…”
    });
    .ajaxStop(function(){
    $(‘.tweet’).vTicker({
    speed: 500,
    pause: 3000,
    animation: ‘fade’,
    mousePause: false,
    showItems: 1
    });
    });
    });

    Reply ↓

  95. Is there a way to count how many li’s there are and NOT animate if showItems <= the number of items?

    Reply ↓

  96. Hi bro! very nice plugin!

    The unique problem that i had was the incompatibility with the jQuery easing plugin.

    The solution was: include the jQuery-UI plugin to overhead the functions that was causing problems :O.

    And now it works :D

    Note: I’m using coda-slider, and some of other plugins together.

    It was only to warning if it is needed :)

    Thank You!

    Reply ↓

  99. I wonder whether it can modified to work with extrenal xml data? Hope it is possible. Let me know.
    Thanks
    krs

    Reply ↓

  100. I can’t get this to work on my site… Ihave error dude to smarty_compiler.class.php and smarty.class.php. It conflate with my php files. hmmmmm helpp?

    Reply ↓

  102. hi, i just implemented your plugin and it works fine, but when i use in “down” direction, the first element apears, but then when the list slides down, again puts the first element on top, so it looks like the the same item is apearing twice. do you know how can i fix this?

    Reply ↓

  104. hmm, i have my 6-7 news items displayed using this script. I have a peculiar problem with spacing between each div. @ one place there is no gap between two divs(items) and on two places there is an extra gap!!! I mean two line brakes?.. The sample works fine.. but when i change it to my set of news items this happens..how do fix this??

    Reply ↓

    • it is because of number of lines.. i have different number of lines in each div.. i tried with simple static text.. all div should have same word count i guess!!

      Reply ↓

  105. Thanks for your precious script! i’ve a question: when I open my home page the script works correctly. after about 1 minute the news begins to rotate faster to cycle endlessly repeating the same phrases multiple times. may depend on what? thank you!

    (if you can check it at http://www.sailinginitaly.it)

    Mario

    Reply ↓

  106. Hi there, first of all. Thank you for the plugin! :)

    I have a problem with the whole thing dissappearing when using jquery to fade in on page load.

    I guess it has something to do with that both use the fade animation, but I dont know how to correct it.

    This is the hide/fade-in code:
    $(‘#something’).hide();
    $(window).load(function(){
    $(‘#something’).hide().fadeIn(2000);
    });

    Do you have any advice? Thank you! :)

    Reply ↓

  109. Pingback: Lecteur RSS défilant - Fuckle.net - Le quotidien des créateurs de site internet.

  110. Pingback: Un lien - moam

  111. It is very nice plugin and i am trying to use in my website. I am using jquery 1.6.2. Is this plugin compatible with that version?

    Reply ↓

  112. Hi, I just wondering, Can If the ticker not looping continuously.. so when it reach the bottom , it will start all over again in beginning .. not continuously..

    So, anyone could help…

    Thanks. :)

    Reply ↓

  113. Hi

    Great plugin.

    I have 1 question.Is there some way to add a scroll that users can move to top/down manual.

    Thanks againt for the great plugin.

    Reply ↓

  114. Can someone please tell me if it is possible ot add arrows on the top and bottom of the plugin and to control the newsfeed manually trough them? If it is not possible (im new to web development) what plugin should i look in to…i basically need one like this only for news(no pictures) feed but i need it to be controlled manually.Thank you.

    Reply ↓

  115. I did a little change to this nice plugin and now the option height 0 do what it is supposed to do.
    /*
    * vertical news ticker
    * Tadas Juozapaitis ( kasp3rito [eta] gmail (dot) com )
    * http://www.jugbit.com/jquery-vticker-vertical-news-ticker/
    * Tony_Option_Height_Zero_3_13_2012
    */
    (function ($) {
    $.fn.vTicker = function (options) {
    var defaults = {
    speed: 700,
    pause: 4000,
    showItems: 3,
    animation: ”,
    mousePause: true,
    isPaused: false,
    direction: ‘up’,
    height: 0
    };

    var options = $.extend(defaults, options);

    moveUp = function (obj2, height, options) {
    if (options.isPaused)
    return;

    var obj = obj2.children(‘ul’);

    var clone = obj.children(‘li:first’).clone(true);

    if (options.height > 0) {
    height = obj.children(‘li:first’).height();
    }

    obj.animate({ top: ‘-=’ + height + ‘px’ }, options.speed, function () {
    $(this).children(‘li:first’).remove();
    $(this).css(‘top’, ’0px’);
    });

    if (options.animation == ‘fade’) {
    obj.children(‘li:first’).fadeOut(options.speed);
    if (options.height == 0) {
    obj.children(‘li:eq(‘ + options.showItems + ‘)’).hide().fadeIn(options.speed).show();
    }
    }

    clone.appendTo(obj);
    };

    moveDown = function (obj2, height, options) {
    if (options.isPaused)
    return;

    var obj = obj2.children(‘ul’);

    var clone = obj.children(‘li:last’).clone(true);

    if (options.height > 0) {
    height = obj.children(‘li:first’).height();
    }

    obj.css(‘top’, ‘-’ + height + ‘px’)
    .prepend(clone);

    obj.animate({ top: 0 }, options.speed, function () {
    $(this).children(‘li:last’).remove();
    });

    if (options.animation == ‘fade’) {
    if (options.height == 0) {
    obj.children(‘li:eq(‘ + options.showItems + ‘)’).fadeOut(options.speed);
    }
    obj.children(‘li:first’).hide().fadeIn(options.speed).show();
    }
    };

    return this.each(function () {
    var obj = $(this);

    /*******Tony_Option_Height_Zero_3_13_2012******
    Change the maxHeight to totalHeight */

    //var maxHeight = 0;
    var totalHeight = 0;

    obj.css({ overflow: ‘hidden’, position: ‘relative’ })
    .children(‘ul’).css({ position: ‘absolute’, margin: 0, padding: 0 })
    .children(‘li’).css({ margin: 0, padding: 0 });

    if (options.height == 0) {
    obj.children(‘ul’).children(‘li’).each(function () {

    /***calculate the total height */

    // if ($(this).height() > maxHeight) {
    // maxHeight = $(this).height();
    // }
    totalHeight += $(this).height();
    });
    /** no need to set indvidual list item to maxHeight*/
    // obj.children(‘ul’).children(‘li’).each(function () {
    // $(this).height(maxHeight);
    // });
    /** set totalHeight */
    //obj.height(maxHeight * options.showItems);
    obj.height(totalHeight);

    }
    else {
    obj.height(options.height);
    }

    var interval = setInterval(function () {
    if (options.direction == ‘up’) {
    /** set height to the first list item */

    // moveUp(obj, maxHeight, options);
    moveUp(obj, obj.children(‘ul’).children(‘li:first’).height(), options);
    }
    else {
    /** set hight to the last list item */

    // moveDown(obj, maxHeight, options);
    moveDown(obj, obj.children(‘ul’).children(‘li:last’).height(), options);
    /****end_Tony_Option_Height_Zero_3_13_2012 *****/
    }
    }, options.pause);

    if (options.mousePause) {
    obj.bind(“mouseenter”, function () {
    options.isPaused = true;
    }).bind(“mouseleave”, function () {
    options.isPaused = false;
    });
    }
    });
    };
    })(jQuery);

    Reply ↓

  120. Absolutely great work! I would like to reiterate several other comments, though, and respectfully request that manual “up/down” arrows be added, to allow the user to manually scroll. Thanks for sharing your work!

    Reply ↓

  121. Pingback: 8 Credits

    • Thanks, Rich. No time for testing, but i’ve included your version in a post, because some people were looking for a manual next and previous interaction for this plugin.

      Reply ↓

  124. First, I want to thank you for this script, it does PRECISELY what I was looking for it to do. I have run into a problem however… I’ve found that http://www.jugbit.com/jquery/jquery.js is conflicting with http://jqueryjs.googlecode.com/files/jquery-1.3.2.js. Now, you are probably asking why am I using two of the same script on one page? The reason is that I am also running supersized.2.0.js, which is a script that changes the background image of the webpage, and that script relies on jquery-1.3.2.js, and for some reason that script will not work its js file is replaced with http://www.jugbit.com/jquery/jquery.js. Vice versa. So I can either have (1.) Nice jquery vticker you made and NO changing background image OR (2.) Nice changing background image and NO jquery vticker you made.

    Any ideas on how to fix this?

    Reply ↓

    • You can’t use 2 jquery framework versions at the same time. So you have to choose which plugin to use or check supersized plugin for a latest version compatibility. Also NEVER use jquery framework from my server (http://www.jugbit.com/jquery/jquery.js), because I can remove it anytime and your site won’t work.

      Reply ↓

  125. Awesome script. Works great on regular PCs.
    Unfortunately during testing it seems to be moving the entire page up on an iPad. Do you happen to have any idea if something can be done about that? Thanks!

    Reply ↓

  127. Firstly thanks for great script.
    I creat contents dynamically. this means that #of item 1 lines can be <= than 'showitems' option. In that case is there any way to stop scrolling?
    Again thanks for great work.

    Reply ↓

  128. I added these lines to stop scrolling if dynamically created ‘li’ item number is less than ‘showitems’ option. It worked. I didnot test with different browsers. I just want to share it.

    var y = ($(“li”).length) – 4;
    if (y <= options.showItems)
    return;

    Reply ↓

  129. The news ticker with image animation “Fade” taking too much time to load the page.
    Please suggest to how to solve this.

    Thanks,
    Suresh

    Reply ↓

  130. Hi,
    this plugin is very nice. But I have one problem. Sometimes my news are very fast and I don’t know why.
    Please my english is not very well, don’t mention it.

    Reply ↓

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>