Avatar of jporter80
jporter80
Flag for United States of America 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?
jQueryJavaScriptAJAX

Avatar of undefined
Last Comment
jporter80

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Jon Norman

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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 :)
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck