Make Any Hype Animation Scalable (responsive) with Element Queries

Can you provide explicit instructions on how to reproduce (including what you need to press/navigate to and which scene the problem is on?) When I run your document I think I see everything as okay. You’re welcome to provide a screen capture using QuickTime Player’s ‘File > New Screen Recording’ too if that will help show it.

Hi Jonathon, many thanks for responding. The attached hype document (when exported as html) performs like this: https://www.leighanois.com/pictiuir/mar20_fb/mar20_fb.html, with no alterations whatsoever.
However, when I add the code snippet (to make images responsive) into the head, it performs like this: https://www.leighanois.com/pictiuir/problem/mar20_fb.html. You’ll notice that images are responsive but the pause and the home button that were on each screen are now missing.
Thanks again.

I’ve tried all major browsers (Safari, Chrome, Firefox/edge) and buttons are missing in all.

So if you take my hype document from dropbox and export to html and run as normal - it’ll work perfect but wont be repsonsive.
But, if you export to html, then add the code snippet into the head, (or even add the snippet into the before exporting) the pause button and home button, which are persistent symbols on every scene, are missing.

as a playground i did not test the EQCSS, but just added those lines to the head … hope it’ll work :slight_smile:

btw got a teletubby-feeling :wink: and could not recognize the language! what language is it?

  function docScale(hypeDocument, element, event) {
  
  
  	function scale(){
	const wWidth =  window.innerWidth ||  (window.document.documentElement.clientWidth || window.document.body.clientWidth);
	const scaleFactor = wWidth/baseWidth;
	hypeDocEl.style.transform = "matrix(" + scaleFactor + ",0,0," + scaleFactor + ",0,0)";
	}
  
	const hypeDocEl = document.getElementById(hypeDocument.documentId());
	hypeDocEl.style.transformOrigin = "0 0";
	hypeDocEl.style.margin = "0";


	const baseWidth = parseInt(hypeDocEl.style.width);

	window.addEventListener("load", scale);
	window.addEventListener("resize", scale);


		scale();
	

    return true;
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":docScale});
1 Like

Works perfect Hans-Gerd – many thanks! :slight_smile:

The language is Irish, by the way – thanks again!

1 Like

been thru the wicklows last year :slight_smile: best pubs!

1 Like

Me again – I don’t know if I should post this as a separate topic – apologies if I should. I have used the code snippet in the head of my hype document above to make a series of ‘talking books’ – I am embedding these into an iframe in my website (we’re trying to help children currently trying to learn from home) – I had wanted to make the hype document as responsive as possible to reduce having to make multiple layouts. Anyway, this appears to work perfect in every device I’ve tried EXCEPT iPad and iPhone (older versions of safari iOS). I have tried a series of different media queries (of which I have next to zero knowledge) but nothing seems to work.
Basically, I have embedded of iframes with the following code:

<div class="embed-responsive-item"><div class="video-container"> <iframe src="https://www.leighanois.com/pictiuir/mar20_preableabhar/preableabhar.html?raw=1%22" frameborder="0" scrolling="no"></iframe> </div></div> <style> .video-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; } </style>

There is no other css which is impacting on the div (as far as I know) apart from Bootstrap 3 css. This works perfect on everything else except iOS (as far as I can see). Examples can be found here:

https://www.leighanois.com/display2.php?articleid=15
https://www.leighanois.com/display2.php?articleid=7
https://www.leighanois.com/display2.php?articleid=8
https://www.leighanois.com/display2.php?articleid=6
https://www.leighanois.com/display2.php?articleid=3
https://www.leighanois.com/display2.php?articleid=10

Any ideas on a workaround would be greatly appreciated.

I think I’ve stumbled upon a solution from somewhere else on this forum (apologies), I added this to iframe:

style="display: block; margin-left: auto; margin-right: auto; width: 1px; min-width: 100%;"
1 Like