jQuery Plugin: jQRSS
by Laurie
HTML
<div id="TopFeaturesBlock" class="features-wrapper"></div>
<div id="NewsBlock" class="news-block">
<h2 class="title">
News
<span>
<a href="http://feed.theplatform.com/f/fox-mobile/fullepisodes?range=1-1" class="more">More »</a>
</span>
</h2>
<div class="content"></div>
</div>
CSS
.news-block
{
position: relative;
}
.news-block .title
{
background: rgb(229, 233, 237) url("http://www.defense.gov/images/2.1/background_contentblocktitle1.gif") repeat-x scroll left top;
border: 1px solid #D7DDE3;
clear: both;
font-size: 1.1em;
margin: 0px;
padding: 4px 10px;
position: relative;
}
.news-block .title span
{
border: medium none;
position: absolute;
right: 0px;
top: 3px;
}
.news-block .title a
{
color: #084476;
font-weight: normal;
margin: 0px 10px 0px 0px;
padding: 0px;
text-decoration: none;
vertical-align: middle;
}
.news-block .title .rss
{
}
.news-block .title .rss img
{
border: medium none;
margin: 0px;
padding: 0px;
position: relative;
right: 0px;
top: -1px;
vertical-align: middle;
}
.news-block .title .more
{
}
.news-block .content
{
margin: 0px;
padding: 6px 10px 10px 10px;
position: relative;
}
.news-block .content .expanded
{
clear: both;
border-bottom: 1px solid #CACACA;
margin: 0px 0px .6em 0px;
padding: 0px 0px .6em 0px;
}
.news-block .content .expanded span
{
color: #8d8d8d;
font-size: .9em;
}
.news-block .content .expanded h4
{
font-size: 1.1em;
margin: 0px;
padding: 0px;
}
.news-block .content .expanded h4 a
{
color: #084476;
text-decoration: none;
}
.news-block .content .expanded p
{
margin: 0px;
padding: 0px;
}
.news-block .content .expanded p a
{
color: #084476;
text-decoration: none;
white-space: nowrap;
}
.news-block .content ul
{
font-size: 1.1em;
margin: .6em 0px 0px 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
.news-block .content li
{
background: transparent url("http://www.defense.gov/images/2.1/bullet_square1.gif") no-repeat scroll 0px .43em;
margin: 0px 0px .6em 0px;
padding: 0px 0px 0px 10px;
}
.news-block .content li a
{
color: #084476;
text-decoration: none;
}
...
JavaScript
/*
* Simply copy all the plugin between the comments and
* paste it to a JS file. Then link it in your page like
* any otherjQuery plugin.
* Scroll past plugin to see example use.
* Also, open your browsers console (best in FF and Chrome)
* to see information that is delivered to the console at
* all times for debuging RSS feeds and what not.
* Basic usage:
* $.jQRSS('http://some.feed.xml',
* { options: "see $.jQRSS.defaults for more details },
* function (newsFeed) {
* var doWork = "Callback fires when XML is finished loading";
* });
*/
/* - - - - - - - - - - - - - - - - - - - - - - - - */
/* - BEGIN PLUGIN- */
/* - - - - - - - - - - - - - - - - - - - - - - - - */
(function($) {
if (!$.jQRSS) {
$.extend({
jQRSS: function(rss, options, func) {
if (arguments.length <= 0) return false;
var str, obj, fun;
for (i=0;i<arguments.length;i++) {
switch(typeof arguments[i]) {
case "string":
str = arguments[i];
break;
case "object":
obj = arguments[i];
break;
case "function":
fun = arguments[i];
break;
}
}
if (str == null || str == "") {
if (!obj['rss']) return false;
if (obj.rss == null || obj.rss == "") return false;
}
var o = $.extend(true, {}, $.jQRSS.defaults);
if (typeof obj == "object") {
if ($.jQRSS.methods.getObjLength(obj) > 0) {
o = $.extend(true, o, obj);
}
}
if (str...