asked on

Scroll Javascript Generated Content with JQUERY and Cycle Plugin

I have JSON data (tweets) generated and displayed on my page like this:

http://ijpweb.biz/tweetlist/

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="/tweetlist/script.js"></script>
<script type="text/javascript">
function update(){
    $.getJSON("json.php",function(data) {
      $("#Tweet").html("");
      $.each(data.results, function(i, item) {
    	var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
    	$('#Tweet'+(i>74?"4":i>49?"3":i>24?"2":"")).append(listData);
      });
      setTimeout("update()",600000);
    });
  }
  $(document).ready(function() {
    update();
});
</script>
</head>
<body>
<div class="tweet-row">
<ul id="tweet_scroll1">
	<li id="Tweet"></li>
</ul>
</div>
<div class="tweet-row" id="tweet_scroll2">
<ul>
	<li id="Tweet2"></li>
	<div class="clear"> </div>
</ul>
</div>
<div class="tweet-row" id="tweet_scroll3">
<ul>
	<li id="Tweet3"></li>
	<div class="clear"> </div>
</ul>
</div>
<div class="tweet-row" id="tweet_scroll4">
<ul>
	<li id="Tweet4"></li>
	<div class="clear"> </div>
</ul>
</div>
                                  
</body>
</html>

Open in new window

Which works great..

Now i need to cycle each rows content.. and i was going to use the Cycle Jquery Plugin:

found in this document: http://ijpweb.biz/tweetlist/script.js
Reference: http://jquery.malsup.com/cycle/

But i think the content is generated by Javascript the plugin doesnt recognize the html being generated. Because it only recogonizes the one <li id="Tweet"></li> not the ones that get generated from the JSON data.

Firebug error: [cycle] terminating; too few slides: 1

Example that is not working:

http://ijpweb.biz/tweetlist/index-cycle.php

Updated Javascript

<script type="text/javascript">
function update(){
    $.getJSON("json.php",function(data) {
      $("#Tweet").html("");
      $.each(data.results, function(i, item) {
    	var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
    	$('#Tweet'+(i>74?"4":i>49?"3":i>24?"2":"")).append(listData);
      });
      setTimeout("update()",600000);
    });
  }
  $(document).ready(function() {
    update();
	$('#tweet_scroll1').cycle({ 
        fx:      'scrollDown', 
        speed:    300, 
        timeout:  2000 
});
});
</script>

Open in new window

how can i get the cycle plugin to recognize the javascript generated content?

ASKER CERTIFIED SOLUTION

Jon Norman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jporter80

ASKER

<script type="text/javascript">
function update(){
    $.getJSON("json.php",function(data) {
      $("li[id^=Tweet]").html("");
      $.each(data.results, function(i, item) {
    	var listData = "<div class='tweet'><div class='tweet_user'>" + item.from_user + "</div><div class='tweet_text'>" + item.text + "</div></div>";
    	$('#Tweet'+(i>74?"4":i>49?"3":i>24?"2":"")).append(listData);
      });
      $('#Tweet,#Tweet3').cycle({ 
        fx:      'scrollDown', 
        speed:    300, 
        timeout:  2000
      });
      $('#Tweet2,#Tweet4').cycle({ 
        fx:      'scrollUp', 
        speed:    300, 
        timeout:  2000
      });
      setTimeout("update()",600000);
    });
  }
  $(document).ready(function() {
    update();
});
</script>

Open in new window

That worked thanks!! just a could edits to your code

now i just need to be able to have full width of the page and not hide the tweets have them all scrolling.. just hidden on the overflow of the width of the page :)