Loop JSON RSS feeds and fadeIn/Out
Loop JSON RSS feeds and fadeIn/Out
by Andrew Pougher
HTML
<div id="snowreport"></div>
CSS
div {border-bottom:1px solid #ddd}
#snowreport div {
opacity:0;
filter: alpha(opacity=0);
position: absolute;
left: 23%;
z-index: 200;
font:11px arial;
}
JavaScript
function displaySkiReport (feedResponse) {
var skilength = feedResponse.entries.length
var myreport = []
for(var i=0;i<skilength;i++) {
// Get ski report content strings
var itemString = feedResponse.entries[i].content;
var publishedDate = feedResponse.entries[i].publishedDate;
// Clean up strings manually as needed
itemString = itemString.replace("Primary: N/A", "Early Season Conditions");
publishedDate = publishedDate.substring(0,17);
// Parse ski report data from string
var itemsArray = itemString.split("/");
//Build Unordered List
myreport.push(
'<div><span><strong>' + feedResponse.entries[i].title + '</strong></span>'
+ '<span>Skiing Status: <strong>' + itemsArray[i] + '<strong></span>'
// Last 48 Hours
+ '<span>' + itemsArray[1] + '</span>'
// Snow condition
+ '<span>' + itemsArray[2] + '</span>'
// Base depth
+ '<span>' + itemsArray[3] + '</span>'
+ '<span>Report Date: <strong>' + publishedDate + '</strong></span>'
+'</div>');
}
$('#snowreport').append(myreport);
var j = 0;
var delay = 2000; //millisecond delay between cycles
function cycleThru() {
var jmax = $("#snowreport div").length - 1;
$("#snowreport div:eq(" + j + ")")
.animate({
"opacity": "1.0"
}, 400)
.animate({
"opacity": "1"
}, delay)
.animate({
"opacity": "0"
}, 400, function () {
(j == jmax) ? j = 0 : j++;
cycleThru();
});
};
cycleThru();
}
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',
beforeSend: function ()...