Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

/

PHP - form, if, echo, and the JW FLV Media Player

6 replies [Last post]

Hello!

Well...let's start:

I'm a newbie at PHP...tried out some guides and forums but no good.

I want to get a form where you have a drop down menu which selects the playlist and a box where you can type in the episode number (and a submit button). That leads to the PHP file which uses ifs. Meaning, "if $episode = 2, echo episode2.flv"

Let me put it in code form:

<html><body>
<h4>Title Here</h4>
<form action="process2.php" method="post">
<select name="playlists">
<option>Playlist1</option>
<option>Playlist2</option>
<option>Playlist3</option>
</select>
Episode: <input name="episode" type="text" />
<input type="submit" />
</form>
</body></html>

That takes me to process2.php:

<?php
$playlists
= "Playlist1";

if (

$episode == "1" ) {
    echo
"E1!<br />";
}
if (
$episode == "2" ) {
    echo
"E2!<br />";
}
if (
$episode == "3" ) {
    echo
"E3!<br />";
}
echo
"Future back link here</a>";
?>

For that, it works PERFECTLY

But...I want to replace the "E#!"s with this:

<script type="text/javascript" src="swfobject.js"></script> <div id="player">PLaylist# - Episode#</div> <script type="text/javascript">var so = new SWFObject('mediaplayer.swf','mpl','480','272','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('height','272');
so.addVariable('width','480');
so.addVariable('file','playlist#episode#.flv');
so.addVariable('logo','watermark.png');
so.addVariable('searchbar','false');
so.addVariable('showstop','true');
so.addVariable('link', 'dllink.flv');
so.addVariable('showdownload','true');
so.write('player');
</script>

So together it's like this:

<?php
$playlists
= "Playlist1";

if (

$episode == "1" ) {
    echo
"<script type="text/javascript" src="swfobject.js"></script> <div id="player">PLaylist# - Episode#</div> <script type="text/javascript">var so = new SWFObject('mediaplayer.swf','mpl','480','272','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('height','272');
so.addVariable('width','480');
so.addVariable('file','episode1.flv');
so.addVariable('logo','watermark.png');
so.addVariable('searchbar','false');
so.addVariable('showstop','true');
so.addVariable('link', 'dllink.flv');
so.addVariable('showdownload','true');
so.write('player');<br />"
;
}
if (
$episode == "2" ) {
    echo
"E2!<br />";
}
if (
$episode == "3" ) {
    echo
"E3!<br />";
}
echo
"Future back link here</a>";
?>

But that gives me an error code where the first echo line is.

Any ideas on how I can fix this?

Edit:

Also, I've noticed something about MP4 videos. Can I just replace the FLV file url in my current code with an MP4 file url and have it play correctly? Or is there some other way that MP4 files play through the JW Media Player?

Do this a different way.

Instantiate the player once.

Load a file or playlist with a drop-down menu or a form entry box.

See the code referenced in my last post in this thread: http://willswonders.myip.org:8085/php/FamilyTime_faded_xmlHTTP.html for a drop-down menu (it's at the bottom of the page code).

See the code referenced here: http://willswonders.myip.org:8085/php/Basher.html for a text entry box.

Ok then:

