Change contents = turn off vertical scroll
February 21, 2018 12:00 AM
So, for my current project I need to have a what Lectora calls a "Text Block" (and what DOM calls an HTML element) with the "Auto" overflow setting so that if too much text is present, it will develop a vertical scroll bar.
If I pre-populate the element with lots of text, the Vertical Scroll property works.
If I change the contents using an Action, vertical scroll gets turned off.
I used some of Math Noterman's posted JavaScript to enumerate all the properties of the element, and it appears not to have the "overflow" attribute at all, meaning I can't set it in JavaScript.
I can set the contents to a variable, and that does keep the vertical scroll bar, but Lectora doesn't give me access to a "Before entering page" or "Before leaving [the previous] page" events, so I can't set the text before entering the page (that was redundant, wasn't it?) and if I change the variable after the page is displayed, it doesn't update the text element, and there's no action to "redraw this object" in Lectora either.
Anyone got a clue?
I'm using 17.0.6.
Thanks.
And literally as I was about to submit this message I thought: "Hmm .. can I navigate back to the page I'm already on?" Yes, yes I can, and that does force the text object to redraw. It's bizarrely circuitous, but works. To update the thing without its losing its scroll bar:
- Define the contents to be a variable.
- Have a script to update the variable in JavaScript on entering the page.
- Have the "Turn on the closed captions" button navigate back to the page you are already on to refresh the field.
Works, though.
Discussion (4)
When I have a textblock Lectora 17.1.3 with "Vertical Scroll" checked, it will have overflow-x:hidden and overflow-y:auto. It seems to work alright with Change Contents actions both directions, i.e. changing from text with scrollbar to shorter text and vice versa.
The earliest moment to change the content would be to either use an "On: Page show" action at the textfield or to use inline variable replacement by prepopulating your field with "VAR(your_variable)"
Thanks, Tim. Maybe it's a Lectora versioning thing. I only know it doesn't work right for me if I use Change Contents, but does work if I make the contents equal to a variable and then change the value of the variable.
I'm not using external javascript here, I'm just checking "Vertical scroll" for the textfield.
When I have a textblock Lectora 17.1.3 with “Vertical Scroll” checked, it will have overflow-x:hidden and overflow-y:auto. It seems to work alright with Change Contents actions both directions, i.e. changing from text with scrollbar to shorter text and vice versa.The earliest moment to change the content would be to either use an “On: Page show” action at the textfield or to use inline variable replacement by prepopulating your field with “VAR(your_variable)”
undefined
Thanks, Tim. I was not aware of separate overflow-x and overflow-y attributes, and I'll see if those work, if I ever go back to using JavaScript. If I can use built-in stuff in Lectora it's way easier. I don't really know JavaScript and I'm learning another programming language now. Learning two at once will inevitably result in my getting confused.
I tried both OnPageShow and the variable technique. Neither updates the contents of the field until you navigate. However navigation back to the page you are on works and is extremely fast, so I can use that without a problem. It happens so fast that page audio doesn't even start before the page reloads. There isn't even a visible flicker.
Discussions have been disabled for this post