JQuery RSS

From My Wiki
Jump to: navigation, search
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing testing testing</title>

<style type="text/css">

    h3 { margin-bottom: 5px; }
    div.updated { color: #999; margin-bottom: 5px; font-size: 0.8em; }

        body {
        font-family: Georgia, Times, serif;
     font-size: 16px;
     word-wrap: break-word;
   line-height: 1.5;
         background-color:#131313;
         color: #878787;
}
p {

         text-align:left;
}
h1 {
color: rgb(197,197,197);
font-family: Georgia, Times, serif;
font-size: 24px;
font-weight: normal;padding-bottom: 0;
text-rendering: optimizeLegibility;
text-align:left;
 }
a {
text-decoration: none;
}
a:link {color:#878787;}      /* unvisited link */
a:visited {color:#878787;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

</style>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="build/dist/jquery.jfeed.pack.js"></script>

<script type="text/javascript">
//jQuery(function() {
$( document ).ready( function() {
	//set div height
	var height =$(window).height();
	$('div').css("height",height-100);
    jQuery.getFeed({
        url: 'proxy.php?url=http://rss.nzherald.co.nz/rss/xml/nzhrsscid_000000002.xml',
        success: function(feed) {

            jQuery('#result').append('<h2>'
            + '<a href="'
            + feed.link
            + '">'
            + feed.title
            + '</a>'
            + '</h2>');

            var html = '';
            html += '<div id="all"> ';
            for(var i = 0; i < feed.items.length; i++) {

                var item = feed.items[i];

                html += '<h3>'
                + '<a href="../../test/legem.php?u='
                + escape(item.link)
                + '">'
                + item.title
                + '</a>'
                + '</h3>';

                html += '<div class="updated">'
                + item.updated
                + '</div>';

                //html += '<div>'
                //+ item.description
                //+ '</div>';
            }
            html += '</div>';
            jQuery('#result').append(html);
        }
    });
$('#all a').live('click',function() {
	var a_href = $(this).attr('href');
	$('#content').empty();
	$('#content').append("Loading...");
//	alert(a_href);
        $('#content').load(a_href);
        return false;
    });
});

</script>
</head>
<body>
<h1>testing testing testing</h1>
<div id="port" style="width:100%"><div id="result" style="float:left;width:360px;height:100%;overflow:auto;">
</div>
<div id="content" style="float:left; width:720px;height:100%;overflow:auto;padding-left:50px;">d
</div>
<div id="about" style="float:left; width:720px;height:100%;overflow:auto;padding-left:50px;">
<pre>
About:
written in jquery and a bit of php. used ssh + vim.
current feed is the New Zealand Herald World news feed (for testing purposes).

what this does is grabs the feed using jquery. clicking on an item brings up the content it is linked to (none of this partial excerpt often found in feeds). the original is parsed using diffbot (diffbot.com) to identify only the article text, no images or navigation or ads. unfortunately this doesn't always work with really short articles. the clean text is then loaded into the middle div using jquery.

jquery is used a lot here so feel free to view source to see how this works.

inspired by the layout of qz.com
and ipad apps.

Things to do:
Minor:
put in ipad(ios) style scroll bars
key board navigation?
add in infinite scrolling.
prefetching?
window sizing?

Major:
Ability to add/remove other rss feeds.
Accounts setup.
Theme customization


</body> </html>