Scrollable playlist for JPlayer

[R_Rbnsn]

Hi,

I'm just finishing off a new website that uses JPlayer however I need some advice. I have my playlist with a set width and height and presumed that when the amount of tracks exceeded the playlist size it would automatically switch to be scrollable, however this doesn't seem to be happening and I just end up with overflow. I don't even know where to start with this sort of thing so any help would be much appreciated. 

Here's the page with it all overflowing (I've duplicated some of the tracks to demonstrate)

[terrell harris]

You need to make the jp-playlist element use overflow: auto;   That will only put scrollbars in when needed.

--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/63oEMj19-x0J.
To post to this group, send email to jpl...@googlegroups.com.
To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jplayer?hl=en.

[screenager.be]

but for some weird reason that I couldn't figure out yet the scroll bar is not working on iPad... :(

[JJ Zolper]

funky,

i was looking through the dev guide and the jscript files and didn't see a location were i could simply place "auto" to add a scroll bar.

screenager.be did you find it?

JJ

[screenager.be]

I've added this line of code to my local style for a scrollbar (that does not work on iPad) :)
  .jp-playlist { height:475px; overflow-y: auto !important; overflow-x: hidden !important; }

[JJ Zolper]

screenager.be

was this in the CSS file?

Has anyone out there EVER seen the scrollbar on JPlayer?

I am willing to invest here. I want to make that CLEAR. I will pay you all at JPlayer to consider developing this feature if it is not currently robust.

I have donated up to 50 Euros currently and I will extend that investment if I feel like I am being heard.

JJ

[Hermanto Lim]

is this what you mean by scrollbar playlist? http://zhang-musicplaylist.mp3.gp/ <--- this is what I develop for my friends,

JJ

--

You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.

To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/rrWLpkV0SVAJ.

[nackle]

try to add this .jp-playlist ul {overflow: hidden;}  see what happen, and what script you use for the scroller?  do you use jquery ui?

[JJ Zolper]

Nackle,

Yes! That is exactly what I mean. I want to be able to have that ability within my JPlayer. If I have an album that has 20 song tracks on this url:

http://www.madtrak.com/newartists/Test.html

I don't want to have to extend the page merely because of the audio player. Like your page I want to have a scrollbar so that I can have that same list of tracks on a page like the one above. No need for adjustment. Simply have about 5-8 songs displayed at all times as you move the scrollbar to find the desired song.

JJ

[JJ Zolper]

I haven't used a script yet. I wasn't sure where to start? Maybe, you could help direct me to get started? The Jquery functions, methods, etc? 

PS. I added .jp-playlist ul {overflow: hidden;} to the CSS and added lots of song files to the player and it continued to grow in size no matter how many files I added. Atleast that's what I saw unless I did something wrong.

JJ

[Hermanto Lim]

In my case I used jquery ui for the scrollbar, then here is the script I used,

$('.jp-playlist').each(function () {
		
	    var ul= $('ul', this);
// important for slider to works, 26 is the size of each <li> height, I use the pre defined the list
height since the playslist will only appear after my script. the countmyplaylist var is defined in myplaylist.js, for more

clear view the source of my web, and see what I do
 
 var ulHeight = 26 * countmyplaylist; 
	   
	   
	    var playlistHeight = ulHeight - $(this).outerHeight();
	   
	    var slider = $('.scrollbar').slider({ 
	      range: 'min',
	      min: 0,
	      max: playlistHeight,
	      value: playlistHeight,
	      orientation: 'vertical',
	      slide: function (ev, ui) {
	        ul.css('bottom', '-' + ui.value + 'px');
	      }, 
	      stop: function (ev, ui) {
	        ul.animate({ 'bottom' : '-' + ui.value + 'px' }, 500, 'linear');
	      }
	    });
	  });

--

You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.

To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/ZWQi9DwugyAJ.

[JJ Zolper]

Nackle,

Where did you place your scrollbar UI script?

I haven't had much time to look at your site to try and understand how you developed it. I want to work on this thoroughly very soon.

Would you be willing to send me an e-mail at jjz @ madtrak.com?

If you could do that I was thinking it would be easier to communicate. I would do my best to understand your method but if need be I could respond to the e-mail thread that we make until I finish it.

JJ

[Hermanto Lim]

I send you an email already, if you want me to help you with the code attached and send me the file.

JJ

--

You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.

To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/rQk3JwKkMaAJ.

[screenager.be]

yes. I've added the line of code in the header not in the players css file.
see http://beta.duyster-online.be/nl/mediaplayer.php for a live (beta) jPlayer playlist with scroll bar :)

i've also figured out you can scroll the playlist with the "two-finger method" on tablets and smartphones (iOS and Android). the scroll bar just isn't visible :s

[JJ Zolper]

oh okay i gotcha.

i worked with nackle and here is a quick demo of mine:

http://www.madtrak.com/newcssrun.html

can you give more information about the "two finger method" it doesn't ring a bell

[Jonathan of Cambridge]

Wondering if either of you know how to make the window scroll up one
song when you reach the end of a song or the end of the last song
displayed in a scroll window.

I noticed that on both of your players (as currently written) if you
play the last song on the page, the next song it plays is already off
the page.

Let me know your thoughts.

Jonathan

[screenager.be]

hmm didn't think about that end of list problem yet
and it's not really priority for me. I'm happy it's working fine now :)

two-finger method is just scrolling with two fingers in stead of only one (what the default behavior is).
it will allow you to scroll through in-page scrollable areas (like playlists)

[Maboa]

Jonathan,

I have found the jQuery scrollTo plugins http://flesler.blogspot.com/2007/10/jqueryscrollto.html to be invaluable for implementing auto-scrolling over the years.

Cheers

Mark B

[BellaChiCa]

Hello Nackle

is it possible to help me to? I also want to add a scrollbar option to my playlist (check http://marocside.be/websitenieuw/artiest.php?artiest=7)

I want to use Jquery UI (i use it on my site for dialog options etc), how can i make this work?

Thanks!!

Op zondag 15 januari 2012 15:58:35 UTC+1 schreef nackle het volgende:

To unsubscribe from this group, send email to jplayer+unsubscribe@googlegroups.com.