eLBX Online 2021 | June 22 - 24


Join us for a FREE, 3-day virtual conference featuring industry experts and eLearning thought leaders. Learn about critical topics such as eLearning accessibility, learning experience design, course authoring, virtual reality, and gamification. Register today!
CHECK IT OUT

Lectora Online and jQuery

dslinger
dslinger Community Member Posts: 24
Hello,

I'm attempting some jQuery in Lectora Online and looking for some help. The only tutorials I've found on the subject are Sergey's excellent blog posts, but they're 5 years old now and relate to Lectora desktop.

So, I found this little script that will change text color based on scroll position. I am trying to use it to create a sticky menu on the right of the page - simple numbers that relate to each section and will highlight when a user is scrolled to that section.

$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 663) {
$(".menu1").addClass("changeColortext");
}
else {
$(".menu1").removeClass("changeColortext");
}
});
});

 

I want the text I gave the class name menu1 to change color when the user has scrolled between 0 and 662 on the page. I'll add the same function for each of the numbers in the menu (menu2, menu3, etc)

I can't seem to figure out what should/should not be attached to the title and how to call the function. Can anyone help? Thanks in advance.

Comments

  • wheels
    wheels Community Member, Administrator, Moderator, Rockstar Manager Posts: 549 eLearning ROCKSTAR Admin Team
    Hi Donna,

    Import the title I have attached, it uses jQuery to do a menu similar to what you described.

    Needs some tweaking but hopefully gets you closer!

    - Joe
  • dslinger
    dslinger Community Member Posts: 24
    Hi Joe,

    Thanks so much for the reply and example! I published your example to Reviewlink but the text did not change color when I scrolled. I tried turning Seamless Play on and off but it didn't help. Is there something else I need to do?

    Thanks,

    Donna

     

    p.s. is there a reason I add the CSS Class to the object with an action rather than identify it in CSS Classes under the Appearance block?
  • wheels
    wheels Community Member, Administrator, Moderator, Rockstar Manager Posts: 549 eLearning ROCKSTAR Admin Team
    Hi,

    This works fine for me in ReviewLink, I'm using the Chrome browser, what browser are you using?

    This example is applying the css class to all the span elements inside the text block in order to override the text color. The object css property would not do that.

    - Joe
  • dslinger
    dslinger Community Member Posts: 24
    Hi Joe,

    That is really strange. I also use Chrome but I also tried Firefox and IE. I even tried publishing it on the SCORM Cloud and couldn't see a change. I'm on a Windows 10 machine.

     

    Thanks,

    Donna
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    Hi Donna, thanks for your kind words! I need to actually update those blogs for the new Lectora and LO!
  • dslinger
    dslinger Community Member Posts: 24
    Hi Sergey, I look forward to it!

    on another note, am I the only one who can’t see the color changes on scroll in Joe’s jQuery example? I’ve tried publishing them every way I can think of, and I still can’t see any change.

    thanks,

    Donna
  • wheels
    wheels Community Member, Administrator, Moderator, Rockstar Manager Posts: 549 eLearning ROCKSTAR Admin Team
    Thanks for adding me as a reviewer in ReviewLink. Very strange, I found the issue with my example and see that I had already updated it in my development environment! So I have uploaded now the new example PKG file in this thread on my previous post and I hope it works for you now. It probably will not work on mobile as scrolling is totally different especially on iOS. Hopefully it give you some ideas.
  • dslinger
    dslinger Community Member Posts: 24
    Thanks so much, Joe! Not only for taking the time to fix it, but also for confirming I was not losing my color vision 😊.

    Donna
  • dslinger
    dslinger Community Member Posts: 24
    This works great, except that scrolling doesn't move the user smoothly to each section. The section headers don't land in the same position when scrolling as using the buttons to navigate to the sections. So, I've been looking at adding a scroll snap to it and the CSS seems simple enough.

    However, using it with Lectora, I'm wondering how to attach Lectora Online items as children within the container?

    HTML:

    <div class='container'>
    <section class='child'></section>
    <section class='child'></section>
    <section class='child'></section>
    ...
    </div>

    CSS:

    .container {
    scroll-snap-type: y mandatory;
    }

    .child {
    scroll-snap-align: start;
    }

     
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!