2

Hey I want add News Ticker to my rails app. I found this CSS ticker: http://cssdeck.com/labs/css-news-ticker

I don't know why it display only four first posts. Can you help me change this code to display all posts from my table, to retrieve data I'm using .each loop so I think this is not the main problem.

Community
  • 1
  • 1
schadock
  • 59
  • 1
  • 11
  • You cannot use that for your app, because they are using css animation which is applied only for 4 elements... – yjs Dec 18 '15 at 10:31
  • 0% {margin-top: 0;} 25% {margin-top: -26px;} 50% {margin-top: -52px;} 75% {margin-top: -78px;} 100% {margin-top: 0;} if your app have something n elements, you cannot animate with % positions...need to find some other ways to do it.. – yjs Dec 18 '15 at 10:33
  • 1
    Thank @yjs for this explanation. Now I understand how it work. – schadock Dec 18 '15 at 10:35

1 Answers1

1

I've created a dynamic one with the example you gave, I calculate through JS the amount of li and then I calculate what's the % of the keyframe by dividing 100 for the number of li's inside the ul. You can check the example here:

https://jsfiddle.net/erv1b8nh/2/

The js is the following:

var style = document.documentElement.appendChild(document.createElement("style")),
  rule1 = " ticker { 0%   { margin-top:0; }";
  rule2 = " 100% { margin-top:0; } }";

  var n = $('#news li').length;
  var rule3 = "";
  var help = 1;
  var nSpin = (100/n).toFixed(2);
  while(n > 1)
  {
    rule3 = rule3 + " " + nSpin*help + "% { margin-top:" + help*-27 + "px; }";
    help = help + 1;
    n = n - 1;

  }

  rule = rule1 + rule3 + rule2;

if (CSSRule.KEYFRAMES_RULE) { // W3C
  style.sheet.insertRule("@keyframes" + rule, 0);
} else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
  style.sheet.insertRule("@-webkit-keyframes" + rule, 0);
}

Of course then based on the amount of elements you should adjust the animation time. Hope it will help you :)

LS_
  • 6,763
  • 9
  • 52
  • 88