Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #428336 Score: 0
    Profile photo of Donna Slinger
    Donna Slinger
    Member
    beginner
    intermediate
    picture perfect
    profile
    curious george
    wise owl
    Group Member
    friend finder
    contributor
    1 pt
    @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.

    #428576 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    51 pts
    @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

    • This reply was modified 2 weeks, 4 days ago by Profile photo of Joe Wieloch Joe Wieloch. Reason: Updated the Example!
    #428600 Score: 0
    Profile photo of Donna Slinger
    Donna Slinger
    Member
    beginner
    intermediate
    picture perfect
    profile
    curious george
    wise owl
    Group Member
    friend finder
    contributor
    1 pt
    @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?

    • This reply was modified 1 month, 1 week ago by Profile photo of Donna Slinger Donna Slinger.
    #429079 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    51 pts
    @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

    #429095 Score: 0
    Profile photo of Donna Slinger
    Donna Slinger
    Member
    beginner
    intermediate
    picture perfect
    profile
    curious george
    wise owl
    Group Member
    friend finder
    contributor
    1 pt
    @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

    #429714 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    336 pts
    @ssneg

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

    #429731 Score: 0
    Profile photo of Donna Slinger
    Donna Slinger
    Member
    beginner
    intermediate
    picture perfect
    profile
    curious george
    wise owl
    Group Member
    friend finder
    contributor
    1 pt
    @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

    #429740 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    51 pts
    @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.

    #429744 Score: 0
    Profile photo of Donna Slinger
    Donna Slinger
    Member
    beginner
    intermediate
    picture perfect
    profile
    curious george
    wise owl
    Group Member
    friend finder
    contributor
    1 pt
    @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

    #429826 Score: 0
    Profile photo of Donna Slinger
    Donna Slinger
    Member
    beginner
    intermediate
    picture perfect
    profile
    curious george
    wise owl
    Group Member
    friend finder
    contributor
    1 pt
    @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;
    }

     

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.