Question

I have a very simple problem. I have a player on my website which and it’s class looks like that:

.jp-type-playlist
{
    position: fixed;
    bottom: 0px;
}

Also I have a popup menu which should fire on click.

.jp-playlists
{
    position: fixed;
    display: none;
}

Both blocks are located on the same level:

<!-- Playlists -->
<div class="jp-playlists">...</div>
<!-- Player -->
<div class="jp-type-playlist">...</div>

I want to position it next to the player and I don’t know how to do it. I tried to use .offset() but it returns only offset from the top of the document which is useless if the page is scrolled down. I tried to use jQuery UI .position(), but it worked in the same way as a previous solution.

Please help me with my problem. The link to the website: http://synthetic.fm/#&&Genre=&Artist=&Album=

Playlist menu looks like small yellow list.

Thanks in advance!

Answer 1

You can try this.

var $playList = $('.jp-type-playlist');
$('.jp-playlists').css({
    left: ($playList.offset().left + $playList.width()),
    top: $playList.offset().top + $(document).scrollTop()
});