Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Arrow onclick load page in Iframe

    I am a javascript newbie. I have a radio website that runs a live stream 24/7. The live stream is loaded in to an iframe named "stream". I only ever have 2 files that show in that iframe. 1 for when the user has the stream on and another for when they turn it off. stream_on.php and stream_off.php

    I also have podcasts on the site and my goal is when the user clicks the .swf object to play the podcast, the live stream in the iframe changes to stream_off.php so that the 2 audios don't overlap each other.

    Here's the code I have so far for the .swf object.

    PHP Code:
    <object type='application/x-shockwave-flash' data='player_mp3_maxi.swf' width='50' height='20' class='blur' onclick="window.open('stream_off.php','stream')\">
    <param name='movie' value='player_mp3_maxi.swf' />
    <param name='bgcolor' value='#666666'>"
    ;
    if (
    $row['location'] == "")
     {
      echo 
    "<param name='FlashVars' value='mp3="$site ."podcasts/"$filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />";
      }
    else
      {
    echo 
    "<param name='FlashVars' value='mp3=http://"$row['location'] . $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />";
       }
    </
    object
    And the code for the iframe. It's default state is stream_on.php since on load I want the stream to start right away. I only need it to change upon clicking of any .swf object on the page.

    PHP Code:
    <iframe src='stream_on.php' id='stream' marginheight='0' width='195' height='110' frameborder='0' scrolling='no'></iframe
    As you can see, I put the onclick in the object tag.

    Is this correct ? Is there a piece of javascript code I am missing ?

    Please Help.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    I don't know if onclick will work in an <object> tag. If not, we can probably fix it with a dummy <div> around the <object>.

    But anyway, the onclick needs to look like this:
    Code:
        onclick="document.getElementById('stream').src='stream_off.php';"
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question

    Tryed it on a div and doesn't work. I'm not sure what the problem is.

    Does it matter that I have already set the src in the iframe tag to stream_on.php ? The javascript won't change it because already set ?

    PHP Code:
    <div onclick="document.getElementById('stream').src='stream_off.php';">
    <?php echo "
    <object type='application/x-shockwave-flash' data='player_mp3_maxi.swf' width='50' height='20' class='blur'>
    <param name='movie' value='player_mp3_maxi.swf' />
    <param name='bgcolor' value='#666666'>"
    ;
    if (
    $row['location'] == "")
     {
      echo 
    "<param name='FlashVars' value='mp3="$site ."podcasts/"$filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />";
      }
    else
      {
       echo 
    "<param name='FlashVars' value='mp3=http://"$row['location'] . $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />";
      }
    echo 
    "   </object>";?>
    </div>
    PHP Code:
    <iframe src='stream_on.php' name='stream' id='stream' marginheight='0' width='195' height='110' frameborder='0' scrolling='no'></iframe
    To see the page I am talking about go to www.lifestylewebradio.net

    Iframe I want to change is located at the top right corner. Scroll down the page a little to see podcasts. The play button is the <object> I am trying to use the onclick on.

    If this doesn't work, is there another way to accomplish this goal using a different language other than javascript ??
    Last edited by ansonb; 03-18-2012 at 06:22 PM. Reason: forgot link

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Okay, look here:

    http://stackoverflow.com/questions/1...r-flash-object

    So I assume you have control of the player_mp3_maxi.swf code? If so, just add the external call as suggested in the top post in that thread.

    The only other way I can think to do this is to have an <iframe> WITHOUT the <object> in it. Have an icon or whatever in that <iframe>, only. Then, when the div is clicked on, you replace the <iframe> contents with the <object> (presumably by altering the src of the <iframe> at the same time you change the other <iframe> to "off".

    In other words, you set it up so only one <iframe> at a time can have active content. Clicking on *ANY* <iframe> changes all the other ones to an "off" state.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Here, this indeed works. Only problem is that you click on "Play 1" or "Play 2" and it brings up the appropriate player (turning off the others) but then you have to click on the play button again to start the sound. I'm sure you can fix the SWF player to start up in play mode, instead.

    **** demo.html ****
    Code:
    <html>
    <body>
    <iframe id="play1" src="play_off.html?1" width="100" height="100" frameborder="1" scrolling="no"></iframe>
    <br/>
    <iframe id="play2" src="play_off.html?2" width="100" height="100" frameborder="1" scrolling="no"></iframe>
    <br/>                         
    <iframe src='http://www.lifestylewebradio.net/stream_on.php' 
            name='stream' id='stream' marginheight='0' width='196' height='110' frameborder='1' scrolling='no'></iframe>
    </body>
    </html>
    **** play_off.html ****
    Code:
    <html>
    <body>
    <div id="show" style="width: 100px; height: 100px;" onclick="playit()">PLAY</div>
    <script type="text/javascript">
    var which = parseInt(location.search.substring(1));
    document.getElementById("show").innerHTML = "Play " + which;
    
    function playit()
    {
        parent.document.getElementById("stream").src = "http://www.lifestylewebradio.net/stream_off.php";
        for ( var i = 1; i < 999; ++i )
        {
            var f = parent.document.getElementById("play"+i);
            if ( f == null ) break;
            if ( i != which )
            {
                f.src = "play_off.html?" + i;
            }
        }
        location.href = "play_on" + which + ".html";
    }
    </script>
    </body>
    </html>
    **** play_on2.html ****
    Code:
    <html>
    <body>
    <object type='application/x-shockwave-flash' data='http://www.lifestylewebradio.net/player_mp3_maxi.swf' width='100' height='100' class='blur'>
         <param name='movie' value='http://www.lifestylewebradio.net/player_mp3_maxi.swf' />
         <param name='bgcolor' value='#666666' />
         <param name='FlashVars' value='mp3=http://www.lifestylewebradio.net/podcasts/IMS031112.mp3&showslider=0&showstop=1&autoload=1&bgcolor1=330066&width=50' />
    </object>
    </body>
    </html>
    (play_on1.html is identical except for the actual podcast URL, of course).

    You would also need to modify your stream_off.php code to do similar to the play_off.html JavaScript. That is, turn off all the other players.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    ansonb (03-18-2012)

  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts
    No, I do not have access to .swf code. Someone else created it and I only set parameters in the <object> tag to play my mp3 files.

    The object is not in an iframe. The only iframe I have is the one playing the live stream at the top of the page. That iframe is what I need to change on clicking of the <object> Nothing in or around the object will change. Just the iframe at the top of the page playing the live stream.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Try my demo. You'll catch on. It *does* work, except for the need to click twice.

    It does require creating one <iframe> per "play" point, but that's easy enough to do if you are using PHP to build the page(s).

    Again, if there is a way to tell the SWF file to "start playing as soon as you are loaded" then even the two-click problem is solved.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Oh, nevermind that last post.

    I get it now. Thanks for the help.

  • #9
    New Coder
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts
    It does work. Thank you. And yes, I am able to turn on autoplay so it only requires 1 click.

    I have a few questions though.

    Why on demo.html do you have 2 iframes, Play 1 and Play 2 ??

    And how do I get it to go the other way. When restarting live stream to stop any podcasts ??

  • #10
    New Coder
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Nevermind. I think I got it. A different iframe for each podcast. And use similar code as play_off.html in stream_off.php.

    You are a master coder. And very helpful.

    Thank You.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Quote Originally Posted by ansonb View Post
    Nevermind. I think I got it. A different iframe for each podcast. And use similar code as play_off.html in stream_off.php.
    You got it. I know it's a bit different that what might be ideal, but at least it works. I tried it in Firefox and MSIE, by the by.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts
    OK Problem. Tried modifying my stream_off.php but it is not working.

    Is not stopping podcast and returning to live stream. Also I'm not sure where my listen live button would go in the code.

    Here is the code I have for stream_off.php with modifications I tried to make.

    PHP Code:

    <?php

    echo "
    <div align='center' class='stream' id='stream' onclick='stream()'>LIVE</div>
    <script type='text/javascript'>
    var which = parseInt(location.search.substring(1));
    document.getElementById(\"stream\").innerHTML = \"<img src='images/listen_live.gif' alt='Listen Live' />\";

    function stream()
    {
        parent.document.getElementById(\"play\").src = \"http://www.lifestylewebradio.net/play_off.php\";
        for ( var i = 1; i < 999; ++i )
        {
            var f = parent.document.getElementById(\"stream\"+i);
            if ( f == null ) break;
            if ( i != which )
            {
                f.src = \"stream_off.php?\" + i;
            }
        }
        location.href = \"stream_on\" + which + \".php\";
    }
    </script>

    <link href='stream.css' rel='stylesheet' type='text/css' />

    <p><script type='text/javascript' src='http://cdn.voscast.com/resources/?key=ae75496083dc550e224cba430a2bb9f9&c=playlist'></script>
    <br><a href='http://s4.voscast.com:7294/listen.pls'>External Players</a>
    <br><a href='http://tunein.com/tuner/?StationId=129942&' target='0'>Web Tuner</a>"
    ;

    ?>
    Here is my original stream_off.php

    PHP Code:

    echo "
    <link href='stream.css' rel='stylesheet' type='text/css' />
    <div align='center' class='stream'>

    <p><a href='http://www.lifestylewebradio.net/stream_on.php'><img src='images/listen_live.gif' alt='Listen Live' /></a>

    <p><script type='text/javascript' src='http://cdn.voscast.com/resources/?key=ae75496083dc550e224cba430a2bb9f9&c=playlist'></script>
    <br><a href='http://s4.voscast.com:7294/listen.pls'>External Players</a>
    <br><a href='http://tunein.com/tuner/?StationId=129942&' target='0'>Web Tuner</a>

    </div>"
    ;

    ?> 
    I'm sure it is right in front of my face. I am just not seeing it.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    WHY would you use PHP echo to output JavaScript code that never changes???

    Just move it outside of the <?PHP .... ?> tags and keep the coding simpler.

    Oh...and there's no reason to change the contents of the <div id="stream">. After all, you are going to be replacing the entire <iframe> contents!

    I'd suggest this code for "stream_off.php". Except that I see no reason at all to make it a PHP file, as you aren't using *ANY* PHP controls or variables here. Why not just make it "stream_off.html"?? Won't hurt to be PHP, but there's certainly no reason to use <?PHP ... ?> tags.

    Note that <iframe> contents *ARE* web pages, so they should be built the same way you would build any web page. With <html><head><body> tags and with sub-tags in their proper sections.

    Code:
    <html>
    <head>
    <script type='text/javascript'>
    function stream()
    {
        // turn off all the "playN" <iframe> streams...even if they are already off
        for ( var i = 1; i < 999; ++i )
        {
            var f = parent.document.getElementById("play"+i);
            if ( f == null ) break; // quit when no more 
            f.src = "play_off.html?" + i;
        }
        // the *LAST* thing we do is replace this <iframe> with the stream_on code
        location.href = "stream_on.php";
    }
    </script>
    <link href='stream.css' rel='stylesheet' type='text/css' />
    </head>
    <body>
    <div align='center' class='stream' id='stream' onclick='stream()'>LIVE</div>
    <p>
    <script type='text/javascript' 
           src='http://cdn.voscast.com/resources/?key=ae75496083dc550e224cba430a2bb9f9&c=playlist'>
    </script>
    <br>
    <a href='http://s4.voscast.com:7294/listen.pls'>External Players</a>
    <br>
    <a href='http://tunein.com/tuner/?StationId=129942&' target='0'>Web Tuner</a>
    </body>
    </html>
    Last edited by Old Pedant; 03-19-2012 at 01:57 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New Coder
    Join Date
    Feb 2012
    Posts
    36
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I echo the javascript with php because i need php to pass the variables for pod_id, location, and filename to the other files. In the example you gave me it only showed the link to the one podcast. To avoid making a seperate play1.html, play2.html, play3.html etcetera for all 150 podcasts, with php I can create just 1 and pass the variables with $_GET from the main page which runs the mysql query containing all pod information.

    Not sure how to do this ?

    I got it working with the html you provided and it works wonderfully.

    I said I was a javascript newbie. And now i got myself all confused.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Quote Originally Posted by ansonb View Post
    I echo the javascript with php because i need php to pass the variables for pod_id, location, and filename to the other files. In the example you gave me it only showed the link to the one podcast. To avoid making a seperate play1.html, play2.html, play3.html etcetera for all 150 podcasts, with php I can create just 1 and pass the variables with $_GET from the main page which runs the mysql query containing all pod information.
    Makes perfect sense. Okay, so just use <?PHP....?> around *ONLY* that section of the code where you use those PHP variable.

    I was only basing my comments on the code you showed, and in that code you don't show the use of any $xxx PHP variables.

    Presumably you mean this part:
    Code:
    <?PHP
    echo "<p><script type='text/javascript' src='http://cdn.voscast.com/resources/?key=ae75496083dc550e224cba430a2bb9f9&c=playlist'></script>
    <br><a href='http://s4.voscast.com:7294/listen.pls'>External Players</a>
    <br><a href='http://tunein.com/tuner/?StationId=129942&' target='0'>Web Tuner</a>";
    ?>
    What changes in there? The value for key= and the value for StationId= and what else?

    Anyway, there's clearly no reason to use PHP code in the code from the <html> tag through to the <body> tag.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •