Solved

Add row to jquery ticker

Posted on 2014-04-11
3
653 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
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)

746 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

12 Experts available now in Live!

Get 1:1 Help Now