Since there is only one NOTES panel on the side for an entire slide, and there can be an infinite # of layers on that slide, does anyone have a method, even Javascript, that would allow us to scroll specific lines in the NOTES to the top of the display?
If I have a slide with 6 layers, each with narration, I'd like to be able to scroll the portion of the NOTES for that layer to the top position onscreen with triggers.
I am assuming I ignore the line wraps, so the first trigger I put in the first layer is set to scroll to line 3:
var x = document.getElementById("transcript-content"); x.scrollTop = 3;
The second layer is line 5:
var x = document.getElementById("transcript-content"); x.scrollTop = 5;
Etc.
When I inspect element on the published course in the link above I don't see "transcript-content" anywhere, so I'm thinking maybe that is what needs adjusting?
DOH! Lol, sometimes I don't even know what I don't know.
Not sure I will be able to use this. The NOTES panel text wraps differently based on the monitor/device being used. Scrolling by Pixels means I would just be guessing.... If we need the notes on line 15 to be scrolled to the top and the line wraps could be anywhere...
It seems like an Occam's Razor situation without knowing the details. I'm assuming there must be a reason you wouldn't want to take the simplest route and split the layers into separate slides to get the results you want?
I would think these more complex possible solutions would only open up the chances for more issues rather than improving the learner experience.
@Phil - We are on the version of SL360 from Sept 2019, each time we install one of the more recent version bugs creep in when we try to edit prior courses, frustrating. So we are waiting for a chance to take some days to test one of the more recent versions.
@Scott - Although we didn't do it on that sample slide I pointed to in this thread, the most common reason we use layered content is to have an audio element that plays through the entire slide. The other reason is to have a moving background image through several slides, both of these are accomplished by playing them in the base while content changes through the layers.
See the slide "Why GHS is so important" in the sample course for the picture effect See the slide "Call to Action" at the end for the audio effect:
This issue with the notes is the lesser important issue. People can always scroll the notes themselves. I was using this thread to see if there was a simple way I can accomplish that for them with the version of SL360 we're currently using.
8 Replies
Try an execute Javascript trigger:
var x = document.getElementById("transcript-content");
x.scrollTop = 100;
Thanks for the suggestion. I tried to apply it to one of my projects and it doesn't seem to have any effect.
Here's the course, the tab I'm trying to apply to is called SHIPPING LABELS.
https://360.articulate.com/review/content/4c8f0b33-08c6-4ae7-8eea-1e3f78e3a290/review
I am assuming I ignore the line wraps, so the first trigger I put in the first layer is set to scroll to line 3:
var x = document.getElementById("transcript-content");
x.scrollTop = 3;
The second layer is line 5:
var x = document.getElementById("transcript-content");
x.scrollTop = 5;
Etc.
When I inspect element on the published course in the link above I don't see "transcript-content" anywhere, so I'm thinking maybe that is what needs adjusting?
DOH! Lol, sometimes I don't even know what I don't know.
Not sure I will be able to use this. The NOTES panel text wraps differently based on the monitor/device being used. Scrolling by Pixels means I would just be guessing.... If we need the notes on line 15 to be scrolled to the top and the line wraps could be anywhere...
Not sure how to adapt for that.
I found this StackOverflow technique:
https://stackoverflow.com/questions/2820086/javascript-find-and-scroll-to-text
and tried to apply it like so, still no onscreen effect:
$(window).scrollTop($("*:contains('The First is the'):last").offset().top);
$(window).scrollTop($("*:contains('SECOND is the SIGNAL'):last").offset().top);
Jerry, If you are using latest build of 360 for your latest example ensure you are preloading jquery (the $ sign will give jquery away).
Perhaps you can scroll down a certain percentage based on the height of the NOTES panel.
To scroll down 20% use:
var x = document.getElementById("transcript-content");
x.scrollTop = (x.scrollHeight-x.offsetHeight)*0.2;
If you want to scroll down half way, change the 0.2 to 0.5
Hi Jerry,
It seems like an Occam's Razor situation without knowing the details. I'm assuming there must be a reason you wouldn't want to take the simplest route and split the layers into separate slides to get the results you want?
I would think these more complex possible solutions would only open up the chances for more issues rather than improving the learner experience.
@Phil - We are on the version of SL360 from Sept 2019, each time we install one of the more recent version bugs creep in when we try to edit prior courses, frustrating. So we are waiting for a chance to take some days to test one of the more recent versions.
@Scott - Although we didn't do it on that sample slide I pointed to in this thread, the most common reason we use layered content is to have an audio element that plays through the entire slide. The other reason is to have a moving background image through several slides, both of these are accomplished by playing them in the base while content changes through the layers.
See the slide "Why GHS is so important" in the sample course for the picture effect
See the slide "Call to Action" at the end for the audio effect:
https://360.articulate.com/review/content/4c8f0b33-08c6-4ae7-8eea-1e3f78e3a290/review
This issue with the notes is the lesser important issue. People can always scroll the notes themselves. I was using this thread to see if there was a simple way I can accomplish that for them with the version of SL360 we're currently using.
This discussion is closed. You can start a new discussion or contact Articulate Support.