Skip to content

Instantly share code, notes, and snippets.

@IAMIronmanSam
Created July 23, 2012 05:05
Show Gist options
  • Save IAMIronmanSam/3162035 to your computer and use it in GitHub Desktop.
Save IAMIronmanSam/3162035 to your computer and use it in GitHub Desktop.
RSS Feed Reader
body{
background-color: #FFF;
padding-top: 50px;
padding-left: 20px;
padding-right: 20px;
}
.warpper{
background-color: transparent;
width: 5000px;
height: 600px;
margin: 0px auto;
padding: 10px;
overflow: hidden;
}
.postBlock{
float: left;
margin: 10px;
width: 270px;
background-color: transparent;
}
.postBlockInner{
background-color: #EEE;
width: 250px;
height: 250px;
float: left;
margin: 10px;
}
.postBlockInner1{
background-color: #EEE;
width: 250px;
height: 250px;
float: left;
margin: 10px;
}
.plus{
float: right;
}
.close{
float: right;
}​
/*UI Animation*/
var isopened=false;
function CloseClicked() {
$this=$(this);
$this.parent().animate({
width: "250px",
height: "250px",
fontSize: "0.9em"
}, 200);
$this.find(".plus").css('visibility', 'visible');
$this.find(".close").css('visibility', 'hidden');
//$(.this).css('background-color', '#FFF');
}
function PlusClicked() {
isopened= true;
$this=$(this);
$this.animate({
width: "500px",
opacity: 0.4,
fontSize: "1.5em"
}, 500);
$this.css('background-color', '#36c9c9');
$this.css('overflow', 'hidden');
$this.find(".plus").css('visibility', 'hidden');
$this.find(".close").css('visibility', 'visible');
}
//$(function() {
$('.postBlockInner1').click(function() PlusClicked);
$('.close').click(CloseClicked);
//});
/*RSS Feed XML Parser*/
function print(data){
console.log(JSON.stringify(data));
// $("body").append(JSON.stringify(data));
//var feed = JSON.parse(data);
console.log(data.entries[0].title);
console.log(data.entries[0].link);
console.log(data.entries[0].categories);
console.log(data.entries[1].title);
alert(data.entries[0].link);
}
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
}
$(document).ready(function() {
parseRSS("http://arivu.tumblr.com/rss",print);
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="warpper">
<div class="postBlock">
<article class="postBlockInner1">
<img src="http://www.bcmea.com/Images/layout/player_close.png" style="visibility:hidden" alt="Close" text="Close" class="close">
<img src="http://www.searchenginepeople.com/wp-content/uploads/2011/07/google-plus-2.png" alt="Close" class="plus">
<p>Title: jbfg g dfgb afkjshfg <p>Author:ksgkdj sgkjgk <p>Description:ggk sgk kghdgbdfg <p>
</article >
<article class="postBlockInner1">
<img src="close.png" style="visibility:hidden" alt="Close" class="plus">
<img src="plus.png" alt="Close" class="close">
<p>Title: jbfg g dfgb afkjshfg <p>Author:ksgkdj sgkjgk <p>Description:ggk sgk kghdgbdfg <p>
</article >
</div>
<div class="postBlock">
<article class="postBlockInner">
<img src="plus.png" alt="Close" class="close">
</article>
<article class="postBlockInner">
<img src="plus.png" alt="Close" class="close">
</article>
</div>
<div class="postBlock">
<article class="postBlockInner">
<img src="plus.png" alt="Close" class="close1">
</article>
<article class="postBlockInner">
<img src="plus.png" alt="Close" class="close">
</article>
</div>
<div class="postBlock">
<article class="postBlockInner">
<img src="plus.png" alt="Close" class="close">
</article>
<article class="postBlockInner">
<img src="plus.png" alt="Close" class="close">
</article>
</div>
<div class="postBlock">
<article class="postBlockInner">
<img src="plus.png" alt="Close" class="close">
</article>
<article class="postBlockInner">
<img src="plus.png" alt="Close" class="close">
</article>
</div>
<div class="postBlock">
<article class="postBlockInner">
<img src="plus.png" alt="Close" class="close">
</article>
<article class="postBlockInner">
<img src="plus.png" alt="Close" class="close">
</article>
</div>
<div class="postBlock">
<article class="postBlockInner">
<img src="plus.png" alt="Close" class="close">
</article>
</div>
</div>
</body>
</html>​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment