Change scroll panel scroller color

hi
thank you so much for helping to educate me on javascript.... i would love
to explore this tool. i think it could be like magic.
when i attempted to follow information below, i did not see any
difference. it is clear to me i have a code error
attached is the story file -1- sliide and notes table contain free script.
naturally the triggers also contains the script.
all your help is appreciated
max

Hi Max

I can't see the attachment?

As for learning som javascript, I'd suggest trying out Codecademy's free courses in Javascript and jQuery. 

dear snorre

thanks for you help

i am not sure how to get this to you, so hoping this works

from prev email, now with file attached

hi
thank you so much for helping to educate me on javascript.... i would love to explore this tool. i think it could be like magic.
when i attempted to follow information below, i did not see any difference. it is clear to me i have a code error
attached is the story file -1- sliide and notes table contain free script. naturally the triggers also contains the script.
all your help is appreciated
max

Now that is so Simple and Helpful!
Thank you Snorre!!!

Alright, I see the mistake. You wouldn't notice if you don't know javascript. Your first script looks like this:

$("<style type='text/css'> INSIDE STYLE RULES HERE </style>").appendTo("head");

.scrollarea-scrollbar:before { background-color:#FF0000!important; }

Should look like this:

$("<style type='text/css'>.scrollarea-scrollbar:before { background-color:#FF0000!important; } </style>").appendTo("head");

Same goes for the second. And you might as well have them both at once:

$("<style type='text/css'>.scrollarea-scrollbar:before { background-color:#FF0000!important; } .scrollarea-scrollbar:before { left: 10px !important; width: 20px !important; border-radius: 0px !important;} .scrollarea-btn:after { left: 10px !important; width: 20px !important; border-radius: 10px !important;} </style>").appendTo("head");

A final piece of advice: make sure that you have jquery available in the browser. Many LMS' run jQuery as a standard, but it is not a given. If you test the course locally, you will not have jQuery in the browser, and should add it. The following code can check if jQuery is present. 

if (typeof window.jQuery == "undefined") { 
   var head = document.head;
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = 'https://code.jquery.com/jquery-3.6.0.js';  
   head.appendChild(script);
};

You can add this as a separate javascript trigger, to run before the other script. To make completely sure that it has time to run, set this first one to run on timeline start, and the other script to run when timeline reaches 0.25 s. 

hi Snorre
you are a magician
the code worked when a .25 sec delay was provided in the slide...
looks great

if you are interested i have figured out a work flow (not java or any of
those other scripts, but would love to know if possible) for nesting -1-
storyline inside another. doing this as a web object requires opening up a
new browser window, which if the e-learning your are providing contains
many such contents.
happy to share if you would like
thanks again..... it seems this question had been lingering in the
community for a few years....thanks for providing assistance to solve
max