Forum Discussion

AdamBayliss-16a's avatar
AdamBayliss-16a
Community Member
4 years ago

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 'L...
storyline 360
MathNotermans-9's avatar
MathNotermans-9
Community Member

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...

MauraSullivan-9's avatar
MauraSullivan-9
Community Member
4 years ago

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.

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    4 years ago

    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

Related Content