RSS Feed JQuery Test ('-' * 20) x4 examples: RSS Feed display within web page using JQuery with and without the jquery-rss plugin.
A Pen by Siôn J. Lewis on CodePen.
<html> | |
<head> | |
<title>RSS Feed Test</title> | |
<!--<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script> | |
<script type='text/javascript' src="//sdepold.github.io/jquery-rss/src/jquery.rss.js"></script>--> | |
</head> | |
<body> | |
<div class="show"> | |
<h2>SJL.RSSFeed.getRssJQery()</h2> | |
<div id="content01"></div> | |
<span><i>getRssJQery() will error with cross-domain calls...</i></span> | |
</div> | |
<div class="show"> | |
<h2>SJL.RSSFeed.getRssPluginSimple()</h2> | |
<div id="content02"></div> | |
<span><i>Avoid cross-domain error with jquery-rss plug-in.</i></span> | |
</div> | |
<div class="show"> | |
<h2>SJL.RSSFeed.getRssPluginFormated01()</h2> | |
<div id="content03"></div> | |
<span><i>Avoid cross-domain error with jquery-rss plug-in.</i></span> | |
</div> | |
<div class="show"> | |
<h2>SJL.RSSFeed.getRssPluginFormated02()</h2> | |
<div id="content04"></div> | |
<span><i>Avoid cross-domain error with jquery-rss plug-in.</i></span> | |
</div> | |
<div class="show"> | |
<br/> | |
<a href="https://github.com/sdepold/jquery-rss" target="_blank">jquery-rss</a> | |
<br/> | |
<br/> | |
</div> | |
</body> | |
</html> |
RSS Feed JQuery Test ('-' * 20) x4 examples: RSS Feed display within web page using JQuery with and without the jquery-rss plugin.
A Pen by Siôn J. Lewis on CodePen.
namespace = function (ns_string, obj) { | |
var parts = ns_string.split('.'), parent = window, pl, i; | |
for (i = 0, pl = parts.length; i < pl; i++) { | |
parent = parent[parts[i]] = parent[parts[i]] || (i == pl - 1 && obj ? (typeof obj == 'function' ? (obj() || {}) : obj) : {}); | |
} | |
return parent; | |
}; | |
namespace("SJL.RSSFeed", function () { | |
var self = {}; | |
self.url = "http://newsdesk4-feeds.moreover.com/feed/ae0af20fe9854d1b.rss?n=5&img=1&ext=sc"; | |
self.getAjaxRss = function () { | |
$.support.cors = true; // Needed this to allow for cross site scripting. | |
var jqxhr = $.get(self.url, function() { | |
var msg = $('#content01').html() + "success <br/>"; | |
$('#content01').html(msg); | |
}) | |
.done(function() { | |
var msg = $('#content01').html() + "second success <br/>"; | |
$('#content01').html(msg); | |
}) | |
.fail(function() { | |
var msg = $('#content01').html() + "error <br/>"; | |
$('#content01').html(msg); | |
}) | |
.always(function() { | |
var msg = $('#content01').html() + "finished <br/>"; | |
$('#content01').html(msg); | |
}); | |
jqxhr.always(function() { | |
var msg = $('#content01').html() + "second finished <br/>"; | |
$('#content01').html(msg); | |
}); | |
}; | |
self.getRssPluginSimple = function () { | |
$('#content02').rss(self.url).show(); | |
}; | |
self.getRssPluginFormated01 = function () { | |
var options = { | |
limit: 5, | |
ssl: true, | |
entryTemplate: '<li><a href="{url}">{title}</a><br/>{author}, {date}<br/>{shortBodyPlain}</li>', | |
effect: 'slideFastSynced', | |
error: function(){ | |
throw new Error("Error: url does not link to RSS-Feed"); | |
} | |
}; | |
$('#content03').rss(self.url, options).show(); | |
}; | |
self.rssClick = function(id) { | |
$('#rssBody' + id).toggle("fast", function() { | |
// Animation complete. | |
}); | |
}; | |
self.getRssPluginFormated02 = function () { | |
var options = { | |
limit: 5, | |
ssl: false, | |
entryTemplate: '<li><a href="#" onclick="JavaScript:SJL.RSSFeed.rssClick({index});return false;">{title}</a>' + | |
'<ul>' + | |
//'<li>{source}</li>' + | |
'<li>{date}</li>' + | |
'</ul>' + | |
'<div id="rssBody{index}" style="display:none;border-style:none;">{shortBodyPlain}</div>' + | |
'</li>' | |
}; | |
$('#content04').rss(self.url, options).show(); | |
}; | |
return self; | |
}); | |
$(function () { | |
SJL.RSSFeed.getAjaxRss(); | |
SJL.RSSFeed.getRssPluginSimple(); | |
SJL.RSSFeed.getRssPluginFormated01(); | |
SJL.RSSFeed.getRssPluginFormated02(); | |
}); |
div { | |
border-style: solid; | |
border-width: 1px; | |
} | |
.hide { | |
border-style: none; | |
display:none; | |
} | |
.show { | |
border-style: none; | |
display:block; | |
} |