Fixed/floating navigation bar in Lectora 16?

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

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

 

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?

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

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.

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

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