I LOVED that first link you gave me (http://willswonders.myip.org:8085/php/FamilyTime_faded_xmlHTTP.html)! However, I'm having trouble making it run.

I have 4 files:

FamilyTime_faded_xmlHTTP.html
gslb.fadednode.js
swfobject.js
mediaplayer.swf

When I open FamilyTime_faded_xmlHTTP.html, all I get is the mediaplayer.swf thing in the loading stage and the dropdown menu. If I select anything in the dropdown menu, the bar at the bottom (where if you roll over a link it gives the url down there) says "Error on page".

Could you please give me step by step instructions on how I can make it work? It would really make my day <3.

Here's the code for everything that is being run (I won't give the swfobject.js and the mediaplayer.swf ones because I'm sure you know what they look like) :

FamilyTime_faded_xmlHTTP.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

  <head>

    <title>FamilyTime - Math Problems</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">
      div.playercontainer
      {
        position:                       absolute;
        top:                               100px;
        left:                              100px;
        width:                             320px;
        height:                            301px;
        z-index:                             100;
      }

      div.table
      {
        position:                       absolute;
        top:                               260px;
        left:                              100px;
        width:                             320px;
        height:                             80px;
        background-color:            transparent;
        z-index:                             101;
      }

      div.title
      {
        position:                       relative;
        float:                              left;
        width:                             320px;
        height:                             15px;
        text-align:                       center;
        font-size:                           8pt;
        color:                           #FFFFFF;
        font-family:                       Arial;
      }

      img.image
      {
        position:                       relative;
        float:                              left;
        width:                              70px;
        height:                             55px;
        padding:                             5px;
        cursor:                          pointer;
      }

      form.theFormId
      {
        position:                       relative;
        float:                              left;
        top:                               450px;
        left:                              130px;
        width:                              60px;
        height:                             55px;
      }
    </style>

    <script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript" src="gslb.fadednode.js"></script>

    <!-- inline script #1 Faded Div code -->
    <script type="text/javascript">
      // From: http://www.galasoft.ch/myjavascript/WebControls/faded-node.html

      var oOptions =
      {
        iMinimum:             0,
        iMaximum:            75,
        iDeltaFade:          10,
        iTimerMilliseconds:  10,
        bRemoveAfterFade: false
      };

      var oFadedNode1;

      function initFadedImage()
      {
        oFadedNode1 = new gslb.FadedNode(document.getElementById('table'), oOptions);
        oFadedNode1.fade();
      };
    </script>

    <!-- inline script #2 AJAX code -->
    <script type="text/javascript">
       var currentXML;

      function sendRequest(url, callback, postData)
      {
        currentXML = url;

//alert('sendRequest: ' + currentXML);

        var req = createXMLHTTPObject();
        if(!req)
        {
          return;
        }
        var method = (postData) ? "POST" : "GET";
        req.open(method, url, true);
        req.setRequestHeader('User-Agent', 'XMLHTTP/1.0');
        if(postData)
        {
          req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        }
        req.onreadystatechange = function ()
        {
          if(req.readyState != 4)
          {
            return;
          }
      if((req.status != 200) && (req.status != 304))
          {
            return;
          }
          callback(req);
        }
        if (req.readyState == 4)
        {
          return;
        }
        req.send(postData);
      };

      var XMLHttpFactories =
      [
        function () {return new XMLHttpRequest()},
        function () {return new ActiveXObject("Msxml2.XMLHTTP")},
        function () {return new ActiveXObject("Msxml3.XMLHTTP")},
        function () {return new ActiveXObject("Msxml4.XMLHTTP")},
        function () {return new ActiveXObject("Msxml5.XMLHTTP")},
        function () {return new ActiveXObject("Msxml6.XMLHTTP")},
        function () {return new ActiveXObject("Microsoft.XMLHTTP")}
      ];

      function createXMLHTTPObject()
      {
        var xmlhttp = false;
        for (var i = 0; i < XMLHttpFactories.length; i++)
        {
          try
          {
            xmlhttp = XMLHttpFactories[i]();
          }
          catch (e)
          {
            continue;
          }
          break;
        }
        return xmlhttp;
      };

      function handleRequest(req)
      {
        xmlDoc = req.responseXML.documentElement;
        if(initialLoad < 1)
        {
          // to purge the playlist later
          var j = thisMovie('mpl').getLength();

          // load the recommendation XML as a playlist
          loadPlaylist('recommendation');

          // purge the playlist
          for (i = 0; i < j; i++)
          {
            thisMovie('mpl').removeItem(0);
          }

          // start the player on the first item
          thisMovie('mpl').sendEvent('playitem', 0);
          loadingNewPlaylist = false;
          initialLoad = 1;

        // load the recommendations to be used when paused/stopped or at the end of the current video
        //sendRequest('http://www.nnpstv.com/FamilyTime/playlists/' + getrecoFilename(1), handleRequest);

// Will-2 remove this and uncomment the previous line of code
sendRequest('http://willswonders.myip.org:8085/php/' + getrecoFilename(1), handleRequest);

        }
        else
        {
          showTags('recommendation', 'table');
        }
      };
    </script>

    <!-- inline script #3 Recommendations code -->
    <script type="text/javascript">
      var loadingNewPlaylist = false;
      var playItem;
      var recoFile;
      var monthS = {Jan:1, Feb:2, Mar:3, Apr:4, May:5, Jun:6, Jul:7, Aug:8, Sep:9, Oct:10, Nov:11, Dec:12};
      var monthN = {1:'Jan', 2:'Feb', 3:'Mar', 4:'Apr', 5:'May', 6:'Jun', 7:'Jul', 8:'Aug', 9:'Sep', 10:'Oct', 11:'Nov', 12:'Dec'};

      function showTags(aTag, aPlace)
      {
        function getTag(tag)
        {
          var tmp = '';
          xx = x[i].getElementsByTagName(tag);    
          try
          {
            tmp = xx[0].firstChild.data;
          }
          catch(er)
          {
            tmp = '';
          }
          return(tmp);
        };

        var xx;
        var x   = xmlDoc.getElementsByTagName(aTag);
        var txt = '<div id="title" class="title">Recommendations...</div>';

        for (i = 0; i < x.length; i++)
        {
          txt += '<img class="image" src="' + getTag("image") + '" onmouseover="displayTitle(\'' + getTag("title") + '\')" onmouseout="displayTitle(\'Recommendations...\')" onclick="loadReco(\'' + i + '\'); return false;" title="Click to Play" />';
        }

        tA = document.getElementById('table');
        tA.innerHTML = txt;
      };

      function loadPlaylist(aTag)
      {
        function getTag(tag)
        {
          var tmp = '';
          xx = x[i].getElementsByTagName(tag);    
          try
          {
            tmp = xx[0].firstChild.data;
          }
          catch(er)
          {
            tmp = '';
          }
          return(tmp);
        };

        var xx;
        var x = xmlDoc.getElementsByTagName(aTag);

        for (i = 0; i < x.length; i++)
        {
          thisMovie('mpl').addItem({author:getTag("creator"), title:getTag("title"), image:getTag("image"), file:getTag("link")});
        }
      };

      function displayTitle(title)
      {
        tI = document.getElementById('title');
        tI.innerHTML = title;
      };

      function loadSelectedPlaylist(playList)
      {
        loadingNewPlaylist = true;
        initialLoad = 0;
        if(currentState == 2)
        {
          // may want to make this a stop instead, because with just a pause,
          // the playing movie continues to download and you end up with two simultaneous downloads
          // however, a pause looks nicer than the black screen you get with a stop ???
          thisMovie('mpl').sendEvent('playpause');
        }
        sendRequest(playList, handleRequest);
      };

      function getrecoFilename(back)
      {
        // get month and year substrings of current file "http://www.nnpstv.com/FamilyTime/playlists/mtVideo_Apr08.xml"
        var monthXML = currentXML.substring((currentXML.indexOf('mtVideo') + 8), (currentXML.indexOf('mtVideo') + 11));
        var yearXML  = currentXML.substring((currentXML.indexOf('mtVideo') + 11), (currentXML.indexOf('mtVideo') + 13)) * 1;

//alert('Month: ' + monthXML + ':' + monthS[monthXML] + ' Year: ' + yearXML);

        // if Jan:1 go to previous year and make month Dec:12
        if(monthS[monthXML] < 2)
        {
          var previousMonth = 12;
          yearXML = yearXML - 1;
        }
        else
        {
          var previousMonth = monthS[monthXML] - 1;
        }

//alert('previousMonth: ' + monthN[previousMonth] + ':' + previousMonth + ' Year: ' + yearXML);

        // if year < 8 and month < 13 then use next month instead - this sets the earliest year & month that are available
        if((yearXML < 8) && (previousMonth < 13))
        {
          previousMonth = previousMonth + 2;
          if(previousMonth > 12)
          {
            previousMonth = previousMonth - 12;
            yearXML = yearXML + 1;
          }
        }

//alert('previousMonth: ' + monthN[previousMonth] + ':' + previousMonth + ' Year: ' + yearXML);

        // add a zero onto the year so it is two characters: '03'
        yearXML = yearXML + '';
        if(yearXML.length < 2)
        {
          yearXML = '0' + yearXML;
        }

        // assemble filename
        recoFile = 'mtVideo_' + monthN[previousMonth] + yearXML + '.xml';

        return recoFile;
      };

      // load the full XML file and start the selected item
      function loadReco(Item)
      {
        oFadedNode1.fade();
        played = false;

        // to purge the playlist later
        var j = thisMovie('mpl').getLength();

        // load the recommendation XML as a playlist
        loadPlaylist('recommendation');

        // purge the playlist of any previous items
        for (i = 0; i < j; i++)
        {
          thisMovie('mpl').removeItem(0);
        }

        // play the selected recommendation
        thisMovie('mpl').sendEvent('playitem', Item);

        // load a different set of recommendations at the end of the recommended video (second previous month)
      //sendRequest('http://www.nnpstv.com/FamilyTime/playlists/' + getrecoFilename(2), handleRequest);

// Will-3 remove this and uncomment the previous line of code
sendRequest('http://willswonders.myip.org:8085/php/' + getrecoFilename(2), handleRequest);

      };
    </script>

    <!-- inline script #4 JavaScript API code -->
    <script type="text/javascript">
      var currentState =    -1;
      var currentItem  =    -1;
      var played       = false;
      var initialLoad  =    -1;
      // file to load on startup
    //var file = 'http://www.nnpstv.com/FamilyTime/playlists/mtVideo_Apr08.xml'

// Will-4 remove this and uncomment the previous line of code
var file = 'http://willswonders.myip.org:8085/php/mtVideo_Apr08.xml';

      function getUpdate(typ, pr1, pr2, pid)
      {
        if(typ == 'time')
        {
          // set the "before the end of the video" display time here
          if((pr1 > 0) && (pr2 == 1))
          {
            oFadedNode1.unfade();
          }
        }
        else if(typ == 'state')
        {
          currentState = pr1;

// this code was used to load the first playlist and start it playing
// it is no longer used because the intoductory video is loaded instead
//        if((pr1 == 0) && (initialLoad < 0))
//        {
//          loadXMLDoc(file);
//          initialLoad = 0;
//        }

          if((pr1 == 0) && (played) && !(loadingNewPlaylist))
          {
            oFadedNode1.unfade();
          }
          if(pr1 == 2)
          {
            oFadedNode1.fade();
            played = true;
          }
        }
      };

      function gid(element)
      {
        return document.getElementById(element);
      };

      function thisMovie(movieName)
      {
        return document.getElementsByName(movieName)[0];
      };
    </script>

    <!-- inline script #5 JW FLV Media Player code (using swfobject v2.0) -->
    <script type="text/javascript">
      function loadPlayer()
      {
        var flashvars =
        {
          width:                  '320',
          height:                 '342',
          displayheight:          '240',
          file:                   'playlist_Familytime.xml',
          autostart:              'true',
          bufferlength:           '3',
          shuffle:                'false',
          repeat:                 'false',
          showstop:               'true',
          enablejs:               'true',
          javascriptid:           'mpl',
          searchbar:              'false',
          smoothing:              'false'
        };

        var params =
        {
          allowscriptaccess:      'always',
          menu:                   'true',
          allowfullscreen:        'true',
          swliveconnect:          'true',
          wmode:                  'opaque'
        };

        var attributes =
        {
          id:                     'mpl',
          name:                   'mpl'
        };

        swfobject.embedSWF('mediaplayer.swf', 'player', '320', '342', '9.0.124', false, flashvars, params, attributes);
      };
    </script>

  </head>

  <body onload="initFadedImage(); loadPlayer();">

    <div id="playercontainer" class="playercontainer">
      <a id="player" class="player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">You need to update your Flash Player to see these videos.</a>
    </div>
    <div id="table" class="table">
    </div>

    <!--control flash player using dropdown menu -->
    <!--
    <form id="theFormId" class="theFormId" name="theForm">
      <select name="vid1" class="blue2" id="vid1" style="width: 240px" onchange="loadSelectedPlaylist(this.options[this.selectedIndex].value)">
        <option>Choose a Video Segment</option>
        <option value="http://www.nnpstv.com/FamilyTime/playlists/mtVideo_Apr08.xml">April 2008</option>
        <option value="http://www.nnpstv.com/FamilyTime/playlists/mtVideo_Mar08.xml">March 2008</option>
        <option value="http://www.nnpstv.com/FamilyTime/playlists/mtVideo_Feb08.xml">February 2008</option>
        <option value="http://www.nnpstv.com/FamilyTime/playlists/mtVideo_Jan08.xml">January 2008</option>
        <option value="http://www.nnpstv.com/FamilyTime/playlists/mtVideo_Dec07.xml">December 2007</option>
      </select>
    </form>
    -->
    <!--end of dropdown menu-->

<!-- Will-5  remove this and uncomment the previous block of dropdown menu code-->
<form id="theFormId" class="theFormId" name="theForm">
  <select name="vid1" class="blue2" id="vid1" style="width: 240px" onchange="loadSelectedPlaylist(this.options[this.selectedIndex].value)">
    <option>Choose a Video Segment</option>
    <option value="http://willswonders.myip.org:8085/php/mtVideo_Apr08.xml">April 2008</option>
    <option value="http://willswonders.myip.org:8085/php/mtVideo_Mar08.xml">March 2008</option>
    <option value="http://willswonders.myip.org:8085/php/mtVideo_Feb08.xml">February 2008</option>
    <option value="http://willswonders.myip.org:8085/php/mtVideo_Jan08.xml">January 2008</option>
    <option value="http://willswonders.myip.org:8085/php/mtVideo_Dec07.xml">December 2007</option>
  </select>
</form>

  </body>

</html>

gslb.fadednode.js

/* <gslb_version version="V1.0.4" /> */
/* Copyright © GalaSoft Laurent Bugnion 2007 */

//*****************************************************************************
//* gslb.fadednode.js
//*****************************************************************************
//* Control name            : FadedNode
//* Tested Targets          : Firefox 2, Internet Explorer 7
//* Language/Compiler       : ECMAScript V3
//* Author                  : Laurent Bugnion (LBu)
//* Created                 : 05.01.2007
//*****************************************************************************
//* Description: see constructor
//* Last Base Level: BL0003
//*****************************************************************************

//*****************************************************************************
//* Imports *******************************************************************
//*****************************************************************************

//*****************************************************************************
//* Constructor ***************************************************************
//*****************************************************************************

// Create namespace
if ( !window.gslb )
{
  window.gslb = {};
}

// ----------------------------------------------------------------------------
/// <summary>
/// Allows transitioning smoothly from one opacity level to an other for
/// DOM nodes. Supports CSS filter (IE) and CSS opacity (Mozilla, Firefox).
/// </summary>
/// <param name="nNode" type="Node">The DOM node to which the transitions
/// will be applied</param>
/// <param name="oOptions" type="Object">An Options object, constructed using literal notation.
/// All values are optional.
/// <br />iMinimum: The minimum level of opacity applied to the Node. Default: 0%.
/// <br />iMaximum: The maximum level of opacity applied to the Node. Default: 100%.
/// <br />iDeltaFade: The amount added or removed to the opacity on each iteration
/// during transitions (fading/unfading). Default: 1%.
/// <br />iTimerMilliseconds: The duration of one iteration (in milliseconds)
/// during transition (fading/unfading). Default: 10 milliseconds.
/// <br />bRemoveAfterFade: If true, when the node reaches the minimum level of
/// opacity, it will be removed (ie display : none), so that underlying controls
/// can be actioned. This is mostly useful when the minimum level is 0. To enable
/// this functionality, the Node must have CSS display set in its style. Default: true.
gslb.FadedNode = function( nNode, oOptions )
{
  if ( !nNode
    || !nNode.style == null
    || ( !nNode.style.filter == null
      && !nNode.style.opacity == null ) )
  {
    throw "Impossible to create faded node, please check the documentation";
  }

  //***************************************************************************
  //* Attributes **************************************************************
  //***************************************************************************

  this.m_nNode = nNode;
 
  this.m_bFading = false;
  this.m_bUnfading = false;
  this.m_iStart = gslb.FadedNode.getOpacity( nNode );
  this.m_iFadeFactor = this.m_iStart;

  // Options
 
  this.m_iMinimumFadeFactor = 0;
  this.m_iMaximumFadeFactor = 100;
  this.m_iDeltaFade = 1;
  this.m_iTimer = 10;
  this.m_bRemoveAfterFade = false;
 
  this.setOptions( oOptions );
}

//*****************************************************************************
//* Enums *********************************************************************
//*****************************************************************************

//*****************************************************************************
//* Constants *****************************************************************
//*****************************************************************************

/// <summary type="string">
/// This class's name.
/// </summary>
gslb.FadedNode._NAME = "gslb.FadedNode";
/// <summary type="string">
/// This class's version.
/// </summary>
gslb.FadedNode._VERSION = "V1.0.4";
/// <summary type="string">
/// This class's date.
/// </summary>
gslb.FadedNode._DATE = "17.11.2007";

//*****************************************************************************
//* Static attributes *********************************************************
//*****************************************************************************

//*****************************************************************************
//* Static methods ************************************************************
//*****************************************************************************

// Utilities ------------------------------------------------------------------

// ----------------------------------------------------------------------------
/// <summary>
/// Utility method, gets the opacity level from a given DOM Node.
/// </summary>
/// <param name="nNode" type="Node">A DOM node with either opacity (Mozilla,
/// Firefox) or filter (IE) set.</param>
/// <return type="int">The current level of opacity set in CSS in %.</return>
gslb.FadedNode.getOpacity = function( nNode )
{
  if ( !nNode
    || !nNode.style
    || ( !nNode.style.filter
      && !nNode.style.opacity ) )
  {
    return 100;
  }
 
  if ( nNode.style.filter )
  {
    return parseInt( nNode.style.filter.substring( nNode.style.filter.indexOf( "=" ) + 1 ), 10 );
  }
 
  if ( nNode.style.opacity )
  {
    return parseFloat( nNode.style.opacity ) * 100;
  }
}

// ----------------------------------------------------------------------------
/// <summary>
/// Utility method, sets the opacity level to a given DOM Node.
/// </summary>
/// <param name="nNode" type="Node">A DOM node with either opacity (Mozilla,
/// Firefox) or filter (IE) set.</param>
/// <param name="iOpacityPercents">The new level of opacity in %.</param>
gslb.FadedNode.setOpacity = function ( nNode, iOpacityPercents )
{
  if ( iOpacityPercents < 0 )
  {
    iOpacityPercents = 0;
  }
  if ( iOpacityPercents > 100 )
  {
    iOpacityPercents = 100;
  }
 
  if ( nNode.style.filter != null )
  {
    nNode.style.filter = "alpha(opacity=" + iOpacityPercents + ");";
  }
  if ( nNode.style.opacity != null )
  {
    nNode.style.opacity = iOpacityPercents / 100;
  }
}

//*****************************************************************************
//* Methods *******************************************************************
//*****************************************************************************

// Status ---------------------------------------------------------------------

// ----------------------------------------------------------------------------
/// <summary>
/// Returns true if the Node reached the minimum level of opacity
/// </summary>
gslb.FadedNode.prototype.isFaded = function()
{
  return ( this.m_iFadeFactor == this.m_iMinimumFadeFactor );
}

// ----------------------------------------------------------------------------
/// <summary>
/// Returns true if the Node reached the maximum level of opacity
/// </summary>
gslb.FadedNode.prototype.isUnfaded = function()
{
  return ( this.m_iFadeFactor == this.m_iMaximumFadeFactor );
}

// Fading ---------------------------------------------------------------------

// ----------------------------------------------------------------------------
/// <summary>
/// Starts a transition from the maximum level of opacity to the minimum level.
/// Note: If the Node already reached the minimum level of opacity, or if a
/// transition is currently running, this method is not active.
/// </summary>
/// <param name="fnOnTransitionEnd" type="Function">A function to be executed
/// when the transition is finished. Can also be null.</param>
gslb.FadedNode.prototype.fade = function( fnOnTransitionEnd )
{
  if ( this.m_bFading
    || this.m_bUnfading
    || this.m_iFadeFactor == this.m_iMinimumFadeFactor )
  {
    if ( fnOnTransitionEnd )
    {
      fnOnTransitionEnd();
    }
    return;
  }
  this.m_fnOnTransitionEnd = fnOnTransitionEnd;
  this.fading();
}

// ----------------------------------------------------------------------------
/// <summary>
/// Internal method only.
/// </summary>
gslb.FadedNode.prototype.fading = function()
{
  if ( this.m_iFadeFactor > this.m_iMinimumFadeFactor )
  {
    this.m_bFading = true;
    this.m_iFadeFactor -= this.m_iDeltaFade;
  }
  else
  {
    this.m_bFading = false;
    if ( this.m_bRemoveAfterFade
      && this.m_nNode.style.display )
    {
      // Avoid that the underneath controls are blocked by the invisible layer.
      this.m_nNode.style.display = "none";
    }
  }
 
  gslb.FadedNode.setOpacity( this.m_nNode, this.m_iFadeFactor );

  if ( this.m_bFading )
  {
    var that = this;
    setTimeout( function () { that.fading(); }, this.m_iTimer );
  }
  else
  {
    if ( this.m_fnOnTransitionEnd )
    {
      this.m_fnOnTransitionEnd();
      this.m_fnOnTransitionEnd = null;
    }
  }
}

// ----------------------------------------------------------------------------
/// <summary>
/// Starts a transition from the minimum level of opacity to the maximum level.
/// Note: If the Node already reached the maximum level of opacity, or if a
/// transition is currently running, this method is not active.
/// </summary>
/// <param name="fnOnTransitionEnd" type="Function">A function to be executed
/// when the transition is finished. Can also be null.</param>
gslb.FadedNode.prototype.unfade = function( fnOnTransitionEnd )
{
  if ( this.m_bUnfading
    || this.m_bFading
    || this.m_iFadeFactor == this.m_iMaximumFadeFactor )
  {
    if ( fnOnTransitionEnd )
    {
      fnOnTransitionEnd();
    }
    return;
  }
  if ( this.m_nNode.style.display )
  {
    this.m_nNode.style.display = "block"
  }
  this.m_fnOnTransitionEnd = fnOnTransitionEnd;
  this.unfading();
}

// ----------------------------------------------------------------------------
/// <summary>
/// Internal method only.
/// </summary>
gslb.FadedNode.prototype.unfading = function()
{
  if ( this.m_iFadeFactor < this.m_iMaximumFadeFactor )
  {
    this.m_bUnfading = true;
    this.m_iFadeFactor += this.m_iDeltaFade;
  }
  else
  {
    this.m_bUnfading = false;
  }
 
  gslb.FadedNode.setOpacity( this.m_nNode, this.m_iFadeFactor );
 
  if ( this.m_bUnfading )
  {
    var that = this;
    setTimeout( function () { that.unfading(); }, this.m_iTimer );
  }
  else
  {
    if ( this.m_fnOnTransitionEnd )
    {
      this.m_fnOnTransitionEnd();
      this.m_fnOnTransitionEnd = null;
    }
  }
}

// ----------------------------------------------------------------------------
/// <summary>
/// Sets the new level of opacity for this faded node. The level is applied with a transition.
/// Note: It is possible to set the new opacity outside of the range defined by the options for this node.
/// </summary>
/// <param name="iOpacityPercents" type="int">The new level of opacity in %.</param>
/// <param name="fnOnTransitionEnd" type="Function">A function to be executed
/// when the transition is finished. Can also be null.</param>
gslb.FadedNode.prototype.setOpacity = function( iOpacityPercents, fnOnTransitionEnd )
{
  if ( iOpacityPercents > this.m_iFadeFactor )
  {
    // Unfading required
    var iCurrentMaximum = this.m_iMaximumFadeFactor;
    var bCurrentRemoveAfterFade = this.m_bRemoveAfterFade;
    this.m_iMaximumFadeFactor = iOpacityPercents;
    this.m_bRemoveAfterFade = false;
    // Use closure to reset the maximum and minimum
    var that = this;
    this.unfade( function()
      {
        that.resetOptions( this.m_iMinimumFadeFactor,
          iCurrentMaximum,
          bCurrentRemoveAfterFade );

        if ( fnOnTransitionEnd )
        {
          fnOnTransitionEnd();
        }
      } );
  }

  if ( iOpacityPercents < this.m_iFadeFactor )
  {
    // Fading required
    var iCurrentMinimum = this.m_iMinimumFadeFactor;
    var bCurrentRemoveAfterFade = this.m_bRemoveAfterFade;
    this.m_iMinimumFadeFactor = iOpacityPercents;
    this.m_bRemoveAfterFade = false;
    // Use closure to reset the maximum and minimum
    var that = this;
    this.fade( function()
      {
        that.resetOptions( iCurrentMinimum,
          that.m_iMaximumFadeFactor,
          bCurrentRemoveAfterFade );

        if ( fnOnTransitionEnd )
        {
          fnOnTransitionEnd();
        }
      } );
  }
}

// ----------------------------------------------------------------------------
/// <summary>
/// Internal method only.
/// </summary>
gslb.FadedNode.prototype.resetOptions = function( iMinimum, iMaximum, bRemoveAfterFade )
{
  this.m_iMinimumFadeFactor = iMinimum;
  this.m_iMaximumFadeFactor = iMaximum;
  this.m_bRemoveAfterFade = bRemoveAfterFade;
}

// Setter/Getter for options --------------------------------------------------

// ----------------------------------------------------------------------------
/// <summary>
/// Sets the options for this instance.
/// </summary>
/// <param name="oOptions">An Options object, constructed using literal notation.
/// All values are optional.
/// <br />iMinimum: The minimum level of opacity applied to the Node. Default: 0%.
/// <br />iMaximum: The maximum level of opacity applied to the Node. Default: 100%.
/// <br />iDeltaFade: The amount added or removed to the opacity on each iteration
/// during transitions (fading/unfading). Default: 1%.
/// <br />iTimerMilliseconds: The duration of one iteration (in milliseconds)
/// during transition (fading/unfading). Default: 10 milliseconds.
/// <br />bRemoveAfterFade: If true, when the node reaches the minimum level of
/// opacity, it will be removed (ie display : none), so that underlying controls
/// can be actioned. This is mostly useful when the minimum level is 0. To enable
/// this functionality, the Node must have CSS display set in its style. Default: true.
gslb.FadedNode.prototype.setOptions = function( oOptions )
{
  if ( oOptions )
  {
    if ( oOptions.iMinimum != null )
    {
      this.m_iMinimumFadeFactor = oOptions.iMinimum;
    }

    if ( oOptions.iMaximum != null )
    {
      this.m_iMaximumFadeFactor = oOptions.iMaximum;
    }

    if ( oOptions.iDeltaFade != null )
    {
      this.m_iDeltaFade = oOptions.iDeltaFade;
    }
   
    if ( oOptions.iTimerMilliseconds != null )
    {
      this.m_iTimer = oOptions.iTimerMilliseconds;
    }
   
    if ( oOptions.bRemoveAfterFade != null )
    {
      this.m_bRemoveAfterFade = oOptions.bRemoveAfterFade;
    }
  }
}

Are you there, streamBabie?

I'm building a new server — be back in a couple of weeks.

*sigh*

Oh well.

I got it to work...I found the original version on this site and it's pretty nice.

Thanks anyways <3

P.S. Lol @ the spam bots.

use ' instead of " will help you out there.

echo 'blalalala'
instead of
echo "balalal"