Forum Discussion
Moving Player Controls to the Center
Hello Community,
Is there a way to move the player controls to the center after removing the seekbar and play/pause? I found the javascript to hide the play/pause and replay.
LaRhonda
Hi,
This can probably be done with CSS. Can you show how you removed the play/pause and replay butons now? Then I can possibly help you with a piece of CSS.Did you find the JavaScript code to hide the play/pause and replay buttons? This is something that can usually be turned on or off by default in Storyline and requires no JavaScript. Could you explain in more detail or, at the very least, upload a few screenshots showing what you have removed and what is still left to be centered or adjusted?
Thanks so much for the replies. Sorry for the delay in responding. I've been looking for the community conversation that provided the instructions to remove the "replay" with no luck so far. However, here's the CSS:
- When the timeline starts:
document.getElementById("reset").style.display = "none";
document.getElementById('play-pause').style.display = "none";
Once the play/pause and replay buttons are removed I've like the remaining player controls to be centered or moved to the left if possible.
LaRhonda
Do you need the misc controls? With the following script the misc controls and the prev/next controls are left aligned. The only error that I cannot fix right now is the are on top of each other. You can place the script in a new trigger execute javascript when timeline starts.
Unfortunately, I can't quite solve your problem right now
var interval = setInterval(function () {
var navControls = document.querySelector("#nav-controls");
var miscControls = document.querySelector("#misc-controls");
if (navControls) {
navControls.setAttribute("style", "transform: translate(0px, 0px) !important; left: 0px !important; position: absolute !important;");
console.log("Style applied to #nav-controls");
} else {
console.log("Waiting for #nav-controls...");
}
if (miscControls) {
miscControls.setAttribute("style", "transform: translate(0px, 0px) !important; left: 0px !important; position: absolute !important;");
console.log("Style applied to #misc-controls");
} else {
console.log("Waiting for #misc-controls...");
}
// Stop the interval if both elements have been styled
if (navControls && miscControls) {
clearInterval(interval);
console.log("All styles applied. Interval stopped.");
}
}, 100); // Check every 100ms
- When the timeline starts:
Mark, thanks so much for the above. I'll give this a try and report back.
