Frage

I'm trying to cycle links form feed displayed as < LI > items.

My code looks more or less like this:

<html>
<head>
<style>
ul.tcycle  {list-style-type:none;max-width: 540px; overflow:hidden;}
ul.tcycle li{display: inline;width: 100%;overflow:hidden;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://sdepold.github.io/jquery-rss/src/jquery.rss.js"></script>
<script src="http://malsup.github.io/jquery.tcycle.js"></script>
<script>
  jQuery(function($) {
  $("#rss-feeds").rss("http://news.google.com/?output=rss", {
    limit: 4,
    layoutTemplate: '<ul id=entries class=tcycle data-fx=scroll data-timeout=2000>{entries}</ul>',
    entryTemplate: '<li width=540><a href="{url}" title="{title}" class="url go" rel="bookmark external">{title}</a> </li>'
}).show();
      })
</script>

</head>
<body>

<div id="rss-feeds"></div>

</body>
</html>

Items are displayed property, but they don't cycle. When list is created manually (not from jquery-rss) cycling is working fine.

Where and what am I doing wrong?

War es hilfreich?

Lösung 2

I decided to switch to vTicker, thanks to Rich Hollis I can share following code:

<!DOCTYPE html>
<html>
  <head>
    <title>test-vticker</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://sdepold.github.io/jquery-rss/src/jquery.rss.js"></script>
    <script src="http://richhollis.github.com/vticker/downloads/jquery.vticker.min.js?v=1.14"></script>

    <script>
      $(function() {
        $("#example-vticker").rss("http://news.google.com/?output=rss", {
          limit: 4,
           entryTemplate: '<li><a href="{url}">{title}</a></li>',
           success: function() {
            $('#example-vticker').vTicker('init', {speed: 400, 
              pause: 1000,
              showItems: 1,
              padding:4});
           }
        });
        $('#next').click(function() { 
          $('#example-vticker').vTicker('next', {animate:false});
        });
        $('#prev').click(function() { 
          $('#example-vticker').vTicker('prev', {animate:false});
        });
      });
    </script>
  </head>
  <body>
    <div id="example-vticker" class="example"></div>
    <button id="prev">Prev</button><button id="next">Next</button>
  </body>
</html>

Andere Tipps

Try changing to this:

<script>
  $(document).ready(function() {
  $("#rss-feeds").rss("http://news.google.com/?output=rss", {
    limit: 4,
    layoutTemplate: '<ul id="entries" class="tcycle" data-fx="scroll" data-timeout="2000">{entries}</ul>',
    entryTemplate: '<li width:"540"><a href="{url}" title="{title}" class="url go" rel="bookmark external">{title}</a> </li>'
}).show();
      });
</script>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top