Changing the location of the Progress Bar

[metehanoguzz]

Hey!
Is it possible to change the location of the Progress Bar? As you know, the Progress Bar shows up on the top of the screen by default, I simply want to move it to the bottom of the screen.
Best,
Mete

[Jeremy]

Hi Mete,

You could use javascript to make sure the progress bar is always the last element on the page. Assuming you’ll always either have PennController trials or native-Ibex trials, placing the following at the very top of your script (before PennController.ResetPrefix) should do the job:

(()=>{
    let bar;
    (function barAsLast(){
        bar = bar || document.querySelector("#bod table:first-child");
        if (bar) {
            let pc = document.querySelector("p.PennController-PennController");
            if (pc) pc.append(bar);
            else (document.querySelector("#bod table:last-child")||document.body).append(bar);
        }
        window.requestAnimationFrame(barAsLast);
    })();
})();

Jeremy

[metehanoguzz]

Hi Jeremy,
Thank you so much for yor reply!
When I use this code, the progress bar is first printed to the top of the screen, and it moves below as the other items are printed on the screen. So, yes, the progress bar ends up being on the bottom, but it is printed on the top first, and then moves below.
Is there any way that we can give it a fixed location on the screen (other than the top)?
Best,
Mete

[Jeremy]

Hi Mete,

If you want the bar’s bottom edge aligned with the bottom edge of the page’s frame as scrolled (when applicable) then you need to do this:

(()=>{
    let bar;
    (function barAsLast(){
        bar = bar || document.querySelector("#bod table:first-child");
        if (bar) {
            if (document.body.scrollHeight > window.innerHeight) {
                bar.style.position = 'unset';
                bar.style.bottom = 'unset';
                bar.style.left = 'unset';
                bar.style.transform = 'unset';
                let pc = document.querySelector("p.PennController-PennController");
                if (pc) pc.append(bar);
                else (document.querySelector("#bod table:last-child")||document.body).append(bar);
            }
            else {
                bar.style.position = 'absolute';
                bar.style.bottom = '0px';
                bar.style.left = '50vw';
                bar.style.transform = 'translateX(-50%)';
                document.body.prepend(bar);
            }
        }
        window.requestAnimationFrame(barAsLast);
    })();
})();

When there’s no vertical scroll bar, the bar will “jump” to the bottom of the visible frame, but when there is a scroll bar, then it will be placed below all the content that comes before it (ie. you’ll need to scroll down to see it)

Jeremy

[metehanoguzz]

Hi Jeremy,
This works great! Thank you so much!
Best,
Mete

[Author]

Posts