?
Solved

Add row to jquery ticker

Posted on 2014-04-11
3
Medium Priority
?
716 Views
Last Modified: 2014-04-25
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
0
Comment
Question by:Steve Tinsley
  • 2
3 Comments
 

Author Comment

by:Steve Tinsley
ID: 39995405
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
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 39996000
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
 
LVL 43

Expert Comment

by:Rob
ID: 39996009
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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month16 days, 16 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question