6

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?

Luuk
  • 1,999
  • 3
  • 20
  • 27
  • Your site in _incredibly_ CPU intensive, even in Chrome. It is something to do with the smart 3D animation (probably an event firing onmousemove). That affect also seems to break apart the jPlayer. I would try disabling that first and see if the player works without another script manipulating all the elements. – andyb Jul 18 '11 at 19:57

4 Answers4

5

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
beardhatcode
  • 4,533
  • 1
  • 16
  • 29
  • thats halfway the solution, but thanks!!! Do you happen to know why it does not play the full playlist too? – Luuk Jul 11 '11 at 15:13
  • besides that, i gave it all a top-margin... now the controls (besides play and pause) do not work – Luuk Jul 11 '11 at 15:24
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.

Chris
  • 6,805
  • 3
  • 35
  • 50
  • you helped me a lot. pause play is fixed due to simply deleting the href. the list of songs is fixed due to you hight fix. The only part that is not fixed is the second
  • . Dont get me wrong... if i use your snip it will work. Though the depth will be gone (the piano should be in front of the player. while the player is virtually attached to the wall. Therefor the piano HAS to be in the second LI. If you know a fix for this i would gladly mark this as the right answer.
    • – Luuk Aug 11 '11 at 14:58
  • 1 more thing... it only works in IE when using the height fix for the list. and also take a look at for instance the "foto en video" section. there the LI is not blocking the rest. – Luuk Aug 11 '11 at 15:50
  • Will mark this as the answer, i added one new css clicktrhough class to make it work: .clickthrough { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale'); background:none !important; pointer-events:none; } – Luuk Aug 22 '11 at 11:41