RSS feed

Change the heading colour on load

HTML

<script src="http://jquery-plugins.net/FeedEk/FeedEk.js"></script>
<div class="MessageList">
     <h2>Message List</h2>

    <div id="divRss"></div>
    <input type="text" class="rssInput" />
    <input type="button" value="add new rss" class="addRss" />
    <p class="channel"></p>
    <p class="channelAmount"></p>
</div>
<div> <span class="channelList"></span>

</div>
<div class="viewMessageBlock"></div>

CSS

body {
    background-color: #f5f5f5;
}
.rssChannelList {
}
.showInMessageList {
    padding-left: 5%;
    padding-right: 5%;
    color: #555;
    background-color: #9f9;
}
.showInMessageList:hover {
    background-color: #3f3;
}
.delete {
    padding-left: 5%;
    padding-right: 5%;
    color: #555;
    background-color: #f55;
}
.delete:hover {
    background-color: yellow;
}
.feedEkList {
    width:450px;
    list-style:none outside none;
    background-color:#f5f5f5;
    border:1px solid #333;
    padding:4px 6px;
    color:#333;
}
.feedEkList li {
    border-bottom:1px solid #D3CAD7;
    padding:5px;
}
.feedEkList li:last-child {
    border-bottom:none;
}
.itemTitle a {
    font-weight:bold;
    color:#ff7899;
    text-decoration:none
}
.itemDate {
    font-size:11px;
    color:#AAAAAA;
}
.messageList {
}
.channelList {
}
.viewMessageBlock {
}

JavaScript

$(function () {

    var channel = [
        'http://rss.cnn.com/rss/edition.rss',
        'http://cosmo.intoday.in.feedsportal.com/c/34156/f/618495/index.rss?http://cosmo.intoday.in/cosmo_rss.jsp?catId=2428',
        'http://www.nasa.gov/rss/dyn/breaking_news.rss'];
    var currentChannelIndex = channel[channel.length - 1]; //Displays in Message list the last one.

    var displayChanges = function () {
        $(".channelAmount").text("There are currently " + channel.length + " channels in your rss list."); //Displays current amount of channels.
    }

    var displayChannelList = function () { //Prints channel list.
        $(".channelList").empty(); //Prevents double-printing old values.
        for (i in channel) {
            $(".channelList").append("<p id=" + channel[i] + "><span class='channelName'>" + channel[i].slice(7, 20) + "...</span> <span class='MessagesAmount'></span><span class='authorsAmount'></span><span class='showInMessageList'>show</span><span class='delete'>delete</span></p>");
        }
    }

    $(function () {
        $(".delete").on("click", function () {
            var item = channel.indexOf($(this).parent().attr('id'));
            channel.splice(item, 1);
            update();
        });
    });




    $(function () { //Display chosen channel Messages in the Message list.
        $(".showInMessageList").on("click", function () {
            currentChannelIndex = channel[1];
            updateMessageList();
        });
    });
    
    var updateMessageList = function(){
    $('#divRss').FeedEk({
        FeedUrl: currentChannelIndex, //Channel displayed in the MessageList. Default - last added.
        MaxCount: 3,
        ShowDesc: true,
        ShowPubDate: true,
        DescCharacterLimit: 60,
        TitleLinkTarget: '_blank',
    });
    };
    
    
    var update = function () {
        displayChannelList();
        displayChanges();
    }
    
    $(".addRss").click(function () { //Add input value to rss array.
       ...