Solved

Add row to jquery ticker

Posted on 2014-04-11
3
656 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:sjtinsley83
  • 2
3 Comments
 

Author Comment

by:sjtinsley83
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 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 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 42

Expert Comment

by:Rob Jurd, EE MVE
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

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.
This article discusses how to create an extensible mechanism for linked drop downs.
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…

896 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now