Add row to jquery ticker

I want to create a fullscreen ticker which shows tweets when they come in.
I have worked on the twitter api and am fine with that.

The issue I need help with is using a jquery ticker framework to display them as they come in.

I want to use Query Advanced News Ticker (http://risq.github.io/jquery-advanced-news-ticker/index.html).

I have a simple example scrolling around 6 li points. I want to create a simple function that adds a row of data to the top and slide the ticker down every time it is called.

SIMPLE EXAMPLE:

<script>

var nt;

$(document).ready(function(){

  nt = $('.newsticker').newsTicker({
      row_height: 80,
      max_rows: 2,
      speed: 600,
      direction: 'up',
      duration: 4000,
      autostart: 1,
      pauseOnHover: 0
  });
  
});



function addRow() {
  htmlData = "<li>NEW</li>";
  nt.newsticker('add',htmlData,true);
}

</script>

<style>
.newsticker li {
  overflow: hidden;
  height: 80px;
  padding: 10px;
  line-height: 30px;
  list-style: none;
  font-size: 24px;
  text-align: left;
  border-bottom: 1px dotted #ccc;
}
</style>

<ul class="newsticker" style="border:1px solid red;">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
    <li>55555</li>
    <li>66666</li>
</ul>

Open in new window


I understand it has an ADD method but I cant get it working.
Could someone help.
Thanks
Steve
Steve TinsleyAsked:
Who is Participating?
 
RobConnect With a Mentor Owner (Aidellio)Commented:
This code works... I suspect it's just you weren't using a Capital T :)

http://jsbin.com/geloj/1/edit

function addRow() {
  htmlData = "<li>NEW</li>";
  nt.newsTicker('add',htmlData);
}

Open in new window

0
 
Steve TinsleyAuthor Commented:
The other thing I just released is that it keeps scrolling. I want it to scroll through the list but not loop. Then scroll to the NEW rows when they are added.
0
 
RobOwner (Aidellio)Commented:
As for looping, that's by design so unfortunately you won't be able to stop it looping without changing the code

This is from the code:
this.$el.children('li:last').detach().prependTo(this.$el).css('marginTop', '-' + this.options.row_height + 'px')

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.