Changing the location of the Progress Bar

PennController for IBEX Forums Support Changing the location of the Progress Bar

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #9887
    metehanoguzz
    Participant

    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

    #9898
    Jeremy
    Keymaster

    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

    #9903
    metehanoguzz
    Participant

    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

    #9919
    Jeremy
    Keymaster

    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

    #9923
    metehanoguzz
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.