Hi all, and thank you so much for sharing the storyline file. Just wondering if any of you experienced problems with this code when publishing using the new modern articulate 360 menu?
I have not used any javascript. I made the Menu tab fill to 100% transparent and played along with css and stylsheet file (form the published package) to adjust the position and theme of the default menu to something customize.
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.
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
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
I have included a storyline file below that shows how to toggle the Glossary tab and it shows its content. I was able to do so given all the information presented here.
44 Replies
Hi Jonathan,
i think you have already got the answer to your query. But if it is not then you can refer the attached .story file.
Have a good day!
Thanks,
Amey
Thanks for this. I hadn't got it to work so a big thank you!!
You are welcome! I'm happy that i'm able to help you.
Yeah it worked for me, but yep I can see that Amey's one works as well ... but I have had no luck with the animated Next button :(
this may be because of smart quotes. Try to use the plain quotes.
Also i have attached the file for your reference.
Do let me know if it works for you.
Thanks,
Amey
Any idea on how to show/hide topbar Menu tab?
Regards,
Amey
Hi Amey!
The topbar menu tab is a bit easier to control and doesn't require Javascript to show/hide.
First, you'll want to enable to Menu tab in Player Properties. Next, you can show/hide the tab on a slide-by-slide basis within Slide Properties.
Thank you Alyssa. I wanted to toggel the default menu with customize on screen menu button.
I have achieved this by updating few lines of css.
As I cannot share the course link below is the screen shot for the same:
Thanks for letting us know how you achieved this, Amey!
Hi all, and thank you so much for sharing the storyline file. Just wondering if any of you experienced problems with this code when publishing using the new modern articulate 360 menu?
Thanks - this is a great help!
Has anyone managed to get this to work in the modern player?
For me in the Modern player, when I use
the text in the side menu bar fades away, but the menu bar doesn't actually close/minimize.
I have the same issue, and you can use $('.area-secondary').toggle() to get the same result.
Hi,
Is it possible to change the menu position to top right when we use this script?
Could you please share the script?
You can try this method to toggle the menu in the modern player:
https://www.rabbitoreg.com/examples/p99/#/lessons/a2XRT-5gHOwbWDNMCfBnrbTKF5fmgvqi
Basically, it's using jQuery to trigger a click on the menu button.
Thanks for the quick response.
Anyway to toggle the menu (top menu) in the Storyline 3?
I have not used any javascript. I made the Menu tab fill to 100% transparent and played along with css and stylsheet file (form the published package) to adjust the position and theme of the default menu to something customize.
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!
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.
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();
Many thanks @Mark Cairns this works perfectly in Storyline 360!
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
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
I've included samples for SL3 V9 and SL3 V10 here for comparison if anyone is interested to have a look.
Thanks
Hi,
I have included a storyline file below that shows how to toggle the Glossary tab and it shows its content. I was able to do so given all the information presented here.
The breakthrough for me was Mark Cairns’ answer to Phil Mayor. I also looked at Zsolt Olah's site https://www.rabbitoreg.com/examples/p99/#/
Enjoy!