Re: how to target jPlayer playlist scrollbar for custom styling?

571 views
Skip to first unread message

Mark Panaghiston

unread,
Oct 26, 2012, 7:49:37 AM10/26/12
to jpl...@googlegroups.com
If you did not put the jQuery doc ready around your scrollbar instancing, and you said it was in the header, then the rest of the document's HTML is not loaded in at that stage and cannot be found.

$(document).ready(function(){
   $('.jp-playlist ul').scrollbar();
});

You can put it in the same doc ready as the one jPlayerPlaylist uses... To save a few bytes.


On Friday, 26 October 2012 11:11:06 UTC+1, display_namei wrote:

i've tried three jQuery scrollbar plugins to try and style the jPlayer playlist scrollbar:

they all share a common structure of including references to the plugin script and css in the head of the document and then target the div or class you want the styling applied to with something like:

<script type="text/javascript">
$('.scrollbar').scrollbar();
</script>

i'm just wondering if anyone else has had any success with styling the playlist scrollbar in jPlayer and if so what plugin or approach they used?

i use firebug's 'copy css path' feature to make sure that i am targeting exactly the right div and class ie:

.jp-playlist ul

as well as the 'full' css paths, but none of the plugins i have tried so far have worked ie there has been no styling applied.

any help appreciated.

thank you.

display_namei

unread,
Oct 27, 2012, 9:58:13 AM10/27/12
to jpl...@googlegroups.com
thank you for your assistance and suggestion.

i added it to the jPlayers doc ready and still no dice, the default browser scrollbars are still showing.  

so the troubleshooting continues, i have:

- got the stylised scrollbars showing on a local test (with the uscrollbar demo content).  
- checked uscrollbar script and css path are accurate.  
- referenced these in the head area after jQuery and before the jPlayer script and css references and doc ready.  
- am targeting '.jp-playlist ul' using uscrollbar in the jPlayer doc ready script block:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1",
verticalVolume: "true",
},
[
{
title:"Title",
},
{
},
{
},
{
}
], 
{
swfPath: "js",
supplied: "oga, mp3",
wmode: "window"
});
$(".a_class").click(function() {
myPlaylist.play(0);
});
// another playlist

$(".playlist_class").click(function() {
myPlaylist.setPlaylist ( [
{
},
{
}
] );
myPlaylist.option("autoPlay", true);
});
$(".a_class").click(function() {
myPlaylist.pause();
});

// here's the scrollbar function
$('.jp-playlist ul').uscrollbar({
autoHide: 'true',
sliderSize: '12px',
sliderOpacity: 0.6
});

});
//]]>
</script>

- and have also tried placing it in it's own doc ready.

thank you.  

--------------
Message has been deleted

display_namei

unread,
Oct 27, 2012, 12:07:20 PM10/27/12
to jpl...@googlegroups.com
something weird is happening here, i *think* the uscrollbar js tries to make overflow: hidden to remove the original default scrollbars and then replace them with it's own styled scrollbars. 

i am using:

$('.jp-playlist').uscrollbar({
autoHide: 'true',
sliderSize: '12px',
sliderOpacity: 0.6
});

but i don't seem to be able to apply uscrollbar to '.jp-playlist ul' (you can see in firebug the extra classes are not applied but they ARE when targeting '.jp-playlist') only '.jp-playlist' and then i can only make the stylised scrollbar appear through hacking uscrollbar js to remove:

'overflow': 'hidden',

at line 37 and:

'display': 'none'

at line 53.  

then, the stylised scrollbar appears (woo hoo!) but scrolling causes the whole '.jp-playlist' area to scroll and not just the 'ul' area :(

i am close!

i somehow need to set the height of the '.jp-playlist' area to mimic the height of the ul area without compromising other parts of the player interface.  

display_namei

unread,
Oct 27, 2012, 1:10:21 PM10/27/12
to jpl...@googlegroups.com
ergh, rather flakey hack but this is what i did:

change this:

<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>

to this:

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

and then trigger uscrollbar with this:

$('#scroll_this').uscrollbar({
autoHide: 'true',
sliderSize: '12px',
sliderOpacity: 0.6,
zIndex: 999
});

and then in jPlayer css, comment out the height for:

div.jp-title ul,
div.jp-playlist ul {

and set the height of #scroll_this to your preferred setting eg:

div.jp-playlist div#scroll_this {
height: 60px;
}

and make '.scrollbar-path-vertical' the same height in uscrollbars css.  

also note there is no overflow property for:

div.jp-title ul,
div.jp-playlist ul 

so my player scrollbar is working it just seems a little flakey, but maybe i have to have a larger scrollbar handle so that is can be grabbed and dragged easily.  at the moment when you slide off the side of the handle it is like you are trying to drag an image across the page, erk.  


Daniel Shepherd

unread,
May 20, 2013, 5:32:20 PM5/20/13
to jpl...@googlegroups.com
Well I tried this and copied all the steps, but I get this…


help??
Reply all
Reply to author
Forward
0 new messages