Resizing Entire Page by Width

Their software isn’t reading a height from my animation. Therefore it is resizing it to the minimum cutting off most of the animation. Not sure there is anything I can do on my end. I just want to make sure that the code I added isn’t causing this.

So, I have another forum post with a different problem, but they may be caused by the same source. How does Hype call https links? Here is the feedback from the developer putting my animations into the software.

After much testing this morning I did find why the font isn’t showing, and maybe why the height isn’t reading correctly.

Is in the index.html. It fails even if I change it to https.
http: error, unsecure connection not allowed
https: 403 https://use.typekit .net/ forbidden
I am unsure how to make sure we are allowed on https. but all http links within the code has to be https and allowable.

I did not have either of these problems in Edge Animate, just added the "s" at the end. For the height issue, it would be where it is calling jQuery, as the workaround code that I quote earlier uses jQuery.

Just a note to Tumult, there are going to be A LOT of us coming over from Edge Animate, pissed, panicking and desperately wanting your software to be our solution.

I now have to go back to Edge Animate for this project as I can’t sit all day and wait for someone to reply while my deadline looms. I DO NOT WANT TO GO BACK! But since I don’t know if this can be fixed, nor why adding an “s” doesn’t react the same way it did in EA I can’t sacrifice finishing 15 animations and finding it can’t be fixed and having to redo in EA anyway. I will be back for the next section if a solution is available.

If you're loading a font from http, but you load your document over HTTPS (the HTML file), then your browser will warn that an unsecured connection is attempted. Your best bet is to use https:// whenever possible. You may need to whitelist the domain you are testing on to ensure that the font can load when viewing that domain. This help article has more info if you're having issues during testing:

This is the most current method of resizing content proportionally if you are not using Responsive Layouts: Proportionally scaling a Tumult Hype document based on the browser width

Thank you SO much for sending me the updated code, it’s much simpler and stays with the file as well, very nice. They are testing it now, but people in the comments mention using it in frames which is our situation, so I’m hoping it will work.

Thanks Daniel, just read this one through. I added their server on my Kit on Adobe. I am adding an “s” to the typekit URL, so everything is ‘https’ uniformly. It works locally and on my server, just not when the SSL gets involved.

Is there a URL where I can check it out? (Feel free to PM me)

How do you change the code so that only the width resizes (still proportionally)?
I tried commenting out the code:

//var top = (containerHeight * scale < parentHeight) ? ((parentHeight - (containerHeight * scale)) / 2) + 'px' : '0px' ;

In Edge Animate I would only click “Width” for this to work, not “Height”.

Thanks for the help?

For others who find this thread, the answer is here: Proportionally scaling a Tumult Hype document based on the browser width

Still not working, I posted this on the wrong thread...
http://forums.tumult.com/t/proportionally-scaling-a-tumult-hype-document-based-on-the-browser-width/2651/28?u=gthroop

Unfortunately, it’s still not working. The software is reading the animation’s height as 0, which it didn’t do with Edge Animate, but their code is:

<script>
   AdobeEdge.loadComposition('index', 'EDGE-766017', {
    **scaleToFit: "width",**
    centerStage: "none",
    minW: "0px",
    maxW: "undefined",
    width: "800px",
    height: "534px"
}, {dom: [ ]}, {dom: [ ]});
</script>

which is useless to me in Hype. We are now testing it using this…

http://slickmedia.co.uk/blog/hype-animation-fluid-height/

What software?

If your container that surrounds your Hype document doesn’t have a height, your Hype document will try to become 100% of that height (this is usually zero). Without seeing how you have your document embedded, I recommend trying these things:

Add this CSS to your .html page:

.box{
	position: relative;
	width: 100%;		/* desired width */
}
.box:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}

It’s proprietary software, but basically my animation goes into an iFrame within it and it reads 0 and therefore makes the size of the window it’s minimum, which is 150px high. You can see it here, it cuts off most of the animation, always reading the minimum for the animation’s height.

that didn't work... the developer wrote...

From similar problems on stack and peeking in Edge, what I gather is that the code needs to refer to the parent DOM something using

> parent.document.getElement

We aren’t going cross domain as the file is uploaded to the same area as the content it is being put in, which is where the page is loaded from.

Ok I think I understand what you’re doing, but I still feel a bit like I’m repairing something with a blindfold on.

Take a look at this example: Iframe Scaler.zip (118.0 KB)

I’ve placed a Hype document in an iframe set to scale its width to scale to 100%. This iframe contains the ‘width-only’ scaling document from here. The height of the iframe adjusts based on the ratio of your Hype document, so as the iframe has less space to work with, the height will expand or shrink.

I shared a variation of this technique with someone embedding a Hype document within a Wordpress site and it worked well because in their situation they couldn’t use Responsive Layouts.

The iframe code is: <iframe id="hypeFrame" style="margin:0 auto;border: none;" src="scale-width-only.html" height="200" width="100%" frameborder="0" scrolling="no"></iframe>

(The height here really doesn’t matter, but it should be a good initial height)

And the following function iframeScaler() handles height, width, and ratio:

<script type="text/javascript">
    
    function iframeScaler() {
    // this is width / height of your Hype Document.  
    var ratioScale = 600 / 400;
	
	// This gets the width of the DIV enclosing the iframe, or of the iframe itself. 
	// If you are placing your iframe in another div, you'll need to replace instances of
	// Hypeframe with the ID of the enclosing element. 
	// If you're getting inaccurate widths, see: http://stackoverflow.com/a/9619396 
	var currentWidth = document.getElementById('hypeFrame').offsetWidth;

    var iFrameNewHeight = currentWidth / ratioScale;
    document.getElementById('hypeFrame').style.height = iFrameNewHeight + "px";

	console.log('Your iframe width is ' + currentWidth + ' and your iframe height is now ' + iFrameNewHeight )

	}
	
	iframeScaler();
	// reset if device is rotated
	window.addEventListener('orientationchange', function(){
     iframeScaler();
});

</script>

You may want to run iframeScaler in response to any window-resize event as well.

Did this resolve your issue?

Thanks for checking back Daniel. No. I’ve felt all along that the error is within their software. Their engineer is trying to figure it out. I tried 5 different solutions, none worked. Thanks so much for the help and follow-up!

So this is coming up again. They want me to recreate all the animations in Edge Animate because the scaling worked in that program and not in Hype. I REALLY don’t want to do that.

What is the difference between the DOM in EA from Hype? I was hoping the new Hype 3.5 would solve it, but as far as I can tell it has the same problem. I can’t just click one button and make it size proportionally width-wise. I click the button, but all the individual objects go crazy, the button is on the far right, the photo is not resizing, etc. Going through each item pinning and picking from 4 options on each object is not only cumbersome, but does not give the expected results. I literally clicked one button in EA and this worked. I love so much about Hype, please help. Am I missing something about the new feature? Here is an example of an animation I created in EA that sizes exactly the way I am looking for… http://www.dragonfly-design.net/kf/andrew/

this is all I was doing in Edge Animate, clicking Responsive Scaling and choosing Width.

Here’s how to do that: Rectangles pinned to flexible, fully-window image?

The ‘zoom contents’ feature is new in 3.5.