1

I have integrated a javascript audioplayer in a website, and it worked without problems. But ever since i limited the width of the webpage with a container div ('max-width'), the clickable timeline is not working correctly.

I narrowed down the problem, i think. This code calculates the mouseclick on the timeline:

function clickPercent(e) {
  return (e.pageX - timeline.offsetLeft) / timelineWidth;
}

The problem is that pageX counts from the left browser edge, offsetLeft on the other hand counts from the parent element's edge. So when i click on the timeline, the player-dot jumps to the wrong position.

I made a JSfiddle demo: http://jsfiddle.net/2zkj25ss/35/

I suppose that i need something different than offsetLeft, something that can give me the absolute offset instead of the relative offset.

Can anyone help me with this? Please keep in mind that i'm not a programmer, and my JavaScript skills range from poor to non-existent.

sveto
  • 69
  • 7
  • You can recursively get the position of the parent and the parent's parent until you get to the top of the page. See http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag – Domino Nov 18 '15 at 02:21
  • Is there nothing simpler? I mean, theoretically it should work with the function NickF suggests, but i wouldn't know how to integrate it into the script i use. The most i can do with my limited knowledge right now, is eliminating all the y-axis references, which i don't need. Sorry for being such a noob. And thank you Jacque for this useful link. – sveto Nov 18 '15 at 02:31

1 Answers1

0

If you don't need to support IE<9 (as in, windows XP and earlier which I doubt anyone needs to support), you can use Benjamin's solution instead.

Just replace timeline.offsetLeft in the function:

function clickPercent(e) {
  return (e.pageX - (timeline.getBoundingClientRect().left + window.pageXOffset)) / timelineWidth;
}
Community
  • 1
  • 1
Domino
  • 6,314
  • 1
  • 32
  • 58
  • Jacque - this is exactly what i was looking for! The `+ window.pageXOffset` is necessary for the case that the browser is very narrow and the user has scrolled to the right. Never would have thought of that, but then again, i'm just starting with JS. Thanks so much! – sveto Nov 18 '15 at 04:12