Learn how to use jQuery at the Blog

ChromaTweet « visit

  • Added 6 months ago
  • 97 Lines of Code shown
  • 0 Links of Interest
http://chromatweet.com
This is my Source Code and I don't want to show it here
View Source Code only (as overlay)
// That code snippet belongs to ChromaTweet - http://chromatweet.com

var tweets;
var current=0;
var grid = [];
var cols;
var rows;
var block_size = 70;
var block_pad = 12;

google.setOnLoadCallback(function() {
	//setup our grid space
	cols = Math.floor(($(document).width()-3) / block_size);
	rows = Math.floor(($(document).height()-3) / block_size);
	for(i=0;i<rows*cols;i++)
		grid[i] = true;
	//here we go
	getMore();
	showAnother();
});

function getMore() {
	$.getJSON('tweets.php', function(data) {
		tweets = data;
		setTimeout(getMore, 60000);
	});
}

function showAnother() {
	if((typeof tweets) =='object') {
		current = ++current % tweets.length;
		create(tweets[current]);
	}
	//destroy one if we're getting too crowded
	var count=0;
	for(g in grid)
		if(grid[g]) count++;
	if (count / grid.length < .07)
		destroy($('#tweets li:not(.dying):lt(2)'));
	//and loop!
	setTimeout(showAnother, 900);
}

function create(text) {
	var box = [];
	//find a space
	var x=Math.floor(Math.random()*grid.length);
	var a=(x-1) % grid.length; //to prevent endless recurrsion
	while(grid[x]==false && x!=a)
		x= ++x % (grid.length);
	if(x==a) return;
	
	var w = Math.floor(Math.random()*5)+2;
	var width = 0;
	var height = 1;
	//expand x
	for(i=0;i<w;i++) {
		if((x % cols)+i >= cols || !grid[x+i]) //check  we havent exceded the width of the grid or overlapped another block
			break;
		box[x+i] = 1;
		width++;
	}
	//expand y
	var h = Math.floor(Math.random()*3)+2;
	for(i=1;i<h;i++) {
		if((Math.floor(x / cols))+i >= rows) //check we havent exceded the height of the grid
			break;
		var valid=true;
		for(j=0;j<=width;j++) //check we haven't overlapped another block
			if(!grid[x+(i*cols)+j])
				valid=false;
		if(!valid) break;
		for(j=0;j<=width;j++)
			box[(x+(i*cols))+j] = 1;
		height++;
	}
	//remove our blocks from the grid
	for(b in box)
		grid[b]=false;
	//draw box
	li = $('<li>'+text+'</li>');
	li.data('box', box)
	li.css({left: (x % cols)*block_size+'px', top: Math.floor(x / cols)*block_size+'px', width: (width*block_size)-block_pad+'px', height:(height*block_size)-block_pad+'px'});
	li.fadeIn(2000);
	$('#tweets').append(li);
	//set font size
	var f=35;
	while(li.children().height() > height*block_size-block_pad && f >5)
		li.css({'font-size' : --f+'px'});
	li.css({visibility: 'visible'}).children().css({overflow: 'hidden', height: li.height()+'px'})
}

function destroy(li) {
	li.addClass('dying').fadeOut(1000, function() {
		for(b in $(this).data('box'))
			grid[b]=true;
		$(this).remove();
	});	
}