Question

We are using the jQuery vTicker plug-in for a scrolling news feed on the Home page of our Rails app.

How would we go about using this

$('.micropostclass').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
})

We want to display in the jQuery vTicker our microposts from the micropost table of our database, and these microposts will be displayed in the scrolling vTicker feed on the Home page.

How do we implement this jQuery plug-in, and how do we set up our Micropost class/model or controller to work seamlessly with vTicker?

Answer 1

According to vTicker’s example, it’s simply an div containing an unordered list. So somewhere in the view:

<div class="micropostclass">
  <ul>
    <% Micropost.all.each do |mp| %>
      <li><%= mp.whatever_attr_is_content_for_the_object %></li>
    <% end %>      
  </ul>
</div>

Semantically speaking, I don’t like a Model call in the view (Micropost.all), so I’d recommend setting the collection (@microposts) in the controller and using it instead ex: @microposts.each do …

Note, this will put ALL of your micropost records in the html element and it will tick, but the content is static meaning you’re not going to get new posts in there unless the page is refreshed. Furthermore, that list might also be quite large and will cause some performance issues.

If you’re looking for functionality that will tick in realtime, you’ll have to publish and subscribe to real-time events. This railscast covers that topic. I’m also assuming there’s some alternative tickers out there that could handle this automagically, I just don’t know what they are. Good luck.