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

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.