There is a box on the right side called “Can You Guess?” that when clicked loads a lightbox that displays content that I’ve developed with Hype. I have two layouts created, and no matter what I try, the smaller layout loads when the lightbox appears. If I adjust the page width slightly in my browser, Hype will instantly switch to the wider layout.
I’m assuming it must think that the lightbox is smaller and is thus loading the smaller layout. I’ve tried adjusting widths and haven’t made progress. Would love to get help!
I suspect the sizing is coming from this original width. Due to HTML limitations, Hype can only figure out if its container size has changed when the browser window changes size. There is an API that you can call that will manually tell Hype it needs to update:
HYPE.documents["2018q1"].relayoutIfNecessary();
It looks like the colorbox has a hook for onComplete that you could use (similar to the onClose I see in your document) where you should be able to call this.
The only other thing that isn’t working for me is that if the colorbox is closed and then opened, the timeline doesn’t reset to the beginning. I’m thinking I could use the onClose hook to reset the timeline, but I’m not sure which API I should use to do that?
Edit: Got it to work. Not sure if this is the best way, but I attached:
Glad you got it! That should be fine if it is the only timeline+scene you need to reset. You could also use showSceneNamed("sceneName") and that will reset all timelines in the scene.
Sorry to update this old thread, but I have a followup question. Every few months I need to add a new Hype widget (using WordPress plugin) to a new lightbox. Each animation has the exact same size and generally performs very similar animations.
Is there a way to remove the document name so that the .relayoutIfNecessary(); and goToTimeInTimelineNamed(0, ‘Main Timeline’); affect every single Hype document?
So instead of
HYPE.documents["2018q1"].relayoutIfNecessary();
I could take out 2018q1 and have the api affect every document on the site?
