Adjusting the inline styles created with the hype div container

Exporting & Previewing
1

I am constantly changing the inline styles with a text editor and so I am wondering is there a way to export the hype animation basically I am changing this:

<div id="myAnimation_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="my.....

to this:

<div id="myAnimation_hype_container" class="HYPE_document" style="margin:auto; position:absolute; top:0; width:100%; overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="my.....

is there anyway I can do this rather than post export?

2

Here's one way to do that:

inlinestyletest.hype.zip (12.2 KB)

It clears the styles of the current element and replaces them with an array of your own styles:

<script>
// runs after the scene has been loaded. This code goes in the 'head' of your Hype document: 
function myCallback(hypeDocument, element, event) {
  function clearAndApplyStyles(elementId, styles) {
    var element = document.getElementById(elementId);

    if (!element) {
      console.error("Element with ID '" + elementId + "' not found.");
      return;
    }

    // Clear all inline styles
    element.removeAttribute("style");

    // Apply new styles
    for (var key in styles) {
      if (styles.hasOwnProperty(key)) {
        element.style[key] = styles[key];
      }
    }
  }

  var styles = {
    margin: "auto",
    position: "absolute",
    top: "0",
    width: "100%",
    overflow: "hidden",
  };

  // Comment out this first line after testing: 
  clearAndApplyStyles("index_hype_container", styles);
  clearAndApplyStyles("myAnimation_hype_container", styles);
}

// Add Hype event listener
if (!window.HYPE_eventListeners) {
  window.HYPE_eventListeners = [];
}

window.HYPE_eventListeners.push({ type: "HypeDocumentLoad", callback: myCallback });
</script>
3

cool method of doing it.. but I am guessing we don't have any direct control... but still cool method... thanks

4

You could also run the clearAndApplyStyles function 'On Scene Load' and it will adjust the Hype id's inline styles as well

5

Just wondering why you cannot simply put this in the head.

<style>

#index_hype_container,#myanimation_hype_container{

 margin: auto!important;
    position: absolute!important;
    top: 0;
    width: 100%!important;
    overflow: hidden!important;

}

</style>

Or in a css file.

This will not reflect in the Hype IDE but will on preview and export.

1 Like
6

A better way! You can also place this in the inner HTML of a rectangle if you can't add more code to the page where your Hype doc is embedded.

1 Like
7

As in the css in a Rectangle innerHTML

Good idea. Works

8

I like the css in a hidden Rectangle a lot.

It can also allow you to see live edits to css in the IDE when using class names.

Screenshot 2023-05-03 at 20.53.15
Screenshot 2023-05-03 at 20.53.151946×1892 508 KB

--

(see Bug : css style for id's # not showing in Hypes IDE for why IDs don't work for live IDE at the mo)

2 Likes
9

Love it either! Using it in most of my projects!

1 Like