Skip to content

Instantly share code, notes, and snippets.

@steinbring

steinbring/PocketJoe.html

Last active January 4, 2016 15:29
Show Gist options
  • Save steinbring/8641489 to your computer and use it in GitHub Desktop.
Save steinbring/8641489 to your computer and use it in GitHub Desktop.
Download ZIP
This is meant to be a very basic jQuery/HTML/CSS RSS reader. It uses YQL to turn the XML feed into a JSON feed that the browser's origin limits are alright with.
Raw
PocketJoe.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Pocket Joe</title>
<!-- jQuery CDN -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- jQuery UI CDN -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- A jQuery UI CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<script type="text/javascript">
function getRSSFeed(feed){
// Build the YQL query
var qryRSS = 'select * from rss where url='+'"'+feed+'"';
// Initiate the YQL query
$.getJSON("http://query.yahooapis.com/v1/public/yql",
{
// These are the settings for your API call
q: qryRSS,
format: "json"
},
// Take the data you got from the YQL server and output it to the screen. The variable "data" holds the JSON you got back from the YQL server.
function(data) {
// Just bother with the last 10 entries within the JSON feed
for (i=0; i<10; i++)
{
// Output the title attribute
$('#accordion').append('<h3>'+data.query.results.item[i].title+'</h3>');
// Output the description, using the description attribute.
$('#accordion').append('<div>'+data.query.results.item[i].description+'</div>');
}
// Trigger the accordian
$(function() {
$( "#accordion" ).accordion();
});
});
};
// Test it with Steinbring.net's RSS Feed
getRSSFeed('http://steinbring.net/feed/');
</script>
<div id="title">Pocket Joe</div>
<div id="accordion">
</div>
<style type="text/css">
#title{
width: 100%;
text-align: center;
font-size: 24px;
font-weight: bold;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment