Solved

Add row to jquery ticker

Posted on 2014-04-11
3
678 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 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 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
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…

687 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