Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

/

playlist javascript/css and scrolling

15 replies [Last post]

I have my playlist in a div that has a scrollbar if there is vertical overflow (using 'auto'). My player uses shuffle mode (so that our visitors don't hear the same tunes in the same order every time they visit). What I am wondering is, is there some way to make sure that when an item plays that the playlist is scrolled so that the currently playing item is visible?

Thanks,

Edward

p.s. Hoping that someone else is wondering this too

Hobbs? Or anyone else, any ideas?

I've never seen this implemented in any of the vertical HTML playlists, though I've done it in horizontal HTML playlists.

Basically, when the current item changes, in the ITEM Listener function, calculate the scroll amount (index * track height), then scroll the playlist element.

gid('playlistdiv').scrollTop = calculatedAmount;

So if the index was:
0 then calculatedAmount = 0 * 50 scroll 0
5 then calculatedAmount = 5 * 50 scroll 250

The index returned by the ITEM Listener will be the position in the player's playlist. If you've scrambled the playlist, you will have to lookup the corresponding index in your playlist object (unless you loaded your scrambled playlist object into the player, then they should match).

Thanks. I have only just now been getting hep to jquery. Wow. I can't believe how easy it makes things.

Here is the code that I have come up with and it is working well. This assumes that the playlist is in a div in the main window (i.e. if the playlist were itself in a scrolling div this wouldn't work).

Hopefully someone else will find this useful. This code assumes that one is using the javascript/playlist libraries that LTV has posted

var item = document.getElementById(obj['id']).getConfig().item;
var playlist = $("#"+obj['id']).next();
var itemTop = playlist[0].childNodes[item].offsetTop;
var itemHeight = $(playlist[0].childNodes[item]).height();
var itemOffset = $(playlist[0]).height() - itemTop;
var curScroll = $(playlist[0]).scrollTop();
if (( itemOffset < itemHeight) || (curScroll > itemTop)) {
$(playlist[0]).scrollTop(itemTop);
}

Nice!

I'm going to use that in my HTML playlist Test Pages.

Although I've always preferred to use headless players when I wanted to have multiple, separated playlists. Then you can use the JS API to talk back and forth between the player-players and the playlist-players.

DC made a nice one here: http://www.longtailvideo.com/support/forum/General-Chat/18426/multiple-visible-playlists

DC's final page: http://www.isolatedground.com/Credits/multLists3.html

In the headless players, how are the 'heads' of the 3 players that are only used for playlist display hidden? Is it because they are positioned so that the display area is out of the visible bounds of the divs that contain them?

I notice that on my computer, the top item of each playlist is cut off.

For the headless playlist-players, controlbar=none and the playlistsize=player height.

I see DC has height=460 and playlistsize=480, which may explain why the playlist is cut off. They should both be the same.

I see. Setting the playlist height to the player size. Very clever. Didn't realize that would work.

Good to know.

 
Jeroen is the master of clever tricks.

From: http://www.longtailvideo.com/players/jw-flv-player/

LongTail receives a lot of requests for creating customized versions of our player. In most cases, a clever flashvars setting can provide the solution you're looking for, so please check this list of flashvars or the setup wizard.

hi, where do i put this code to work?
do i give a ID named "item" to the jw_playlist_item ?

Hi Gino,

I'm not sure what you're asking. Could you please rephrase your question?

I wanted to know how to make the item go to top automatically with the javascript playlist (like the flash playlist) when a song is playing
working with the jquery.playlist
thank's

The javascript playlist doesn't currently support this, though you should feel free to add this functionality.

please

how do i make my myspace music playlist srollable???
so i will be able to scroll down instead of it all being laied out?!

Can you post a link to a page with your myspace playlist?