How to check whether a div contains specific text?

**k12onos** · 06-18-2012, 10:35 AM

Hi,

I'm using an embedded radio from caster.fm in my site's radio page. I also have a chatbox, but I want to show the chatbox only if the radio is online.

The radio is embedded using javascript, and the script will return "Radio Offline" in this manner if the radio is offline:

Code:

document.write('Radio Offline');

So, I was thinking of putting the radio script inside a DIV, and use another javascript (at where I want to put my chatbox) to check whether the content of the div returns 'Radio Offline', and print out the chatbox code if it can't find Radio Offline text (which means radio is online and chatbox is OK to be printed out) and viceversa.

Can anyone help me or give me some clue on how to do this? Any help would be greatly appreciated.

Thanks

**ApacheTech** · 06-18-2012, 10:46 AM

Depending on how the script works (*hint*Postyourscript*hint*), this might be a lot easier than you think.

First of all, set up the page exactly how you want it to look when the radio is online.

Next, set the CssClass for the DIV tag that the ChatBox is in to display:none; if this starts messing up the formatting of the page, change this for visibility:hidden; which will hide the DIV but keep the spacing.

Next, in the section of the JavaScript that handles what happens when the RadioPlayer is online, add a line to the script that changes the Css of the ChatBox DIV to display:block | inline; (dependent of how you want it shown) or visibility:visible;.

In practice you'll only be adding two lines of code. The theory goes: On page load, assume the player is offline and hide the div as default. If the player is online, show the div.

**k12onos** · 06-18-2012, 11:22 AM

Hi ApacheTech,

Thank you for your reply.

Unfortunately, the javascript embed code is controlled by caster.fm, it's actually a php file, which from what I see will return a javascript code depending whether the radio is set online or offline in the caster.fm's user control panel.

(Radio online: it will return the actual radio embed code, Radio offline: it will return document.write('Radio Offline');)

The javascript embed is something like this:

Code:

<script type="text/javascript" src="http://www.caster.fm/embed.php?uid=xxxxx"></script>

That is why I think the way to determine whether the radio is offline/online is to check for the 'Radio Offline' text that it returns when the radio is offline.

Is there any other way that suits this condition?

**ApacheTech** · 06-18-2012, 12:01 PM

Could you give us a link to your site? Just so I can get an idea of the layout, and how the code is implemented.

**k12onos** · 06-18-2012, 01:32 PM

Would a simple page do?

The actual page is in a member area and I haven't published it, but this page demonstrates how the chatbox and the radio is embedded just like the actual page.

**ApacheTech** · 06-18-2012, 04:48 PM

From what I've been able to get from the embed page, this working example renders correctly. I've annotated the Javascript so it "should" be easy to follow.

HTML Code:

<!DOCTYPE html>
<html>
<head id="pageHead">
    <!-- Page Title-->
    <title>Caster.FM API Hack</title>
    <!-- Meta Block -->
    <meta content="text/html; charset=iso-8859-1" http-equiv="content-type" />
    <meta content="Caster.FM API Hack" name="description" />
    <meta content="caster.fm, api, hack" name="keywords" />
    <meta content="all,index,follow" name="robots" />
    <meta content="noodp" name="msnbot" />
    <meta content="global" name="distribution" />
    <!-- JavaScript Scripts-->
    <script type="text/javascript">
    //<![CDATA[

        /*
        * Checks whether the radio is online and modifies the page respectively.
        */
        function isRadioOnline() {

            /*
            * Depending on how the Radio Player is embedded onto the page,
            * the injected <object> will have different ids.
            *
            * Embedded as Flash         =  'player_api'
            * Embedded as MediaPlayer   =  'MediaPlayer1'
            * Embedded as HTML5         =  'jp_container_1'
            */
            var EmbeddedAs = {
                Flash: 'player_api',
                MediaPlayer: 'MediaPlayer1',
                HTML5: 'jp_container_1'
            };

            /*
            * Is the radio online?
            *
            * If the injected element exists on the page then the radio
            * is online, if it doesn't, the code below is run.
            *
            * NOTE:
            *
            * Check to see how your script embeds the player and change
            * the if statement to match your own settings.
            *
            * @see EmbeddedAs namespace
            */
            if (!document.getElementById(EmbeddedAs.Flash)) { // Player Offline

                /*
                * Locate relevent DIVs on the page.
                */
                var divChatBox = document.getElementById('chatbox');
                var divRadio = document.getElementById('radio');

                /*
                * Clean divRadio and add custom message.
                */
                divRadio.innerHTML = '<p>Sorry, we are not currently broadcasting, please try again soon.</p>';

                /*
                * Clean divChatBox.
                *
                * Choose one of two methods:
                */
                //divChatBox.innerHTML = '';          // Removes all HTML from within the DIV.
                divChatBox.style.display = 'none';    // Makes the DIV invisible.

            } else { // Radio is online.

                /*
                * Optional area to write any scripts to run when the player is online.
                */

            }
        }

        /*
        * Launch isRadioOnline() function when the page is loaded.
        */
        window.addEventListener('load', isRadioOnline, false);

    //]]>
    </script>
