Buttons and images inside of vertical scroll?

Scrolling textfields aren't converted to an image. The DIV the text is in is just styled to "overflow-x:hidden" and "overflow-y:auto" which makes the vertical scrollbar. You can still add actions to the image in the textfield. The problem is, that when you reopen the AWT the page is looking a little weird, like Lectora forgot the image is in the textfield (although it's still in there).

I'm not sure if this is what you are looking for but you can choose a custom page size (in Title Setup Menu) and make the height something like 2000. That will force a vertical scroll on all pages. Everything else should work like usual.

I wasn't sure about this one so I tested it out. You can add an image to a scrolling text block but not the button. It must have something to do with the fact that scrolling text blocks are converted as images when published and you'd lose the functionality of the button. Does Darrel's suggestion work within the parameters of your project?

Tim, easy enough to do with JavaScript but why add extra work? Christina asked for all three columns, the image and button (everything, not just one column) to be inside a vertical scroll, no? What you made, however, looks awesome. You should consider packaging it into an .awo for others. Hmmm, maybe add a parallax scroll effect...

Three text block columns and Image changes on button click depending on variable. V12.

You can append all objects you want to have in the scrollable region to a custom div using jQuery. All actions work the normal way.

http://community.trivantis.com/shared-content/scrollable-div/

Tim

Hi Darrel,

I didn't understand what exactly she's trying to achieve and thought it reads like not all objects on the page should be scrollable.

Tim

Hi, thank you very much for responding. I attached a screen shot of what I'm trying to achieve with the exam summary page. Ultimately, I inserted a table into a vertical scroll and divided by 4 columns. Depending on the user's success/failure during the exam either a checkmark or X appears in the one column. The user is then given the opportunity to review the content again if they choose by clicking the Review button. I was able to add an action to the Review image to link it but I can't turn it into a button.

{Tim K} I did notice the overlapping images in the top left cell; took me a bit to trust that the thing is still going to work, it did corrupt a few times while I was building it.

Another question I have is how do I make the final score text field (highlighted 100 in the screen shot) blank so that when the page refreshes from a Review page the final score text field doesn't blink "100" before the real score re-populates? I deleted the 100 but the score doesn't populate at all.

Regarding the Review button, I just tried on mouse enter/exit 'change contents' on the Review image, inside the vertical scroll, and it seems to work. I have 30 review buttons, and upon Preview the page sometimes freezes. Is 30 too much for Lectora?

To avoid the 100% being visible, you can make the textfield initially invisible and add an action to it:

On: Page show

Action: Show

Target: This object

Delay: 0.1 sec

This way the real score should be inserted before the textfield is visible.

Adding images to textfields may be problematic, esp. in scrolling textfields. Tables in scrolling textfield have always been a bit untidy. When adding images to tables in scrolling textfields maybe 30 are too many. Maybe it's just too much for Preview, you should check what it looks like after publishing.

I'd still recommend the way from the example I've shared or Darrels approach by opening the results parts of the page in a new window.

Tim

undefined

Tim, your suggestion is not working. I tried .05 seconds and 1 second, and 100 still appears before the real score. Why can't I delete the characters out of the text field? I tried that too, but alas, no score!

Ahh I like that code, thank you! I've been testing the Summary page on the LMS and it works consistently every time, but I think you are right, we should consider a more stable method.

mallow76- no, I did not have the text field set to invisible... Missed that instruction. I edited and re-tested and it seems to work now. Thank you!

Tim- the action to Change Contents is on the exam summary page, as well as the text field. It appears in the line up of other actions, above the object items.

Are you sure that you set your score text box to be Initially Hidden?

and you could always change the holding text to something like --- (that was 3 dashes in the editor!) instead of 100. at least that way someone doesn't see a wrong score.

When do you change the content of that textfield?

Actually the action to show the textfield should happen 0.1 sec after the Change Contents action. If you change the content when the textfield is shown a delay before showing the textfield won't help. You can change the trigger of the Change Contents action to "On: Page show" as well (without delay) and it should work.

Tim

Thanks Mallow76 and Tim, I didn't have the text box initially hidden.

I've come across something else that relates while testing in the LMS. On the Exam Summary page, when I roll my mouse over the Review image (that links to a review page) I get a javascript:void(null) message in the browser. The message appears on the review page also, but goes away when I roll out of the review button. What is causing this?

Looking at the debug log I see this: Navigation Request = Type=SUSPEND ALL, TargetActivity=null, MessageToUser=

Is this referring to the bookmarking? We have AICC_Lesson_Location set to Empty on all of the Exam pages except for the first Introductory page so that our LMS won't try to bookmark them. Do we need it on all the pages? What if the action is under the AU as opposed to each page?

undefined

Is it a popup warning? or is it just that white "tooltip" in the bottom left corner of the screen that tells the href target of the javascript action?

Do you know how to view the console in the developers tools in Chrome? When the JavaScript null pop-up message occurs in the browser does it say something else in the console?

Open lesson in Chrome. F12 to open developers tools. Select console in menu bar. Run lesson to get message.

This tooltip just tells where the link will direct you to. In case of a javascript function (all Lectora actions are javascript functions after publishing) it tells you what it does (more or less). I don't think you can influence this and it is not a warning or a hint to a problem. If you move your mouse over the page buttons in this forum, the same tooltip will tell you where it will direct you (see screenhot).

Tim

Tim,

Ok, sounds legit. Thank you for the explanation in case my client inquires about it.

undefined

So I troubleshot the bookmarking and that's not what's causing the javascript message. Anyone have any ideas?

Darrel,

Thank you. I attached a screen cap of the console window.

Tim,

It's not a pop-up, just a tooltip bottom-left browser window.

I have tried, repeatedly to add an image to a text box with vertical scroll on. The image initially loads but as soon as I touch any key it disappears from the text box but is still on the page but stuck to the left hand side and I am unable to move it. What am I doing wrong? I am using Lectora online and this would be a very useful thing to do. Pip

Christina - Are you getting the null in published content or preview in browser? The browser preview will always use the null rather than the actual link.

Pip - I haven't used Lectora Online to develop, but this may apply the same way it does with Lectora. Are you selecting the text box in the Title Explorer or the image? You need to select the text box in order to move the object during development.