Explore the community Forums Lectora Online Lectora Online Questions & Answers Using jQuery in Responsive project

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #303781 Score: 0
    Profile photo of Marco Meissner
    Marco Meissner
    Member
    beginner
    intermediate
    Group Member
    curious george
    contributor
    wise owl
    5 pts
    @marco.meissner

    Hello,

    I’m using Lectora Inspire for serveral years and really often used jQuery to modify objects based on classes or names. That really worked perfect for me.

    Now I’m new to Lectora Online, just started creating a responsive project. Of course first thing I do is adding jquery to the project – but unfortunatly it isn’t working like it used to be. A short look in a published version: OK – Lectora publishs the content not (as it usualy does in an ‘normal’ project) as several generated html-files but as a bucket of js-files. I understand that this is the reason why I cannot use traditional jQuery selectors to modify the dom-elements.

    Does anyone has an hint for me how to use jQuery in an responsive Lectora Course?

    Thanks a lot…

    Marco

    #303785 Score: 0
    Profile photo of Marco Meissner
    Marco Meissner
    Member
    beginner
    intermediate
    Group Member
    curious george
    contributor
    wise owl
    5 pts
    @marco.meissner

    I figured out that you have to put all the code in “$(window).load(function(){ });” so the code will be fired, when the completed page is loaded and displayed. In the past I always used the “$(document).ready(function(){});” – but this will be fired when the DOM is loaded, a bit too early…

    This solution unfortunately has on side effect: The changes on the page will apply when it is fully loaded; so the user maybe will see the initial state of the objects.

     

    #303789 Score: 1
    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 Marco,

    When we released 3.0 with Responsive Course Design it did change our published output as you have noted. We use to have the HTML for the objects written into the page. Now we dynamically write the HTML for the objects at different points, so for a responsive title you may need to re-apply custom styles after a device rotation, or a view change in a PC browser.

    One way to handle this is similar to how we do breadcrumbs or page numbers.

    For example:

    1. Set <the object> to initially hidden.
    2. Action -> On Page Show -> Run JavaScript -> <jQuery styling code here>
    3. Action -> On Page Show -> Show -> <the object>

    If you want to keep all your JavaScript in External HTML objects you might be able to do some tricks with the page container (a div with id = ‘wndpage’). So on .ready( < set wndpage visibility to hidden > ) and then after your modification you can set the visibility of wndpage back to inherit.  With Lectora Online if you can dream it you can do it!

    Hope this helps.

    – Joe

     

    This post has received 1 vote up.
    #303833 Score: 0
    Profile photo of Marco Meissner
    Marco Meissner
    Member
    beginner
    intermediate
    Group Member
    curious george
    contributor
    wise owl
    5 pts
    @marco.meissner

    Thanks Joe…

    You’re right – everything is possible… 😉

     

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

You must be logged in to reply to this topic.