Question

I am pulling RSS feeds in using the following code:

<div id="mcdougaldteens">
<script src="http://feeds.feedburner.com/dcl_mcdougald_teen?format=sigpro" type="text/javascript" ></script>
</div>

This is a feed of upcoming events, and if there are no events the feed displays: “The feed providing these headlines is not available.”

I either want it to change the text to “No more events,” or just to hide the feed altogether if the feed is not pulling in events.

I’ve tried something like this without success:

<script type="text/javascript">
function hideEmptyRSS() {
    var el = document.getElementById("mcdougaldteens");
    if(el.innerHTML == "The feed providing these headlines is not available.")  {
        el.style.display = "none";
    }   else    {
        el.style.display = "block";
    }
}
</script>

I could use JavaScript, PHP, or CSS. Any help would be appreciated.

Answer 1

you missed indexOf on line 3:

function hideEmptyRSS() {
    var el = document.getElementById("mcdougaldteens");
    if (el.innerHTML.indexOf("The feed providing these headlines is not available") > -1) {
        el.style.display = "none";
    }
    else {
        el.style.display = "block";
    }
}

EDIT

ok, i just saw that the script creates another div inside yours.
so you need to search for the text in the new element, but hide yours.
like this:

var el_mine = document.getElementById("mcdougaldteens");
var el_theirs = document.getElementsByClassName('feedburnerFeedBlock');

if (el_theirs[0].innerHTML.indexOf("The feed providing these headlines is not available") > -1) {
    el_mine.style.display = "none";
}
else {
    el_mine.style.display = "block";
}

test it here: http://jsfiddle.net/RASG/DqrT9/