Hi Tommy, this code is exactly what I was looking for! It works great, but for some reason in Chrome and Safari it doesn’t load the animation when I open the webpage for the first time (works fine in Firefox). I have to do a hard refresh for it to appear. It’s definitely there because I can hear the audio running, but the hype container has disappeared. There isn’t even a blank space where it should be, the content lower down shifts up. I’m using a custom theme on Wordpress, built with Bootstrap. I’d be very grateful for any suggestions that might solve this issue. Thanks in advance!
Can you share a link to your document? It could be something your theme or something in Bootstrap that is causing this issue. Also, do you have ‘offline application cache’ turned on for this document? If so, I recommend turning that off.
Hi Daniel, thanks for your quick response. It’s just a local site at the moment so I don’t know how I could share that easily with you? I have also found out that if I resize the window, the hype document becomes visible. The ‘offline application cache’ is turned off already. I thought it could be to do with Bootstrap being a responsive framework but I just wanted to get some opinions.
There was a conflicting bit of Javascript, fixed it now, thanks for your input anyway!
1 Like
Awesome, you save me hours playing the Flexible Layout with no luck.
Thanks!
Wow this is great! I do have the same issue as someone below though. My animation isn’t full screen till I click on it http://www.bpccreative.com/quin/. Any ideas?
Thanks in advance
I’m guessing you might be running into problems because you have two layouts in your document and this is at odds with wanting to do scaling from a javascript/eqcss source.
Can I remove the size I created it in, from the hype html?
Jonathan, were exactly right it was because I had 2 different layouts. Thanks!
1 Like
This is excellent and a reag great help – many thanks. For someone with an extremely basic grasp of javascript, any ideas why this code snippet causes home and pause buttons to disappear when I paste it into the in the exported html from this hype document: https://www.dropbox.com/s/mbefafj5n15xedk/mar20_fb.zip?dl=0?
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 
btw got a teletubby-feeling 
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!
The language is Irish, by the way – thanks again!
1 Like
been thru the wicklows last year 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