vinitkumar · October 30, 2012 07:21
diff --git a/json2.html b/json2.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8"/>
 		<title>Json by file</title>
 		<link  rel="stylesheet" href="style.css">
 	</head>
 	<body>

 		<h1>Vinit Kumar's FaceBook Friends</h1>
 		
 		<div id="placeholder"></div>
 		<button id="shuffle">Shuffle</button>
 		<script src="jquery.js"></script>
 		<script>
 		//http://jsfiddle.net/qp7uy/10/
 		var thumbUrl = "http://graph.facebook.com/{uid}/picture";

 		function getRandomizer(bottom, top) {
 		return function() {
 		return Math.floor( Math.random() * ( 1 + top - bottom ) ) + bottom;
 					        }
 					}
 		$.getJSON('data.json',function(data){
 		var j=0;
 		var output = '';
 		 
 		var roll= getRandomizer(0,700);
 		j = roll();
 		if(j > 640)
 		{ j = 640;}
 		for (var i=j;i<j+40;i++){
 			
 			var uid = data.data[i].id;
 			var user = data.data[i].name;
 			var url  = thumbUrl.replace('{uid}',uid);
 		 	var d='<img src="'+url+'" '+'alt="'+user+'" '+'class="iam'+'">';                                  	      output += d;
 			//console.log(output);
 		}
 		$("#placeholder").append(output);
 		
 		$(document).ready(function()  {
 			$('.iam').hover(function(){
 				var alt= $(this).attr('alt');
 				$('<p class="tooltip"></p>')
 				.text(alt)
 				.appendTo('body')
 				.fadeIn('slow');
 				}, function() {
 				$(this).attr('alt',$(this).data('tipText'));
 				$('.tooltip').remove();
 				 }).mousemove(function(e) {
                		var mousex = e.pageX + 20; //Get X coordinates
                		var mousey = e.pageY + 10; //Get Y coordinates
                		$('.tooltip')
                	.css({ top: mousey, left: mousex })
        		});
 		});	
 					
 				$("img").click(function(){
 				$("#placeholder").toggle();
 				//Jquery animation
 				//ajax request to the server
 				//Content script work
 			
 			});
 		});

 		$("#shuffle").click(function(){
 		$("#placeholder").fadeOut('slow').load('json2.html').fadeIn("slow");
 		},4000);		
 		
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8"/>
	<title>Json by file</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>

	<h1>Vinit Kumar's FaceBook Friends</h1>

	<div id="placeholder"></div>
	<button id="shuffle">Shuffle</button>
	<script src="jquery.js"></script>
	<script>
	//http://jsfiddle.net/qp7uy/10/
	var thumbUrl = "http://graph.facebook.com/{uid}/picture";

	function getRandomizer(bottom, top) {
	return function() {
	return Math.floor( Math.random() * ( 1 + top - bottom ) ) + bottom;
	}
	}
	$.getJSON('data.json',function(data){
	var j=0;
	var output = '';

	var roll= getRandomizer(0,700);
	j = roll();
	if(j > 640)
	{ j = 640;}
	for (var i=j;i<j+40;i++){

	var uid = data.data[i].id;
	var user = data.data[i].name;
	var url = thumbUrl.replace('{uid}',uid);
	var d='<img src="'+url+'" '+'alt="'+user+'" '+'class="iam'+'">'; output += d;
	//console.log(output);
	}
	$("#placeholder").append(output);

	$(document).ready(function() {
	$('.iam').hover(function(){
	var alt= $(this).attr('alt');
	$('<p class="tooltip"></p>')
	.text(alt)
	.appendTo('body')
	.fadeIn('slow');
	}, function() {
	$(this).attr('alt',$(this).data('tipText'));
	$('.tooltip').remove();
	}).mousemove(function(e) {
	var mousex = e.pageX + 20; //Get X coordinates
	var mousey = e.pageY + 10; //Get Y coordinates
	$('.tooltip')
	.css({ top: mousey, left: mousex })
	});
	});

	$("img").click(function(){
	$("#placeholder").toggle();
	//Jquery animation
	//ajax request to the server
	//Content script work

	});
	});

	$("#shuffle").click(function(){
	$("#placeholder").fadeOut('slow').load('json2.html').fadeIn("slow");
	},4000);

	</script>
	</body>
	</html>