Dynamically adjust padding on an image?
- by Cory
What I'm basically attempting to do is dynamically change a padding value for a scrubber image based on player position data provided by an app. I have been able to leverage the provided number to dynamically increase the width of a progress overlay image and create a progress bar, but I would like a scrubber diamond at the leading edge of the progress bar.
To do this, I have positioned the scrubber diamond at the same starting point as the progress overlay and would like to increase the padding on the diamond at the same rate as the width is increasing for the progress overlay, allowing them to pace each other with the scrubber diamond moving as the song plays.
Any help with the script necessary to manipulate padding-left dynamically would be very much appreciated.
var progress = Ecoute.playerPosition();
var width = 142.5 / length * progress + 1.63;
EcouteSel('Progression').width = width.toString();
EcouteSel('Scrubber').style('padding-left', 'width');
We define progress as the player position, width as a function of the progress and then apply that function to the ID applied to the progress over lay image. But how do I accomplish that for padding-left?
style.paddingLeft
...based functions have broken the controller outright. I'm at a loss and any help would be appreciated.
