Lectora Online and jQuery

dslinger

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.

wheels

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

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

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

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

Hi Donna, thanks for your kind words! I need to actually update those blogs for the new Lectora and LO!

dslinger

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

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

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

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;
}