Creating a Flexible Tumult Hype Document within a DIV with no set 'height'


(Hans-Gerd Claßen) #1

In your hypedocument -> headsection paste:

<script>
  function layoutRequest(hypeDocument, element, event) {
    //returns [{name: xxx; height:xxx; width:xxx; breakpoint: xxx}, ...]
    var _layouts = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName());
    //current Layoutname
    var layoutName = hypeDocument.currentLayoutName();

    //get data for current Layout -> {name: xxx; height:xxx; width:xxx; breakpoint: xxx}
    var res = null;

    for (var i = 0; i < _layouts.length; i++) {
      var Obj = _layouts[i];
      if (Obj.name === layoutName) {
        res = Obj;
        break;
      }
    }


    // set hypeDocumentElement height depending on layoutratio ... 
    if (res) {
      var ratioScale = res['width'] / res['height'];
      var hypeEl = document.getElementById(hypeDocument.documentId());
      var currentWidth = hypeEl.offsetWidth;
      var newHeight = currentWidth / ratioScale;
      hypeEl.style.height = newHeight + 'px';


      hypeDocument.relayoutIfNecessary();
    }




    return false

  }

if ("HYPE_eventListeners" in window === false) {
  window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({
  "type": "HypeLayoutRequest",
  "callback": layoutRequest
}); 
</script>

no IFrame, no Divwrapper … the script should resize the hypedocument itsself


Annoying space below hype when scaled 100%
Responsive canvas when embeding
Overall responsive via EQCSS-Polyfil or similar for embedding within Wordpress
CSS help with inserting Hype into an existing page
Setting a minimum height for an embed using the Hype Animations Plugin
#2

This is PURE GOLD! Thanks so much for putting it here :smiley: