• Register
Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.

How to Reset Multi-State Object (MSO) States on Page Change

+1 vote
Is there a way to reset a MSO so that it always restarts at the first state rather than when you return to it, it is always at the last state you left it in?
asked Sep 30, 2014 in how_to by peteowen (210 points)
edited Nov 16, 2015 by justin
    
I need to do kind of the same thing. I have an on off toggle for my MSO. I always want it to be in the off state when I forward to a new page.

1 Answer

0 votes
 
Best answer

Hi Pete,

This can be done by attaching custom .js code using the Resources section of the in5 dialog. Try the following code:

$(function(){

$(document).on('newPage', function(e,data){
 $('.page').eq(data.index).find('.mso > .state').removeClass('active').eq(0).addClass('active').trigger('newState');

});

});


Update: Pete sent me a file and I tested and corrected the above code. I noticed that the Slider (Fade in) Page format was used. With this option, the MSO is not resetting until after the page animation. In this case, the following code will work much better, by resetting the MSO before the page is visible:

sliderSettings.onSlideInit = function(event, slider){
    $('.page').eq(slider.targetPage-1).find('.mso > .state').removeClass('active').eq(0).addClass('active').trigger('newState');
};


Update: This is a better (general) method that will reset the MSO on the previously viewed page, as well as trigger any nested MSO animations on the currently visible page.

$(document).on('newPage', function(e,data){
if(nav.previousPageIndex !== undefined) {
    $('.page').eq(nav.previousPageIndex).find('.mso').each(function(i,el){ toFirstState(el); });
    $('.page').eq(data.index).find('.mso').each(function(i,el){ toFirstState(el); });
}    
});

answered Sep 30, 2014 by justin (114,320 points)
edited Dec 10, 2015 by justin
I'm going to ask a reverse question. Is it possible to go back a page and remember the state it was left on? I have a table of contents with mso for chapters previews but it resets each time I visit.  I'm using liquid layout for having separate html files
Yes, but that's more complex with separate pages. You'll have to
1) listen for the "newState" event and save the data-id attribute and current state to localStorage. You may want the URL in there as a unique identifier as well.

2) When the page loads, retrieve any stored states from localStorage and apply them.
Hi Justin,

On the last question (the reverse question) is this doable in an easier way with the latest version of in5?

I want to go back to a page and remember the state it was left on, so the multi-state doesn't reset to state 1.

Any code suggestions?

I am using the web multi-page export option.
Hi Ed,

Not a simple way with the multi-page. To do so, you'd have to save the MSO state into local storage (or a cookie) and retrieve the state info when the page is loaded.
Makes sense.

Thank you so much Justin.
...