Loop JSON RSS feeds and fadeIn/Out

Loop JSON RSS feeds and fadeIn/Out

by Andrew Pougher

HTML

<div id="snowreport"></div>
<div id="parallelogram"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Racing+Sans+One|Monoton);

body{
background: rgba(147,206,222,1);
background: -moz-linear-gradient(-45deg, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 69%, rgba(73,165,191,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(147,206,222,1)), color-stop(69%, rgba(117,189,209,1)), color-stop(100%, rgba(73,165,191,1)));
background: -webkit-linear-gradient(-45deg, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 69%, rgba(73,165,191,1) 100%);
background: -o-linear-gradient(-45deg, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 69%, rgba(73,165,191,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 69%, rgba(73,165,191,1) 100%);
background: linear-gradient(135deg, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 69%, rgba(73,165,191,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf', GradientType=1 );
}
ul {list-style:none}
h2 {font-family: 'Monoton', cursive;font-size:3em;text-shadow: 3px 3px 3px #FFFFFF;}
li {font-family: 'Racing Sans One', cursive;}

#snowreport {
    position:absolute;
    z-index:0;
        margin-left:35px;
}
#parallelogram {
   width: 91%; 
   height: 175px;
   background: pink;
    position:absolute;
    z-index:-1;
    margin-left:25px;
   /* Skew */
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg);
   transform: skew(20deg);
}

JavaScript

function displaySkiReport (feedResponse) {

    // Get ski report content strings
    var itemString = feedResponse.entries[0].content;
    var publishedDate = feedResponse.entries[0].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
    var html = '<h2>' + feedResponse.entries[0].title + '</h2>';
    html += '<ul>';

    html += '<li>Skiing Status: ' + itemsArray[0] + '</li>';
    // Last 48 Hours
    html += '<li>' + itemsArray[1] + '</li>';
    // Snow condition
    html += '<li>' + itemsArray[2] + '</li>';
    // Base depth
    html += '<li>' + itemsArray[3] + '</li>';

    html += '<li>Ski Report Date: ' + publishedDate + '</li>';

    html += '</ul>';

    $('#snowreport').html(html);    

    }


    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 () {
$("#snowreport").hide();
                    },
    success: function(data) {
      callback(data.responseData.feed);
        $("#snowreport").fadeIn(300);
    }
      });
    }

    $(document).ready(function() {              

        // Ski report
        //parseRSS("http://www.onthesnow.com/michigan/boyne-highlands/snow.rss", displaySkiReport);
    // parseRSS("http://www.onthesnow.com/france/snow.rss", displaySkiReport);
    //    parseRSS("http://www.onthesnow.com/illinois/snow.rss", displaySkiReport);
    

        
       /*
function   changeResort(){
 $('.btn').append("Y");
}


// Demo purposes
setInterval(function() {
    changeResort()
}, 3000);
*/
    
    
    


function randomTxt()
{
    arr = ['france', 'germany', 'illinois', 'belgium',...