Forum Discussion
Changing state directly from JavaScript?
Hello Heroes!
Maybe someone out there can help me out! I've been playing with JavaScript and Storyline, you can see an example here: http://bit.ly/1IjNEKs.
But, what I can't figure out is how t...
I'm back finding that I'd really like to do this again. I'd love to have something like:
player.SetState("nameofobject", "state name");
As Articulate updates HTML and changes structure of it all also without warning to developers upfront old code especially when targeting existing HTML structure often fails. Then you have to figure out what change Articulate did and fix your code accordingly. So im checking now whether states are as before...or maybe something changed and they might be easier accessible.
When checking a simple SL with states in Firefox you will notice a state basically is an invisible DIV as before. When switching to it using a trigger...it is shown and the original state is hidden.
Basically nothing has changed on this thus.
It is possible to find all DIVs related to an element ( say it has statenames: 'Over', 'Down', 'Custom1', 'Custom2' ) and then target the element...hide all states and show the one you want to show with javascript.
Im gonna see if i can get that working...
First tests show that this is ( more or less ) the structure any image with states has.
The main element:
.slide-object-stategroup.shown;
A div with class of .group in it
Then the first basic image that is shown has this class
( all images in SL get converted to inline SVG )
div.slide-object-vectorshape.shown;
div.slide-object-vectorshape:nth-child(1);
This is my custom state i added. A hidden DIV below it.
div.slide-object-vectorshape.hidden;
div.slide-object-vectorshape:nth-child(1);
Next step is trying to use this structure to get all divs in a specified state-group.
If i can get those ( and im quite sure i can ) then i can hide all, and show any of the states at will using javascript.
Oh my, this really remembers me what i dislike in Storyline development. The HTML generated when adding images manually too Storyline differs to when in 'Edit State-mode' you either use 'Duplicate State' and then change the state by importing another image.. or when you use 'Add Pictures as States'.
For now i use ' Duplicate State' and change the image. That seems workable. The other approaches on creating new States give complete other HTML structure. But this really is a Articulate/Storyline thing. As they want to keep it backwards compatible with older versions ( at least as much as possible ) they tend to inherit weird behaviour from old versions too.
