Jquery / Javascript Make audio timeline clickable with variable width

I am working on a clickable timeline audio player for music that stretches to the screens width, the timeline works when first loaded, but if you change the width of the screen where you click will be offset, it's as if it remembers the original screen width but not the new one. I would like to find a way to fix this, maybe somehow have an event listener that updates on screen width change?: Fiddle : http://jsfiddle.net/jeffd/qu910thj/ $('#play').on('click', function() { document.getElementById('music').play(); }); $('#pause').on('click', function() { document.getElementById('music').pause(); }); var playhead = document.getElementById('hp_range'); // playhead var timeline = document.getElementById('hp_slide'); // timeline var player = document.getElementById('player'); music.addEventListener("timeupdate", function() { var currentTime = music.currentTime; var duration = music.duration; $('#hp_range').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear'); }); var duration; // Duration of audio clip var pButton = document.getElementById('pButton'); // play button var playhead = document.getElementById('hp_range'); // playhead var timeline = document.getElementById('hp_slide'); // timeline // timeline width adjusted for playhead var timelineWidth = timeline.offsetWidth - playhead.offsetWidth; // timeupdate event listener music.addEventListener("timeupdate", timeUpdate, false); // make sure it pauses when its over IE fix music.addEventListener('ended', function () { music.pause(); }); //Makes timeline clickable timeline.addEventListener("click", function (event) { moveplayhead(event); music.currentTime = duration * clickPercent(event); }, false); // returns click as decimal (.77) of the total timelineWidth function clickPercent(e) { return (e.pageX - timeline.offsetLeft) / timelineWidth; } // Makes playhead draggable playhead.addEventListener('mousedown', mouseDown, false); window.addEventListener('mouseup', mouseUp, false); // Boolean value so that mouse is moved on mouseUp only when the playhead is released var onplayhead = false; // mouseDown EventListener function mouseDown() { onplayhead = true; window.addEventListener('mousemove', moveplayhead, true); music.removeEventListener('timeupdate', timeUpdate, false); } // mouseUp EventListener // getting input from all mouse clicks function mouseUp(e) { if (onplayhead == true) { moveplayhead(e); window.removeEventListener('mousemove', moveplayhead, true); // change current time music.currentTime = duration * clickPercent(e); music.addEventListener('timeupdate', timeUpdate, false); } onplayhead = false; } // mousemove EventListener // Moves playhead as user drags function moveplayhead(e) { var newMargLeft = e.pageX - timeline.offsetLeft; if (newMargLeft >= 0 && newMargLeft <= timelineWidth) { playhead.style.width = newMargLeft; } if (newMargLeft < 0) { playhead.style.width = "0%"; } if (newMargLeft > timelineWidth) { playhead.style.width = timelineWidth; } } // timeUpdate // Synchronizes playhead position with current point in audio function timeUpdate() { $('#current').text(formatTime(music.currentTime)); if (music.currentTime == duration) { pButton.className = ""; pButton.className = "play"; } } // Gets audio file duration var formatTime = function(seconds) { minutes = Math.floor(seconds / 60); minutes = (minutes >= 10) ? minutes : "0" + minutes; seconds = Math.floor(seconds % 60); seconds = (seconds >= 10) ? seconds : "0" + seconds; return minutes + ":" + seconds; } music.addEventListener("canplaythrough", function () { duration = music.duration; $('#duration').text(formatTime(music.duration)); }, false);