Forum Discussion

JesseSpinella's avatar
JesseSpinella
Community Member
14 years ago

Change scroll panel scroller color

Hello Heroes, Is there a way to change the scroll bar color? Not the background color of the box that you put objects in, but the actual scroll bar itself? Jesse
storyline 360
maxmaizels's avatar
maxmaizels
Community Member
4 years ago

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

Snorrski's avatar
Snorrski
Community Member
4 years ago

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. 

  • maxmaizels's avatar
    maxmaizels
    Community Member
    4 years ago

    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