Javascript Target

 

A Target DIV can be used to keep your javascript code in one place, and your HTML in another.

<!DOCTYPE html>
<html>
<head>
<title>Wimpy Player</title>

<!-- 1. Wimpy Engine ============================== --> <script src="http:/www.yoursite.com/media/wimpy.js"></script> <!-- 2. Javascript for Page
NOTE: The following code may also be located in an external javascript file. =============================== -->
<script> // Create a "new" wimpy player and set the "target" option
// to match the Target Element's "id". var myPlayer = new wimpyPlayer({ target: "MyTarget", media: "/wimpy/song1.mp3", skin: "/wimpy/wimpy.skins/038.tsv" }); } </script>

</head> <body>

<!-- 3. Target Element Here we are creating a simple DIV tag and setting it's ID, which is what we'll use for the "target" option when we create the player. Wimpy will render the player into the following DIV. You're free to do pretty much anything you want with this DIV. Including styling it, and positioning it anywhere on the page. ============================== -->
<div id="MyTarget"></div>


</body> </html>

 

 

1Reference Wimpy Engine

<script src="/media/wimpy.js"></script>


This tag should go into the HEAD portion of your page (anywhere between the opening <head> and closing </head> tags on your page.)

NOTES
• You only have to reference the wimpy.js file one time
• The URL in the example is using the recommended "from the root" style.
• Placing the reference into the <head> is recommended, but NOT required. Under certain circumstances placing the reference at the bottom of the page (just before the closing </body> tag) may help with any issues related to conflicts with other scripts.

 

2Create a Player

We leverage the "new" operator to create a player and set the "target" option to the target DIV's ID (as a string value).

<script>
 var myplayer = new wimpyPlayer({
										target: "MyTarget",	// set to the target DIV's ID					
										media: "song1.mp3",
										skin: "/path/to/skin.json" 
 									});
</script>

 

NOTE
Wimpy queue's players until the DOM is ready, so you may instansiate a player at any time or from anywhere in the page. The only caveat is that any requests must appear after the reference to wimpy.js script file.

3Create a Target DIV

A "target DIV" is, well, a DIV that we'll use to put the player into.

<div id="MyTarget"></div>


NOTES
• Wimpy will render the player INSIDE the DIV. In addition, the player will be appended to the innerHTML of the target DIV. So if you have any content (or children nodes) inside the target, Wimpy will appear after any children.

• Use a unique ID (e.g. the ID may only appear one time in the HTML). If the ID isn't unique (e.g. any other HTML tag has the same ID), Wimpy may not render where you expect it to!