Jplayer Progress Bar Position

[Seb]

I am customising the jplayer skin with a header logo, and changes to
the application width etc, but as soon as I apply the element
positioning changes, the ability to click on the progress bar to
change playhead position disappears.

Is there a configuration setting somewhere that allows control over
what area is active and clickable for interaction with the progress
bar divs?

[Seb]

Solved - I had position the time ticker divs over the progress bar
divs, this removed the clickability from the progress divs beneath,

[Mark P]

Hello Seb,

I ran into this problem before too. When we were originally styling
the skin used on the jPlayer site we tried putting the time info over
the progress bars and had exactly the same problem that you found. You
can't click on the progress bars themselves.

At the time, I did wonder whether we should solve this problem. We
never did, since it because it complicated the use of jPlayer and we
figured we would see how the community felt.

The solution would be to have 2 sets of the load and progress bars.
The usual one you can see and then another set that actually have
nothing in them, but provide the click functions. You could then slip
the time info in between the 2 layers. Use CSS to align them all over
the top of each other and make sure you have the z-index correct if
you cannot order the elements appropriately in the HTML itself.

If you wanted to do it... You'd want the invisible bars to be linked
to jPlayer and then in onProgressChange you would copy the width
percentage to the bars behind that you can see.

Not sure if that is clear or not... Just giving you a solution if
you'd really like the time info to appear over the progress bars.

Best regards,
Mark P.

[Jordan Dobson]

@Mark - You could also consider having the time available in something like the title attribute and display it using the ::before pseudo class with CSS.

Something like this?

// in HTML ///////////////////////////////

<div id="progressBar" title="00:37"></div>

// in CSS ///////////////////////////////

#progressBar::before{

  position: absolute;

  content: attr(title);

  ... etc

}

I realize I probably didn't get the element ID right but hopefully you get the idea. I could see this working potentially.

- Jordan

--
You received this message because you are subscribed to the Google Groups "jPlayer: the CSS styleable jQuery audio player plugin" group.
To post to this group, send email to jpl...@googlegroups.com.
To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jplayer?hl=en.

--
Jordan Dobson
Owner + Director
MadeBySquad.com | Glue.Pro | SquadBlog.com
(425) 444-8014

Follow me on twitter at http://Twitter.com/JordanDobson

[Mark P]

@Jordan: Cheers for the tip. Think I'll try it out later.

> > jplayer+u...@googlegroups.com<jplayer%2Bunsu...@googlegroups.com>
> > .

[Jordan Dobson]

@mark - Sure thing... let me know if you need any help with that. I love solving stuff like that. I'm not 100% sure if the ::before or ::after register clicks or not... but I think it should work.

To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/jplayer?hl=en.

[azap akp]

Please how can i use jplayer to build my own progress bar,play,pause and stop