Forum Discussion
Embedding long list drop down as web objects
Hi community! - for c current project, firstly I've been asked to let the user choose a country - I've already seen how long this could take if we need to include places like Varatu etc. And then 'List of professions' - before I throw my hands up in the air and say it can't be done, it obviously needs js, or an embedded web object? Anyone tried this before? Thanks..
Yeah done something similar with Javascript populating a dropdown list. That was with Lectora however. Should work similar with Storyline and Javascript however. Let me search my archives for it and see if i can mock something up in Storyline...
As Storyline doesnot has its own UI-elements for this we need to use UI elements in some Javascript library. I do think jQuery UI might be good...
How are you attaching a coded dropdown list to the project via JS or jQuery? I was thinking I'd need to navigate the DOM to the correct point and then append, but I'm not having luck so far because I can't find the proper node to append to.
Any hints would be greatly appreciated.
Hi Maura,
Storyline long time ago removed jQuery from its core. So first you need to add jQuery to it to use it. I use Vanilla Javascript ( Javascript without any external libraries like jQuery ) for quite a while now in Storyline. Main thing to know then is change all jQuery code to Vanilla code. Here some good samples for Vanilla-vs-jQuery...
https://vanillajstoolkit.com/reference/#Selectors
https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/
However at time jQuery is usefull. Or other third-party Javascript libraries. To use them you do need to add them to Storyline with either CDN-code or adding them with a WebObject.
If you check my posts and samples you find dozens of examples of that.
To select elements on the DOM ( or SVGDom ) in Storyline there are several methods. As the Timeline works as a z-based setup you can use z-index to select any element on your timeline. However that can be tricky. Whenever you change the order of your elements...z-order will change, so your scripts get different elements.
I use the accessibility-names of elements to select them.
In Vanilla javascript that could be something like...var baseElement = document.querySelector("[data-acc-text='item']");
or when you want to select multiple elements...var baseElement = document.querySelectorAll("[data-acc-text='items']");
As GSAP is built into the latest Storyline...changing and/or animating any given element on the page is then easy.gsap.to(baseElement , { duration: 1 , rotation: -24 });
As Storyline uses SVG a lot now, all elements are converted to SVG, there is some more complexity in selecting build-in elements like buttons, sliders, etc. Because they use the SVGDom instead of the normal DOM the normal selectors often fail. Do use the browser inspector to detect names and selectors for elements to get them into your Javascript code.
Adding jQuery and jQuery UI is simple. But getting Storyline to work with it is way more complex, mostly because of the above mentioned SVGDom. All text is handled as SVG and converted to the SVGDom and thus each line of text is split by <spans> . Making it way toucher to work with then when it was plain HTML.
Do hope this was somewhat helpfull.
Kind regards,
Math
Looking promising.. This expanding SL with Js widgets isn't quite new to me - I can explain pdfMake to you if you like..
No need ;-) but thanks...
Can one of you add a very simple example of this?
I had no problems using code in Lectora by adding a class name to an object and then grabbing that object's name using JS or jQuery. I'm a little lost about how to do the same in Storyline. Any tips would be very helpful.
This might help Maura - You need to get the player, then its all GetVar and SetVar..
I knew about GetVar and SetVar. Thanks for the example--I'll study it later.
Ok, the objects you wanted weren't text input boxes then? I hoped what you were looking for was a v. simple example of that
Simplest solution is add a WebObject with a normal HTML-dropdownlist in it.
I'm working on a computer simulation where I've recreated the interface that shows search fields at the top and rows and columns of data below. The dropdown list will be used with other fields to search again and display a subset of data.
I was hoping to use my PNG created in Illustrator as the bottom item in the timeline and create the dropdown list on top of it. Am I misunderstanding web objects? Can they be used to insert just the code for the dropdown list on top of my screenshot PNG? [Boy am I missing Lectora right now!]
My colleagues here have only used web objects to open another window where they've included an entire page of code or a huge PDF.
You can do both. Either have a transparant WebObject in which ony the dropdown list is in the external HTML... or add the image/png in the external WebObject / HTML. Depending on the needs of your specific project one or the other might be best. If you dont have a long complex list for your dropdown list... its easier to create a custom dropdown in Storyline. Glad to help it work Maura.
Kind regards,
MathBasically this is the simplest way. A simple HTML that shows as WebObject. Background is transparant.
I'm still no closer to the answer to my question - a searchable list of 100+ items - does anyone have an example?
Thanks all!
Searchable part you need to fix in the HTML
