jquery mp3player - works as standalone, not in website

Question

I used the jPlayerscript to create a mp3-player for a website that I am making. Tested and styled it in a standalone page where it works perfectly:

http://www.basenharald.nl/3d/demo-02.htm

However if I implement it in the real website, I cannot get the controls to work. Neither will the playlist fully display:

http://www.basenharald.nl/3d/ (click "muziek" to locate it) Besides that, the only button that seems to work is play and pause. But when i click that, it jumps back to the starting screen... I think it is due to some conflicting scripts, but cannot find where.

Can anyone help find the problem?

Answer 1

the <div id="toppanel"> is in front of the play button... so when you click the play you actually click the toppanel.

• What you could do is, use z-index on the payer in CSS to move it up (in z-direction)
• move the player down
• remove the toppanel

Answer 2

To get all the songs to appear on your playlist, add this to your style.css file:

#muziek .jp-type-playlist li {
    height: 18px;
}

The second <li> tag is still blocking the player. Make the markup in this area of the page look like this:

<ul style="{snip... use existing styles}" id="muziek">
    <li style="{snip... use existing styles}">
        <div id="muur-wrapper">
            <!-- mp3 player snipped -->
            <img src="images/muziek-muziek.png" style="position: absolute; left: 251px; top: 300px;">
        </div>
    </li>
</ul>

Then you'll notice that clicking on items on your playlist bring you back to the home "page". That's because you've got links in there with href="#". That's their correct behavior, but I'm guessing that "#" will eventually be replaced by a link to the actual mp3 files. In any case, this should make the player behave like the one in your standalone demo.

Answer 3

This line (in your "scripts.js") seems to be the bad apple:

/*!
 * Smoothscroll
 */
eval((function(){a="Scroller={speed:10,8dC.;d.while(dC.+C.}}...

I checked out the source code of the original script (the packed version you included on your site is unreadable) and one comment mentions that Smoothscroll grabs all anchors in the document and attaches the click event to scroll. Since the jquery player is using anchors for its controls, there is your conflict.