title: How do I move a jPlayer playlist to another position on the page?
body: <p>In default mode the jPlayer playlist is displayed below the jPlayer controls.  I would like to move it to another position on the page (on the right of the page in a 2 column layout with the jPlayer controls/poster on the left), but when I move the code that generates the playlist to another place on the page, i.e.</p>
  
  <pre><code>&lt;div class="jp-playlist"&gt;
                      &lt;ul&gt;
                          &lt;!-- The method Playlist.displayPlaylist() uses this unordered list --&gt;
                          &lt;li&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Nothing shows in the playlist.  So it would seem that this code needs to be included within the jp_container_1 div.  If so, how can I display the playlist on the right of my page?</p>
  
  <p><strong>Full markup for jPlayer is below:</strong></p>
  
  <pre><code>&lt;div id="jp_container_1" class="jp-video jp-video-270p"&gt;
              &lt;div class="jp-type-playlist"&gt;
                  &lt;div id="jquery_jplayer_1" class="jp-jplayer"&gt;&lt;/div&gt;
                  &lt;div class="jp-gui"&gt;
                      &lt;div class="jp-video-play"&gt;
                          &lt;a href="javascript:;" class="jp-video-play-icon" tabindex="1"&gt;play&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="jp-interface"&gt;
                          &lt;div class="jp-progress"&gt;
                              &lt;div class="jp-seek-bar"&gt;
                                  &lt;div class="jp-play-bar"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="jp-current-time"&gt;&lt;/div&gt;
                          &lt;div class="jp-duration"&gt;&lt;/div&gt;
                          &lt;div class="jp-title"&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class="jp-controls-holder"&gt;
                              &lt;ul class="jp-controls"&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-previous" tabindex="1"&gt;previous&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-play" tabindex="1"&gt;play&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-pause" tabindex="1"&gt;pause&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-next" tabindex="1"&gt;next&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-stop" tabindex="1"&gt;stop&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-mute" tabindex="1" title="mute"&gt;mute&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute"&gt;unmute&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume"&gt;max volume&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;div class="jp-volume-bar"&gt;
                                  &lt;div class="jp-volume-bar-value"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;ul class="jp-toggles"&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen"&gt;full screen&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen"&gt;restore screen&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle"&gt;shuffle&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off"&gt;shuffle off&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat"&gt;repeat&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off"&gt;repeat off&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="jp-playlist"&gt;
                      &lt;ul&gt;
                          &lt;!-- The method Playlist.displayPlaylist() uses this unordered list --&gt;
                          &lt;li&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="jp-no-solution"&gt;
                      &lt;span&gt;Update Required&lt;/span&gt;
                      To play the media you will need to either update your browser to a recent version or update your &lt;a href="http://get.adobe.com/flashplayer/" target="_blank"&gt;Flash plugin&lt;/a&gt;.
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>