Fixed/floating navigation bar in Lectora 16?

amak
amak Community Member Posts: 23
Hi there,

Is it possible to create a navigation bar at the top of my page where it will remain fixed and any pages with content longer than the page will keep scrolling down and behind the nav bar?

Can this then be applied on the desktop view which will then be inherited into the other device views in L16?

Thanks in advance!

Comments

  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    I'm trying to understand what your looking for.....are you talking about a navigation bar that's frozen to top like in Excel where when you scroll it follows you?
  • amak
    amak Community Member Posts: 23
    Hi Jennifer,

    Yes that's what I'm looking for! So if a user wants to select a button from the navigation bar, they don't have to scroll all the way back to the top of the page.
  • klaatu
    klaatu Community Member Posts: 988
    What are the dimensions of your lesson window?
  • amak
    amak Community Member Posts: 23
    Hi Darrel,

    I am using the default dimensions for all views in Lectora 16, i.e. Desktop: 1009 x 662 (same for tablet landscape), Tablet portrait: 785 x 1000, Mobile portrait: 480 x 763 and Mobile landscape: 785 x 450.

    However, some page lengths might change depending on the amount of content on the page that requires scrolling.
  • fharo2798
    fharo2798 Community Member Posts: 1
    I need to do the same... Any answer? Is it possible?
  • klaatu
    klaatu Community Member Posts: 988
    Try the following to make any element "stick". Load jquery and then the attached Sticky Anything jQuery plugin. Make sure you load jQuery first.

    Then on the show of the object run the following Run Javascript action:

    $("#HTMLName").stickThis();

    Substituting the HTMLName for the actual HTML Name of the object. The plugin includes the ability to only stick the item for minimum and maximum screen sizes and you can adjust the top position at which it sticks as well as the items Z-index so it stays on top. See the GitHub link for instructions.

    The attached example was made in version 12. Please let us know if this works for you.

    Darrel
  • klaatu
    klaatu Community Member Posts: 988
    just realized I forgot to upload the make sticky plugin. It's at the GitHub site as well but here it is.

    DRS
  • mbervoets4957
    mbervoets4957 Community Member Posts: 2
    Is it also possible to make a group stick to the top of the page?

    I looked the HTML name up in the properties/group description tab, but the code would not work for me. However if I use it on a single object it works perfectly fine.

    Of course, I also noticed that a group in Lectora isn't necessarily a group (or div) in the HTML code so perhaps that is causing the problem

    I'm working with Lectora 12 btw

     
  • dnoctor8117
    dnoctor8117 Community Member Posts: 15
    Hi there Darrel, Thanks for the tip. I got it working no problem in Lectora 12 but can't seem to get it working in Lectora 16... am assuming it is something to do with how responsive design is dealing with the objects. Any suggestions would be appreciated. Den.
  • dnoctor8117
    dnoctor8117 Community Member Posts: 15
    Hi there @amak,  did you ever find a solution to this based on Darrel's recommendation. It works fine on Lectora 12.... but not in responsive L16?
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    If you check the forum you would have find this share:
    http://community.trivantis.com/shared-content/one-page-setup/
    And allthough its a bit more then just a sticky element, the bottom bar and top bar  always stick  in Lectora 16 RCD.
  • dnoctor8117
    dnoctor8117 Community Member Posts: 15
    Thanks so much Math (@mnotermans5114) for reaching out. I did read your One-page-Setup post some time back... but wouldn't it be beautiful if the bottom and top bar scaled up or down with the rest of the responsive course design. For example if you minimize / restore down the browser, both the bottom and top maintain the same scale settings as you decrease the page width...

    I have tried a few different "sticky header" js solutions out there... which work fine on non responsive titles... but not on responsive titles.

    For example, I took look at Garlands solution (www.stickyjs.com / https://github.com/garand/sticky).... used the "on show", "run javascript" command.... $("#sticker").sticky({topSpacing:0})..., which works fine in a non responsive course... both not in a responsive course...

    The only way I can show it in a responsive course is to add insertAfter('#pageDIV'); ... which of course, sends the element to the left side of the browser viewport... outside the #pageDIV "center stage".

    I took a look at Sergey's LUC 2016 app, but as it is geared towards mobile or tablet devices... everything is positioned towards the left and desktop (centered) view is ignored... as it is not required.

    What I am hoping to achieve is a fixed positioned header that contains a few buttons with certain actions when pressed. The page height exceeds the normal screen view.

    Any suggestions would be appreciated.

    All the best.

    D
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Hi D Noctor,

    Trivantis announced a sticky feature at the LUC2016, so let's hope it will be in a next version and will fullfill all your wishes ;-)

    Kind regards,

    Math
  • klaatu
    klaatu Community Member Posts: 988
    It will probably never happen, but until standard external CSS with media queries replace programmatic control of responsive design you will always have the need for 'features', 'solutions' and 'fixes'. It's unfortunate because there are tons of libraries, frameworks and plugins that can't be used, break or require extensive wrestling to get to work with Lectora published content. This is just one small example.
  • dnoctor8117
    dnoctor8117 Community Member Posts: 15
    Thanks Math and Darrel,

    I've read many of both your posts and have great respect for the contributions you have made to date. I really appreciate your feedback. While it is a small issue, it has eaten up quite a bit of time... almost to the stage of becoming "obsessed" in trying to find a solution... at least I can say I have learned quite a bit regarding JSquery and CSS in the process, so it wasn't a complete waste of time. Thanks for bringing me back to my senses... I thought I was going mad :) I look forward to future features... though deep down, I might revisit this at some stage and if I find a solution, I'll run it by you both. All the best. D
  • dnoctor8117
    dnoctor8117 Community Member Posts: 15
    Hi there guys,

    I thought it would only be fair for me to return to this issue regarding fixed position / floating menus etc. One of the things I experienced... the long way... was that it is important that users express what LMS they are using. I had spent quite a bit of time looking into why fixed positioned objects / menus etc did not work for me. I spent a lot of time looking into jquery and Dan's recommendations (which by the way are fine).... however when I looked into it more I realized that despite all the wonderful solutions out there... it all boils down to what LMS is being used. I am using Moodle.

    For example the SCORM player in Moodle uses iframes... something that IOS devices don't like.... so despite trying all the wonderful jquery suggestions that are out there... they don't work within iframes (Moodle's SCORM player) (SCORM Cloud works a little differently). I have amended some of the Moodle code to address this problem. Basically it emulates "Totora's" version of Moodle whereby it gives Moodle Administrators a third option to open up SCORM packages in a new window... without the use of iframes. The downside is that is uses "pop ups"... but the upside is that Lectora published SCORM packages can be viewed as they were intended to be. I am embarrassed to say it took me some time to realize my oversight that Moodle's use of iframes in its SCORM player and that was the main issue. But since posting the code on the Moodle forum, I have received quite a number of emails stating how much it has helped.

    The use of iframes also limits Lectora's Responsive Course Design elements... however opening up a course in a window with no iframes sorts it out completely. Please note however it requires opening up everything in a new window that shows the full URL location of the SCORM activity... saying that only logged in users can view the activity. I cannot take full credit for this code... it was originally posted by Jamie Smith in 2014 and fell to the wayside... I simply modified it according to Moodle's changes over the years.

    In short, for me... two problems sorted in one... fixed positioned menus and responsive design in Moodle SCORM activities.

    You can review two main postings here.... one is the main Moodle forum about the issue the second is a Moodle Tracker Issue:

    https://moodle.org/mod/forum/discuss.php?d=339315#p1398071

    and

    https://tracker.moodle.org/browse/MDL-46563

    My recommendation is that when a Lectora user experiences a problem... they should also state what LMS they are using also as it might help to narrow down the problem area.

    I hope this helps out Moodle users out there.

    All the best.

    D
  • dnoctor8117
    dnoctor8117 Community Member Posts: 15
    By the way... Thanks to Darrel, Math and Sergey (Branchtrack) who I originally got in touch with (directly and indirectly) regarding this issue... without their input I would have shelved this months ago.

     
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Great you found a solution, and indeed... as you state... running standalone HTML5 is quite different then scormed in a LMS, so you always have so LMS checks to do in the end.

    Regards,

    Math