Lectora Online and jQuery

dslinger
Community Member Posts: 24 ♪ Opening Act ♪
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.
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 Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 665 eLearning ROCKSTAR Admin TeamHi 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 -
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 Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 665 eLearning ROCKSTAR Admin Team
-
-
wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 665 eLearning ROCKSTAR Admin TeamThanks 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.
-
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;
}
Categories
- 35.8K All Categories
- 109 ✫ Announcements
- 33.1K Lectora®
- 31.1K Lectora Discussions
- 28.9K Lectora Desktop
- 2K Lectora Online
- 2K Lectora Feature Requests
- 71 Lectora User Groups
- 36 Lectora Accessibility User Group (LAUG)
- 22 ELB Learning Content
- 22 ELB Learning Content Discussions
- 321 CenarioVR®
- 188 CenarioVR Discussions
- 133 CenarioVR Feature Requests
- 41 Rockstar Learning Platform®
- 38 Rockstar Learning Platform Discussions
- 108 CourseMill®
- 108 CourseMill Discussions
- 47 ReviewLink®
- 47 ReviewLink Discussions
- 7 The Training Arcade®
- 7 The Training Arcade Discussions
- 934 All Things eLearning
- 36 eLearning Development
- 546 Learning Management System (LMS) Integration
- 332 Web Accessibility
- 1.2K ♪ The Green Room
- 9 Additional Learning Products