Scrollbar fill on scrolling page

georgeb
georgeb Community Member Posts: 43
Hi, I saw this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_indicator

And I tried to make it work in Lectora, but somehow the script won't run when I have it either in meta tags <script> tages, in the header scripting nor in the bottom of file scripting.

Anyone has a sollution for this?

(I used custom div for the scrollbar with the html code for the progress container and bar, but if there's a sollution with the Lectora progress bar that's also fine for me.

Comments

  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    Adding the event listener to the window should happen in a Run javascript action or another type of trigger. Otherwise the code won't be executed.
  • georgeb
    georgeb Community Member Posts: 43
    Fantastic, thanks!
  • georgeb
    georgeb Community Member Posts: 43
    Seems it only works if I don't load jQuery via a html extension.

    I have a little code that scrolls to the top (we use long pages):

    function STT() {
    $('html, body').animate({scrollTop: $('#pageDIV').offset().top -50 }, 'slow');
    }

    Now that obviously doesn't work anymore. You have any idea how comes that loading jQuery doesn't let the scrollbar code work?

    This code works for most modern browsers and is a fix for now:

    window.scroll({ top: 0, left: 0, behavior: 'smooth' });

    Wonder still though if you know a solution wiht jQuery loaded and the old code :)

     

    Kind regards,

    George
  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    Where did you put jQuery? I tried but I can't recreate the issue.
  • georgeb
    georgeb Community Member Posts: 43
    I saw what happened, and what fixed it.

    My code of adding jQuery was in a header scripting element, when I changed it to meta tags, everything was fine.

     

    Edit, thanks for your file, I'll look around on where to put what :)
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!