Hi, I need some help with some infographic I worked for a while in hype and now am trying to integrate with my webpage. It’s an animated map with multiple clickable zones. When you click in one of the zones it triggers a script from the webpage in which the hype infographic is embedded which creates a new “window” (it’s a new div via createElement in javascript that looks like an embedded window) which has another embedded hype infographic. the problem is i’m creating this new window each time you enter a zone and eliminating it when you exit the new window (via jquery .remove() ), so the first time it creates the hype embedded div works perfect but from when you exit (and remove de div created) the script from hype doesn´t stop working in the background and begins to have errors which I can see in the javascript console and make the browser slow (because the hype embedded div doesn’t exist).
And finally when you click again to a zone in the map (and the process of creating new element repeats) the hype element created has different id and classes from the original so my css style don’t work and since both script are working at the same time (the original and the new one) the browser starts to be so slow that sometimes it resets itself automatically.
I don’t have ideas of how can I solve this problem without having to recreate the animations I made with Hype with only css animations so if you can help me it would be wonderful.
Even though thanks to hype i’ve learn some stuff about javascript (all what you see in my webpage was learnt from using hype even if is now in html+css+js ) i’m not an expert (i’m a biologist and mountaneering guide ) so please help me in the more simplified way you can.
I embed my original hype documents for both infographics and the files for my webpage where i’m trying to embed them.
The problem occurs because Hype loads and runs javascript code which expects its divs/elements to be around. If you remove them Hype’s runtime won’t be happy . There’s also no way to “unload” a Hype animation or tell it to reset.
The easiest method to correct this is probably to put the Hype animation in an <iframe> in your “window” element. You could just reference the exported .html file as the src. This will cause it to fully load within its own webpage and the entire state will be reset each time it is displayed.
The other method would be instead of using the .remove() method to instead keep the DOM element around but hide it (perhaps with a display:none). Then instead of using createElement the second time, if the element already exists you can simply set the display to be visible. I think this should work okay, but there might still be unintended consequences with some positioning so you’d need to test it. Also it won’t reset the state and Hype animations would still be running in the background. For these reasons, just using an iframe may be easier.
Thank you Jonathan, I just made the iframe but I then realized that variables of the parent are not passed to the iframe…do you know a way to do this? i`m looking in the internet and they say to use php which I don’t have a remote idea of how to use…I need to pass the ID of the element clicked to the iframe and some functions from the main frame.
Generally speaking, communication between frames is usually done through a javascript method called postMessage which can broadcast and receive strings of data. It isn’t a cakewalk to setup communication, but there are examples online and some on the forums too. The other way is that an iframe can access the parent document via the appropriately named parent object. So you might be able to call into that directly depending on your purposes.
Thank you Jonathan, I learnt about postMessage and worked perfectly using just parent.variablename and parent.functionname() because both html are in the same domain. Have a nice day.
) i’m not an expert (i’m a biologist and mountaneering guide 
) so please help me in the more simplified way you can.
) (The section with the map (and the problem) is called “Destinos”)
. There’s also no way to “unload” a Hype animation or tell it to reset.