Control html element which is embeded in html body tag

Hello, I love the way making animation with Hype :slight_smile:

Currently, 90% of all my banners are done with Hype but there is still 10% which can not be handled because of specific request from client.

I want to know if;

  • I can insert custom html tag(for e.g,
    inside html body tag directly(not generated by javascript instance when runtime as Hype normal behavior).
  • If we can do so, can I also control the element such like normal elements in Hype timeline ?

I have read manual about "export scripts" but it's not the case, because I need control animating with the element.

To summary my goal;

  • Exported html file should have
    tag in html body.
  • Able to control the element in Hype application.

Thank you ! :slight_smile:

to be a native Hype-Element it has to resist in the Hype-Element-Stacking-Order. so no for animating elements laying next to the Hypedocument.

but as everything is possible somehow, somewhere there might be a workaround :wink:

2 Likes

There's no way to animate a non-Hype created element via Hype APIs, but I do think this is a good feature request :slight_smile:.

I assume that you need your HTML to be static text in the body because your ad system is doing some sort of substitution or on load there's ad server code that's running and expecting things to happen at a certain time/way?

Depending on the goal, you may be able to add this to your exported .html (either manually or via export script if it is boilerplate), and then have some code that puts the html tag within a Hype element via the javascript DOM removeChild/addChild calls later. This is assuming you only need to do "top level" animation of the element, and aren't looking to animate sub-children.

Yes, you guessed exactly right. The only static html text(as boilerplate) can be changed by the ad server. Moreover, the target code(element) is not only needed top level animation but also styling, positioning for multiple banner sizes. hmm.. Hype is doing really good job on these things..

I'm thinking about parse data.plist and rebuild the banner via Webpack automation once the Hype work is done.

I don't really recommend parsing the data.plist file if you can avoid it! This may change in any future Hype release, and we don't document nor support it :slight_smile:.

One item that may (or may not) help is that Advanced Export as well as Export Scripts have the "Inline data file+loader" option. This will put he animation json in the html file. Sometimes if there are substitutions like %%MAGIC_VAR%% they will export cleanly as such, and can be easily replaced by ad systems. Though it sounds like the use case might be more extreme.

If you have any docs on your requirements I'd be happy to take a look and may be able to offer other advice.

You can probably use

1 Like

I've been found a solution with minimum effort.

For short: I changed the value of Hype Element manually on index.html after export with the option inline-loader.

for e,g. :
below the inde.xhtml: "681": {
G: "",
c: "",
w: "text what I written in Hype" // change this into document.getElementById('id-what-I-inserted-in-body').innerHTML,
...
}

Step by step

  • Export banner with advanced option checked inline loader

  • Insert html static tags manually in somewhere between body tag. The html tag will be served as interference between the banner and the banner platform's requirement.

  • change the Hype element's value(written index.html) to get the innerhtml from the static tag which I added manually on js runtime.
    for e.g, ... w:document.getElementById('id-what-I-inserted').innerHTML ...

  • And I automated this with nodejs(or which you prefer of course).

Thanks to forks giving me help to find the right direction.

For that you don’t need to hack the output… just add


<script>
document.write(document.getElementById('id-what-I-inserted').innerHTML);
</script>

In any innerHTML. Should work. Not tested as I am on the road. Adding stuff to body requires an export script or manual labor. Replacing the template is also an option but regresses on every hype update and is global. The export script above is plenty powerful as well … I really should make a video about it.

1 Like

Thanks for info. Actually, I've tried export script you've told on my personal laptop. It is awesome indeed but we are not allowed to install python in our company laptop yet. Anyway it's good idea to make tutorial video, because I had also difficulty to get into first running the export script.

  • I didn't know it's python 2 version needed
  • I didn't know Hype has installer for python 2
  • Also the export script is really interesting but you know, banner dev like me is more natural to use javascript. So how about write the export script in javascript ?

Get back to the point of your response, document.write is not the case I can use, because I need static html

...
should be really written in index.html as a file in order to that banner platform server is insert some text in that html tag, before they serve the files to the final client.

Excuse me if I explain something wrong my question or details. Thanks for your help anyway :slight_smile:

I understand only partly what your problem is … the export script doesn’t require any Python knowledge. I will record a video…

BTW. Hype isn’t static either. It ha a runtime and builds self at load.

Oops, my original reponse below is for reply on this post.(I wrong clicked one of reply button..)
The solution I found is not relavant with Export Script of MaxZieb.
My solution is on the context of the last response of jonathan.
Thanks, and my question is resolved.


I've been found a solution with minimum effort.

For short: I changed the value of Hype Element manually on index.html after export with the option inline-loader.

for e,g. :
below the inde.xhtml: "681": {
G: "",
c: "",
w: "text what I written in Hype" // change this into document.getElementById('id-what-I-inserted-in-body').innerHTML,
...
}

Step by step

  • Export banner with advanced option checked inline loader
  • Insert html static tags manually in somewhere between body tag. The html tag will be served as interference between the banner and the banner platform's requirement.
  • change the Hype element's value(written index.html) to get the innerhtml from the static tag which I added manually on js runtime.
    for e.g, ... w:document.getElementById('id-what-I-inserted').innerHTML ...
  • And I automated this with nodejs(or which you prefer of course).

Thanks to forks giving me help to find the right direction.

2 Likes