Random Positions / Fade in / Fade Out Jquery for Multiple Tweets
Hi EE,
I'm trying to make a basic tweet like cloud that randomly positions the text which fades in and then fades out after 'xx' secs inside a div container.
I've got so far with creating one tweet to randomly appear but i'm stumped how to get the rest of them thru fading in / fading out and then back round on a loop.
Many Thanks
Ross
I'm trying to make a basic tweet like cloud that randomly positions the text which fades in and then fades out after 'xx' secs inside a div container.
I've got so far with creating one tweet to randomly appear but i'm stumped how to get the rest of them thru fading in / fading out and then back round on a loop.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function rnd(max) { return Math.floor(Math.random()*(max+1)) }
$(document).ready(function() {
// set your twitter id
var user = 'stephenfry';
// using jquery built in get json method with twitter api, return only one result
$.getJSON('http://twitter.com/statuses/user_timeline.json?screen_name=' + user + '&count=20&callback=?', function(data) {
// Div Size Position
var txtmaxwidth = 800;
var txtimgwidth = 600;
// result returned
var tweet = "<div class='tweetitem' style='background:green;float:left;position:absolute;left:"+ rnd(txtmaxwidth - txtimgwidth) +"px;top:"+ rnd(txtmaxwidth - txtimgwidth) +"px' >" + data[0].text; + "</div>"
// process links and reply
tweet = tweet.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
// output the result
$("#container").append(tweet);
$(tweet).fadeIn();
$(tweet).fadeOut(5000);
});
});
</script>
</head>
<body>
<div id="container" style="width:800px; height:600px; position:relative"></div>
</div>
</body>
</html>Many Thanks
Ross
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Can you maybe post what it is you are trying to achieve.
Do you want to cycle through a specific set of tweets i.e. download N tweets and cycle through those or continually refresh?
Do you want to cycle through a specific set of tweets i.e. download N tweets and cycle through those or continually refresh?
ASKER
Basically i'm trying to cycle thru the last 20 tweet starting with newest and make them fade in and out at random positions inside a div container.... trying to make a spooky esque tweet cloud if you like.
ASKER
I've just noticed a fatal flaw with my code,
Open in new window
Bugger!
Also i should have mentioned before... this is my first ever javascript / jquery so i'm pretty much winging it....