On a slide in my story (Storyline 3) I mention, in text, the Resources tab in the player. Is it possible to create a hyperlink that will run JavaScript to "activate" the Resources panel from that text? I'm guessing so, but I'm not sure what to use. Any help would be greatly appreciated!
In fact its not so hard to achieve. In the browser you use the Inspector Tools to figure out whats the id, classname of the Resources tab.
You find its called 'resources-panel' and you can get a CSS-selector from the browser directly. document.querySelector("#resources-panel");
Then you have to find out..how Storyline show that element. And clicking the resource button a few times in the browser...and properly checking the changing code in the inspector...you will ( might ) notice that the only thing changing in the 'resources-panel' is that display is switching from 'none' to 'block'. Quite default way of hiding/showing elements in HTML5.
Ok so what is the code for that... gsap.set(document.querySelector("#resources-panel"), { display: "block" }); As GSAP is built into Storyline360 thats my goto-solution for any changes in Storyline and the browser. Im aware of the fact that GSAP is not build into Storyline 3 by default, so you do need to add GSAP or find a workaround to get that done in Storyline3.
Adding the Storyline360 file for reference for anyone needing this.
In Storyline 3 we can use this code to activate the resources panel.
var elem = document.querySelector('#resources-panel');
// Set display to block elem.style.display = 'block';
I wanted to thank you. This was a huge help in one of my projects.
I'm attempting to do something similar in another project with the menu/glossary sidebar, but for the life of me I cannot get it to work.
I've found what I believe is the name, #sidebar, and I've attempted to use a modified version of your script above, but it doesn't appear to do the trick.
3 Replies
In fact its not so hard to achieve. In the browser you use the Inspector Tools to figure out whats the id, classname of the Resources tab.
You find its called 'resources-panel' and you can get a CSS-selector from the browser directly.
document.querySelector("#resources-panel");Then you have to find out..how Storyline show that element. And clicking the resource button a few times in the browser...and properly checking the changing code in the inspector...you will ( might ) notice that the only thing changing in the 'resources-panel' is that display is switching from 'none' to 'block'. Quite default way of hiding/showing elements in HTML5.
So what we need now. We need to change the CSS for that element on a click on a button.
Here you see a sample working...
https://360.articulate.com/review/content/2f3ff97e-4c17-47c4-a54a-8c473927b650/review
Ok so what is the code for that...
gsap.set(document.querySelector("#resources-panel"), { display: "block" });As GSAP is built into Storyline360 thats my goto-solution for any changes in Storyline and the browser. Im aware of the fact that GSAP is not build into Storyline 3 by default, so you do need to add GSAP or find a workaround to get that done in Storyline3.
Adding the Storyline360 file for reference for anyone needing this.
In Storyline 3 we can use this code to activate the resources panel.
var elem = document.querySelector('#resources-panel');// Set display to blockelem.style.display = 'block';
Easy enough.Kind regards,
Math
Math,
I wanted to thank you. This was a huge help in one of my projects.
I'm attempting to do something similar in another project with the menu/glossary sidebar, but for the life of me I cannot get it to work.
I've found what I believe is the name, #sidebar, and I've attempted to use a modified version of your script above, but it doesn't appear to do the trick.
Your articles are always fantastic reads.
Any help is appreciated.
edward
do share a sample and i will check it.