Hi - Is there a way to scale the exported hype bundle when embedding it into another HTML file? I've tried setting the style width and height attributes but they don't seem to do anything.
I need to be able to set the size depending on the media I'm going to be using it with.
this'll scale an entire hypedocument proportionally:
it'll step in on a hypeLayoutRequest and use the layoutratio as basis.
many other solutions possible. Depends on your needs. Often a link to the project is useful ...
perhaps your ambitions can be solved by Hypes own responsive settings. did you have a look in the documentation¿
Along with the code that @h_classen sent, Hype has two mechanisms for fine grained control of document scaling: Flexible Layout for element positioning and Responsive Layouts for adjusting entire layouts based on width breakpoints.
OK - So I thought this worked, however, I'm using 11ty to render some blog pages and the scaling script seems to break the layouts. Is there any other way to deal with scaling so it works across all devices ?
Sorry here is a link to the project page thats breaking. I just put it online:
this description is all or nothing 
it's always good practice to provide a link. nobodybody knows how your hypefile is structured, nor what kind of responsiveness is wanted ...
hypefile and lifelink of embedding are always helpful
Link here:
My bad 
can you try removing this line in the script:
hypeDocEl.style.position = 'absolute';
it's simply wrong ...
OK - So I removed that:
It's improved things a bit but, still doesn't scale when the page initially loads.
you did the script load in a html-element named 'header', but that is the wrong place. it has to resist in the 'head-section' instead OR ensure that the script is loaded BEFORE the Hypedoc loads ....
////////
anyway, the script does not exactly fit your needs because a scaled element will keep its dimensions. this results in a white space below here...
so i changed the script to fit in your environment.
now it scales the hypescene and set new width and heigth to the hypedocument <- all in conjunction to the width of the parentNode (Wrapper-Element) of the Hype-Div and the current LayoutRatio
you may give it a try:
<script>
function layoutRequest(hypeDocument, element, event) {
var hypeDocEl = document.getElementById(hypeDocument.documentId());
var sceneElement = document.getElementById(hypeDocument.currentSceneId());
//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;
}
}
if (res) {
var parentNodeWidth = hypeDocEl.parentNode.getBoundingClientRect().width;
var baseLayoutWidth = res['width'];
var baseLayoutHeight = res['height'];
var scaleFactor = (parentNodeWidth/baseLayoutWidth);
sceneElement.style.transformOrigin = "left top";
sceneElement.style.WebkitTransformOrigin = "left top";
sceneElement.style.msTransformOrigin = "left top";
sceneElement.style.transform = "scaleX(" + scaleFactor + ") scaleY(" + scaleFactor + ")";
sceneElement.style.WebkitTransform = "scaleX(" + scaleFactor + ") scaleY(" + scaleFactor + ")";
sceneElement.style.msTransform = "scaleX(" + scaleFactor + ") scaleY(" + scaleFactor + ")";
hypeDocEl.style.setProperty('width', parentNodeWidth + 'px');
hypeDocEl.style.setProperty('height', (baseLayoutHeight * scaleFactor) + 'px')
}
hypeDocument.relayoutIfNecessary()
return false
}
if ("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({
"type": "HypeLayoutRequest",
"callback": layoutRequest
});
</script>
This is excellent - thank you so much. I republished the site with the script in the HTML header. Assume, the animation will scale to whatever width the blog container defines ?
what is a blogcontainer¿ it takes the direct wrapperElement of the hypecontainer as reference ...