So I have a slider on my stage and when a user slides the scrubber to the end of the bar an animation will start.
It works great but when the browser resizes users can't scrub to the end of the bar because my stage is responsive.
When the browser gets smaller the scrubber get's stuck somewhere along the bar, you cannot get it to the end.
So I want my scrubber to go to the end of the bar no matter what size the browser has.
I thought maybe I have figure the width of the slider out which responds to the size of the browser. (Not the original width which is 886px) But I can't figure it out.
Can someone help me to fix this?
Here is the code:
--------------------------------------------------------
var scrubber = sym.getSymbol("symbol1").$("scrubber"); // Touch this to scrub the timeline of timelinePlay
var bar = sym.getSymbol("symbol1").$("slider"); // Bar the scrubber follows
var dragme = false; // Set the initial dragme function to false
$(function () {
scrubber.mousedown(function () { // Enable the scrubber on mousedown
dragme = true
})
$(document).mouseup(function () { // Disable the scrubber on mouseup
dragme = false
})
$(document).mousemove(function (e) { // Make the magic happen on mousemove
if (dragme) {
var possibleX = e.pageX;
var leftX = bar.offset().left;
var rightX = (leftX + bar.width()) - scrubber.width();
var scrubWidth = rightX - leftX;
// Confine the scrubber to the width of the bar
if (possibleX < leftX) {
possibleX = leftX;
}
if (possibleX > rightX) {
possibleX = rightX;
}
scrubber.offset({
left: possibleX
});
var relativeX = possibleX - rightX;
if (relativeX > -1 ) {
sym.getSymbol("symbol1").play('animation');
}
}
})
})
----------------------------------------------------
Thanks in advance!