Post by azjgard on Jul 14, 2016 21:37:34 GMT
Being that Hippo is still in constant development and frequently updated, it's highly understandable that there are many things that it doesn't support yet e.g manipulating DOM elements.
The last few projects that I've worked on have demanded things that are extremely easy in plain HTML5/CSS yet extremely difficult to implement in Hippo. At the same time, using Hippo as a visual editor to place objects within a scene allots me an efficiency that I haven't necessarily been willing to give up.
As an example, I had to create an interactive animation for an introductory Calculus course. The interactive scene is divided more or less into three sections: section #1 has "Back" and "Advance" controls to cycle through the frames, section #2 has a container for an image that changes according to the frame, and section #3 has a container that contains lengthy blocks of informational text that also change according to the frame. I ran into problems with Hippo when I realized that, distributed throughout this lengthy informational text, there are also tiny images of complex Calculus equations that need to be inline with the text itself.
The text is long enough that it needs to be within a textbox that is scrollable, but the images of the Calculus equations need to scroll along with it. I haven't figured out a way to make timelines scrollable within Hippani, nor put images inside of textboxes.
I realized that HTML Objects export as 'div's by default and came up with a solution. I developed everything except for the text functionality inside of Hippo and exported it, including a blank HTML object in the place of where the text would eventually be. I created an external js file (outside of Hippo) and injected it into the document that all of Hippani's code is written to when it exports. Within this js file I referenced the default id that was given to the blank HTML Object in my movie (which I found via Chrome Developer Tools) and appended code to one of the functions I had declared pre-export to make it manipulate the innerHTML of the blank HTML Object (with images and text). Via this method, making a scrollable div with text and images was a piece of cake.
Now, my question is this: is there any way to turn off the weird way that the exported Hippani document treats regular DOM elements? I had to discover by trial, error and extensive forum searching that the objects would stay invisible until I set their display rule to 'block', but beyond that, everything functions very strangely if I try to manipulate objects via CSS, even DOM objects that I generate programmatically via the injected js file after exporting.
Are there any tricks to dealing with this?
The last few projects that I've worked on have demanded things that are extremely easy in plain HTML5/CSS yet extremely difficult to implement in Hippo. At the same time, using Hippo as a visual editor to place objects within a scene allots me an efficiency that I haven't necessarily been willing to give up.
As an example, I had to create an interactive animation for an introductory Calculus course. The interactive scene is divided more or less into three sections: section #1 has "Back" and "Advance" controls to cycle through the frames, section #2 has a container for an image that changes according to the frame, and section #3 has a container that contains lengthy blocks of informational text that also change according to the frame. I ran into problems with Hippo when I realized that, distributed throughout this lengthy informational text, there are also tiny images of complex Calculus equations that need to be inline with the text itself.
The text is long enough that it needs to be within a textbox that is scrollable, but the images of the Calculus equations need to scroll along with it. I haven't figured out a way to make timelines scrollable within Hippani, nor put images inside of textboxes.
I realized that HTML Objects export as 'div's by default and came up with a solution. I developed everything except for the text functionality inside of Hippo and exported it, including a blank HTML object in the place of where the text would eventually be. I created an external js file (outside of Hippo) and injected it into the document that all of Hippani's code is written to when it exports. Within this js file I referenced the default id that was given to the blank HTML Object in my movie (which I found via Chrome Developer Tools) and appended code to one of the functions I had declared pre-export to make it manipulate the innerHTML of the blank HTML Object (with images and text). Via this method, making a scrollable div with text and images was a piece of cake.
Now, my question is this: is there any way to turn off the weird way that the exported Hippani document treats regular DOM elements? I had to discover by trial, error and extensive forum searching that the objects would stay invisible until I set their display rule to 'block', but beyond that, everything functions very strangely if I try to manipulate objects via CSS, even DOM objects that I generate programmatically via the injected js file after exporting.
Are there any tricks to dealing with this?
