Scroll Javascript Generated Content with JQUERY and Cycle Plugin

jporter80
jporter80 used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Information Systems Manager
Top Expert 2012
Commented:
Hi,

The code appends all the divs you created inside <li id="Tweet"></li>.  Also the animation is trying to be added before the stuff gets added, which is becasue the stuff gets added asynchronously, which is probably a bigger problem.

try:

<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

Author

Commented:
<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 :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial