Forum Discussion

MrY's avatar
MrY
Community Member
9 years ago

JavaScript Tricks for Articulate Storyline 3/360 show/hide menu

Has anyone got the show/hide menu to work here on the Elearning Brothers website? I've tried attaching the code to a button but nothing seems to happen   Thanks
storyline 360
MarkCairns's avatar
MarkCairns
Community Member
6 years ago

Hi Zsolt,

I've been using the menu open code you provided  $( ".menu-icon-wrapper" ).click(); for a while now. However, I just republished a course and it has stopped working. If I run it in the chrome console it works but not on the button in Storyline. Have you experienced this lately? I'm using the latest version of 360.

Thanks!

 

PhilMayor's avatar
PhilMayor
Super Hero
6 years ago

jQuery has been removed, and the player has been rewritten so this will not work. 

You can preload jquery, you just may need to change the item referenced for it to work. Hopefully Zsolt has a work around.

  • MarkCairns's avatar
    MarkCairns
    Community Member
    6 years ago

    Thanks Phil! I found a fix.

    Execute this JavaScript on the Slide Master:

    function dynamicallyLoadScript(url) {

    var script = document.createElement("script");

    script.src = url;

    document.head.appendChild(script);
    }

    dynamicallyLoadScript("https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js");

    And add this JavaScript trigger to the button:

     $( " .menu-icon-wrapper " ).click();

    • NeilLundin-fcb5's avatar
      NeilLundin-fcb5
      Community Member
      6 years ago

      Thanks Mark. You saved the day!

    • JamesMcCarthy-e's avatar
      JamesMcCarthy-e
      Community Member
      5 years ago

      Is it possible to do this when the timeline starts instead of when a button is clicked?

      • AlxSanchez-2a8b's avatar
        AlxSanchez-2a8b
        Community Member
        5 years ago

        Hi James,


        Create a slide trigger:

        Execute JavaScript
        When the timeline reaches time 1s

        Where the JavaScript is:
        document.querySelector("#hamburger > div").click();
        document.querySelector("#glossary-tab").click();
        document.querySelector("#play-pause > div").click();

        Best,

        Alx

    • Sagar_Mavale's avatar
      Sagar_Mavale
      Community Member
      3 years ago

      Hi Mark, 

      Many thanks to post this solution.

  • AllanBolton's avatar
    AllanBolton
    Community Member
    6 years ago

    Hi Phil,

    I thought you might be able to point me in the right direction...

    Just wondering/hoping if someone has had any success getting the Hide/Show Sidebar toggle js to work in SL3 V10 released June 6th 2020 as it did in the previous version.

    Hide/Show Sidebar toggle works fine i.e., fade/close/minimize using the selector '.area-secondary' when published using SL3 V9 with jQuery bundled

    $('.area-secondary').animate ({ width: 'toggle', opacity: 'toggle' });

    After updating to SL3 V10 with jQuery removed I referenced it using method #1 from - Storyline 360 and Storyline 3: How to Reference the jQuery Library

    In SL3 V10 the selector has changed to ID '#sidebar' and is contained in a <section> SL3 V9 used <div>

    When using the following code the Hide/Show Sidebar toggle only toggles the opacity but doesn't appear to toggle width i.e., close/minimize the sidebar

    $('#sidebar').animate ({ width: 'toggle', opacity: 'toggle' });

    I've included samples for SL3 V9 and SL3 V10 here for comparison if anyone is interested to have a look.

    Thanks

    • IrComfar's avatar
      IrComfar
      Community Member
      5 years ago

      Hi Allan

      Did you find a solution?

      I have exact same problem

    • GregoryNabong's avatar
      GregoryNabong
      Community Member
      5 years ago

      Hi, Allan. 

      Were you able to completely hide the sidebar? I'm having the exact same issue.