Separate JPlayer's Playlist From The Player To Enable Scrolling For Mobile

Question

I am looking for a way to separate the playlist (#jp_container_1) in the default jQuery Jplayer music player from the actual player portion (#jquery_jplayer_1) at the top. My goal is to enable iScroll to work within the playlist.

Here is a demo of the project I am working on where you can see the player and the two playlists on the audio tab. http://sharethewub.com/mobile/ I would like to integrate the default jplayer playlist into the iScroll playlist that I have listed underneath jplayer.

I attempted to set up a jsfiddle of this project but I had issues getting the tabs to work there.

<div id="audio" style="position:absolute;top:9999px;overflow:hidden">
  <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div id="jp_container_1" class="jp-audio">  
    <div class="jp-type-single">
      <div id="jp_interface_1" class="jp-interface">
        <ul class="jp-controls">
          <li><a href="#" class="jp-play" tabindex="1">play</a></li>
          <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
          <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
          <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
          <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
        <div class="jp-current-time"></div>
        <div class="jp-duration"></div>
      </div>
       <div id="jp_playlist_1" class="jp-playlist">
         <ul>
         </ul>
      </div> 
    </div>
  </div> 
</div>

Any insight into how to accomplish this would be greatly appreciated. Thanks!

Answer 1

This sounds like you just want to be able to move the playlist element:

<div id="jp_playlist_1" class="jp-playlist">
     <ul>
     </ul>
 </div> 

outside of the #jquery_jplayer_1 container without breaking it's functionality. To do that you could simply edit the selector definition in jplayer.playlist.js. In line 58 you can see the playlist selector being defined as

this.cssSelector.playlist = this.cssSelector.cssSelectorAncestor + " .jp-playlist";

which forces it to be a child of your main "cssSelector". If you only have one single player on your site you could simply change it to

this.cssSelector.playlist = " .jp-playlist";

I have not tried this but it should work!