I have created an animation in a separate hype document as a preloader for a website. Following a combination of tutorials related to preloading by @Daniel and @a0137, I have the preloader successfully functioning however the dimensions of the preloaded page are wrong.
Not quite sure where I have gone wrong but it seems the preload animation displays the full dimensions and doesn't change based on the width and height of the webpage even though the hype project is a flexible layout. If you open the preloader html separately it functions correctly when resized.
Hopefully it’s a simple fix where I can make the preload animation page act in the same manner as when opened separately.
I have uploaded temporarily a basic example to view online and also included a zipped folder to the exported files and original hype documents. I have had to remove the large images that are being loaded as the zipped file was too big to upload on the forums.
I consider this to be a bug; the scene loading flow currently assigns a pixel size to scenes (and the document) while in an intermediate loading state. For this reason, the main container changes size to 1920x1080 when showing the preloader. Some ideas for workarounds:
Put the maxHeight div outside of the Hype container (probably need a position:absolute) and then run code on the first scene load to just remove it; something like:
var maxHeightElement = document.getElementsByClassName("maxHeight")[0];
maxHeightElement.parentNode.removeChild(maxHeightElement);
Use a width/height: 100% !important CSS style tag on the container ID
The suggestion by @h_classen works and when I made it, I thought of very dedicated Hype Workflows. People are using Hype only to build ads etc. and that way they can tweak it once. Well, you need to reapply your tweaked template after Hype updates and from time to time check if the Hype template you can extract with the tool is still similar to yours (after major updates).
That said, there is even one more method that can be applied with code on a document basis but works nearly at the same "level" although it can be overkill for most as it requires the current build number and Hype is still missing a constant like ${hype_build} to automate the process.
There are certainly many more great tweaks on the forum regarding this topic!
I have included a screenshot below of the exported html file as I have had a look into your suggestion but I’m not sure where I would place the various lines of code you have mentioned, this html side of things is very unfamiliar for me.
I have added an onscene load and copied your javascript to remove it if that is the right thing to do?
Thanks I will take a look. Ideally as I have the pre-loader functioning I was looking to keep things simple as I don't know much of the coding side of things. So I am just hoping to get it displaying correctly then I know what to do and its easy for future revisions to the pre-loader.
If you want to go with my first suggestion, then you would just move the block marked by "loader via iframe code" above the main container <div id="websitecopy_hype_container" .... block. Then in the .maxHeight { CSS block, add a position: absolute; and it looks like you'll also need a z-index: 100;
Thanks Jonathan for the explanation of where the code goes. I have added it in I believe correctly (screenshot below) and unfortunately still not getting it displaying correctly as its still the full 1920x1080.
To adjust the code you shared here ( Pre-loader help ) ... you should add a new class.
.maxHeight {
z-index:100;
position: absolute;
}
You can edit the contents of the <head>…</head> of your exported .html file by clicking on 'Edit HTML Head' in the Document Inspector. Then you would just need to add your 'iframe' code in the exported .html file.
If that doesn't work, can you share your files?
Keep in mind that if you test this on your local machine, you won't really see your preloader since it will all load immediately from your disk. But you can create a fake slowdown by following these steps: https://css-tricks.com/throttling-the-network/
Thanks @Daniel and @jonathan for your replies. I have added the CSS <style> back as seen in the screenshot. I have tested this online where the large images on the website offer a chance to see if the preloader displays correctly. Unfortunately it still seems to have the same issue.
I have added a zipped folder with the Hype and exported html files which is where I have added the CSS and the iframe code. I have had to leave out the images on the main website as even when compressed the file was too big to upload, but the rest is the exact same.
I really appreciate your help and hopefully there is a simple solution when the documents are viewed.
Pleased to hear that you have it working. Unfortunately with various testing I'm not having any success. I am testing by uploading to the server for the url oswf.co.uk
The screenshot below shows the files uploaded onto the server via Filezilla. I have added a screen recording of the issue when viewing online with these exact files shown and the exact code in the previous replies screenshot.
If I view on my iMac at full screen it seems ok on Safari and Chrome and Firefox (still some minimal height adjustment can be made), but it's not until the window is resized or viewed on a smaller screen that I experience what is shown in the screen capture. The screen capture is when viewed on a Macbook 15" sized screen.
The loader is working, but what's happening is the 'website.hype' file is temporarily making the width and height of its container the size of your scene: 1920x1080, which is adding those big scrollbars. When the scene does load, it becomes 100% x 100%.
One way to fix this is to make your first scene small, and have it jump to the next scene as soon as it is loaded.
I have had a look and added your suggestion of a small scene to a simplified project and uploaded it again and it is working just how I imagined! I will add this to my main project and hopefully get the same result.
I really appreciate your and @jonathan's help on this.
