Using jQuery in Responsive project

marco-meissner Community Member Posts: 17

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-meissner
    marco-meissner Community Member Posts: 17
    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.

  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 611 eLearning ROCKSTAR Admin Team
    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

  • marco-meissner
    marco-meissner Community Member Posts: 17
    Thanks Joe...

    You're right - everything is possible... ;-)