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

(Hans-Gerd Claßen) #1

In your hypedocument -> headsection paste:

  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 ( === layoutName) {
        res = Obj;

    // 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; = newHeight + 'px';


    return false


if ("HYPE_eventListeners" in window === false) {
  window.HYPE_eventListeners = Array();
  "type": "HypeLayoutRequest",
  "callback": layoutRequest

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

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