Scrolling a jPlayer playlist on track change/click

[nick putman]

Hi,

I used the following events with a previous version of jPlayer to scroll the jPlayer playlist, which was contained in another DIV.  The previous version of jPlayer generated numbered IDs for each list item in the playlist, i.e. id="jp_playlist_1_item_1", id="jp_playlist_1_item_2\", etc).  I could then use the following events on track change and clicking on a track:

ended: function() {

mediaPlaylist.playlistNext();

},

play: function() {

$("#jp_playlist_1").animate({

scrollTop: $("#jp_playlist_1_item_" + mediaPlaylist.current).position().top -

$("#jp_playlist_1_item_0").

position().top,

}, 2000,'easeOutCirc');

},

I am wondering if there is any way to amend the current version of jPlayer so that this script would work, or whether there is another workaround?

Thanks,

Nick

[Nathan Horton]

I think it adds jp-current class (or something similar) to the currently playing playlist item. You could key off that like $(".jp-current).position().top 

good luck

[nick putman]

Thanks Nathan,

I tried with the following code, and it worked for the first track, but on subsequent track changes the scrolling is erratic, scrolling to seemingly random points in the playlist:

play: function() {
$("#jp_playlist_1").animate({

scrollTop: $(".jp-playlist-current").position().top,

}, 2000,'easeOutCirc');
},

I remember now that I had the same issue when I first tried to implement this with jPlayer 1.2. There's another thread in this group with the code that eventually worked for this version of jPlayer, using the unique numbering of the list items in the playlist that have now been removed. You can find this thread here:

https://groups.google.com/forum/m/?fromgroups#!topic/jplayer/rAlw1Q3zc7k

Nick.

[Nathan Horton]

might try and use jquery.each function to go through each <li> in the playlist. that way you could keep count and then when it hits one that has class jp-playlist-current, multiply how many you've looped through so far by whatever the height of your playlist items are and set the scrolltop to that. these are just suggestions and untested code snippets, hoping to point you in the right mental direction. 

Another quick thought would be:

scrollTop = mediaPlaylist.current * 50 (number is however tall your playlist items are.)

[nick putman]

Solved it!

adding an id to the playlist ul and then using the following worked:

play: function() {

$("#jp_playlist_1").animate({

scrollTop:  $(".jp-playlist-current").position().top -

$("ul#test").position().top,

}, 2000,'easeOutCirc');

},

Works for automatic track changes, clicking on tracks and skipping to next and previous tracks.  Was pretty straight forward once I got my head around it!

Nick

[Nick C]

Nick,

Thanks for sharing!

Not sure how I'm JUST NOW getting around to implementing this code.

Did you add the code above to the jplayer.playlist.js and replace what is currently there for the play : function, or did you add it during playlist construction?

Thanks!

Nick C

[Nick C]

Alright...got it working:

http://jplaylister.yaheard.us/v_0.68/

I added your code just below the playlist options in the constructor(?) -- the playlist code.  ;-p

Additionally, I had 

1. forgotten a javascript source (http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js)
   
2. not set div IDs for the jp-playlist class or it's ul
3. not added the div id="scroll" wrapper around the jp-playlist div

I think someone more fluent in javascript would have worked it out sooner.  I'm still not there.

Thanks for this code, again...great work and seems to have no issues with jPlayer 2.3!

nc

[shamim moeen]

Thank you for your addition. It is working.