DOWNLOADS EXAMPLES SKINS DOCS SUPPORT
 
 

Javascript Controls - Getting Started

The first thing to do is use the Customizer Tool to generate the necessary HTML code. Using the Customizer Tool, you can choose to output an HTML snippet or a full page. . We recommend outputting an HTML snippet, because it is more than likely that you will be controlling Wimpy from other elements on your page.

By default, the Customizer will output HTML code that is "ready to go." This means that you don't have to do anything special to the HTML code or player in order to start using the JavaScript controls described below.

We've created several example pages to show how the JavaScript Controls actually work. The example pages all use "relative" paths to files associated with Wimpy. This means that all of the example pages, Wimpy files and media files need to all be in the same folder.

NOTE: The "Advanced" examples (example 6 and 7) rely on an external JavaScript file (readme.js) to render the call-backs from Wimpy. Within the example 6 and 7 HTML code, we've set "enableWimpyEvents" to TRUE, which allows callback events to work.

We've tried to keep the HTML code within the examples clean and commented, so if you are experienced with HTML and JavaScript, reading the source HTML / source JavaScript should be helpful.

An HTML snippet generated by the Customizer Tool looks something similar to the following:

<!-- THIS LINE GOES IN THE <HEAD> OF YOUR HTML PAGE -->
<script language="javascript" src="http://www.yoursite.com/wimpy/rave.js"></script>

<!-- START WIMPY PLAYER CODE -->
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td align="center" valign="middle">

<div id="flashcontent"><a href="http://www.adobe.com/products/flashplayer/">Flash Player upgrade required</a></div>
<script language="javascript">
// <![CDATA[
var wimpyConfigs = new Object();
wimpyConfigs.wimpySwf="http://www.yoursite.com/wimpy/rave.swf";
wimpyConfigs.wimpyApp="http://www.yoursite.com/wimpy/rave.php";
wimpyConfigs.wimpyWidth="520";
wimpyConfigs.wimpyHeight="300";
wimpyConfigs.wimpySkin="http://www.yoursite.com/wimpy/skins/skin_itunes.xml";
wimpyConfigs.autoAdvance="no";
wimpyConfigs.setAspectRatio="maintain";
makeWimpyPlayerFromConfigObject(wimpyConfigs);
// ]]>
</script>
</td>
</tr>
</table>

<!-- END WIMPY PLAYER CODE -->

 

The HTML code contains four basic parts.

1. A reference to rave.js
2. An HTML table used as a container for Wimpy.
3. A <div> tag which is used as a target for rendering Wimpy in the page.
4. A <script> used to configure and render Wimpy.

When uploading Wimpy to your web site, be sure that the following files are located in the same folder:
     - rave.swf
     - rave.js
     - wimpy_downloadFile.html
     - wimpy_fullscreen.html
     - wimpy_popout.html

You can include Wimpy on any page throughout your site, however, in order to do so, you'll need to use the Customizer Tool to generate an HTML snippet. The HTML snippet can be included in any web page on your site.

When using the JavaScript controls, it is important to use full URLs to any file associated with Wimpy, including HTML, JavaScript, MP3, FLV, SWF and XML files. For more information on using full URLs see the "Relative and Absolute" page.

Integrating rave.js

When including Wimpy on an existing page, we recommend putting the reference to rave.js into the <head> tag of your HTML page. Although it is not 100% necessary to do so, it is simply a good practice. Putting the reference to rave.js into the <head> ensures that the javascript will be ready and available before any of the content for the pages loads. Putting the reference to rave.js into the <head> tag has a few advantages:

- Page loads a little bit more cleanly.
- When putting more than one Wimpy Player on a page, you MUST put the reference to rave.js into the <head> tag, other wise, rave.js will get loaded more than once, which can cause Wimpy (or your page) to freak out.
- If the reference to rave.js is not "above" any of the <div> target, Wimpy will not render in the page. (i.e. Wimpy will not show up on your page).

To put the reference to rave.js into the <head> tag:

Open the HTML code output from the Customizer Tool in a text editor and copy the line that reads:

<script language='javascript' src='http://www.yoursite.com/mp3s/rave.js'></script>

 

Then open your existing page and paste the code anywhere between the opening <head> tag and the closing </head> tag as:

Example:

<html>

<head>

<script language='javascript' src='http://www.yoursite.com/mp3s/rave.js'></script>

<head>

<body>
yada yada
</body>

</html>

 

 

Verifying URLs

It is a good idea to test a URL before using it. Usually, I copy and paste the URL into a new browser window's address field to make sure that i'm "hitting" the right file. (Sometimes my typing can be terrible.)

 

 

Clear Browser's Cache

Clearing your browser's cache ensures that your browser loads the latest changes to any files that were edited. Click here to lean how to clear your browser's cache.

For development I highly recommend Mozilla's Firefox browser. The primary reason is because FireFox's "Clear Cache Now" button actually works. Internet Explorer does not always clear files from the cache, which causes many hours of double thinking where the code is wrong. With FireFox, you KNOW that the cache is cleared when you "Clear the cache." Plus there are a number of developer tools and extensions that make clearing the cache 9or disabling the cache a one click (or no-click) deal.

To clear the cache in FireFox, From the Main Menu > Tools > Options > Privacy Icon > Cache tab > "Clear Cache Now." You can also include the "clearing of the cache" by clicking the "settings" tab in the same screen and check "cache" from the list, This way you only have to From the Main menu > Tools > Clear Private Data. OR, ctrl+ shift+del.

In addition there is a nifty JavaScript error reporting tool, which can help you determine exactly where the JavaScript error is occurring. The JavaScript error console can be access From the Main Menu > Tools > JavaScript Console.

Nailing down the "Clear cache" and using the JavaScript Console will save you lots of time and headaches.

 

 

 

 

 

  ©Copyright Plaino LLC. All rights reserved.