</head>
<body>
    <div id="page">
        <div id="chatbox">
            <object width="550px" height="550px" data="http://info.info-info-info-info-info.info/list.swf?r=295021&amp;l=www"
                type="application/x-shockwave-flash">
                <param value="http://info.info-info-info-info-info.info/list.swf?r=295021&amp;l=www"
                    name="movie" />
                <param value="#ffffff" name="bgcolor" />
                <param value="always" name="allowscriptaccess" />
                <embed width="550" height="550" src="http://info.info-info-info-info-info.info/list.swf?r=295021&amp;l=www"
                    type="application/x-shockwave-flash" />
                <video width="550px" height="550px">
                </video>
            </object>
        </div>
        <div id="radio">
            <script src="http://www.caster.fm/embed.php?uid=30978" type="text/javascript" />
        </div>
    </div>
</body>
</html>

Unfortunately, I haven't been able to get the UID of a currently online radio station, so I haven't had a chance to test the code, other than to switch the operator on the if statement to mimic a true result. This may be a lot easier if it also injects the surrounding "player" DIV that the standard subdomain.caster.fm uses. That way, you wouldn't need the EmbeddedAs part.

Caster.FM currently has an API in the pipeline but it hasn't been made public yet. Once the API is out, it should be alot easier to do this stuff.

There is another method, you could use a ServerSide language like PHP or ASP.NET to grab the information with a Shoutcast/Icecast API.

ASP.NET: http://shoutcastnet.codeplex.com/
PHP: http://devshed.excudo.net/scripts/ph...internet+radio

**k12onos** · 06-19-2012, 12:27 AM

Hi,

Thank you very much for your detailed reply and instructions, I really appreciate it.

With the annotations, I understand how the javascript works. But now I am wondering whether javascripts can read into the printed out content of another javascript code or only the content of the page as we see in "View Source"? Because it seems that the script cannot find the radio player div ID, which is "_player" even though it is there. I'm suspecting that because the printing out of the radio is done using embedded external javascript, it won't be able to read it?

EDIT: It works now, I think I forgot to do hard refresh when I was testing it out previously.

Thank you very very much for your help.

**ApacheTech** · 06-19-2012, 01:13 PM

Could you please keep me updated with how well Cast.FM works? I'm a Web Developer for an online gaming radio station (A sister station to New Eden Radio) and we're currently using Shoutcast and plugging it into our page with the PHP Shoutcast API listed above. Caster.FM looks like it could be a good service, but I'd need to make sure it was stable before porting the stream over. I'm going to wait until the Caster.FM API comes out to make my decision.

One thing to be careful of. I was looking through the support forums for Caster.FM and it seems a fair few accounts have been IP Banned for majorly exceeding their allotted bandwidth.

Thread: How to check whether a div contains specific text?

Thread Tools

Search Thread

How to check whether a div contains specific text?

The Following User Says Thank You to ApacheTech For This Useful Post:

The Following User Says Thank You to ApacheTech For This Useful Post:

The Following User Says Thank You to ApacheTech For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions