Proportionally scaling a Tumult Hype document based on the browser width

tipofthemonth

(stephen) #1

Please note: The below solution is no longer the ideal way to do this. Please see this reply which demonstrates the workflow for scaling using the new ‘zoom contents’ feature in Tumult Hype 3.5.


I wrote some javascript people could use as a starting point for scaling your entire Hype Document proportionally. It should be a bit simpler than the old solution because it doesn’t require adding additional elements to the HTML or setting values based on the scene width. Just add the following code to the HEAD html:

In its current state it will only work if there is a single Hype document on the page, but it could be adapted to work with multiple or to target a specific document.

To restrict scaling based on width or height, jump to this post.


Scaling hype to browser window width
Resizing complex project
Responsive (flexible) map with hotspots
Left and Right Fixed Navigation
Tips and Tricks of the Month
Different Layouts Not Loading JS
Please Help Project Project WAY PASS DUE!
Rubber layout. Assign a button to the picture
Document Scaling
Can't I just shrink desktop animation with media query?
Resizing Entire Page by Width
Working for 4K screens
Using Only JS for Responsive Scaling
#2

Thank you so much for writing this code, got it to work with this and iframe.


(Jacob Nielsen) #3

Hi @stephen, I have a single hype document uploaded, but I’m afraid the resources folder gets too big if I make a layout for Iphone, 2xIpad, and desktop.

Will this javascript scale the elements to fit whatever device is being used? Or what does it do exactly? I’m not a programmer and don’t understand code language :slight_smile: But I do know how to put it in the head of the document.

Update: I just learned how to use the Flexible layout tool - when this is turned on with the pins, do I need to still make a individual layout for iphone, 4, 5, 6, - ipad etc?

Cheers
Jacob


(Freelancer) #4

@stephen

I’ve tested the old and the new method and both works fine.
this one is very easy to implement, thanks!

however If I use in my project a draggable object the relative path is bigger or smaller of the original one, depend on the size of the window.
The relative distance is not correct and you can’t drag the object from A to B, in some cases B is in a wrong position

it is a known issue?
thanks in advance


(stephen) #5

Do you have an example project you could share with me so I can take a look?


(stephen) #6

Hi @JacobCPH,

Adding new layouts shouldn’t add too much to the final size of your export. In most cases all three layouts can share the same images, videos, etc. If you are seeing your export size increase dramatically when adding a new layout let me know and I can take a look at your project.

This will scale your entire document proportionally. I recommend trying it out to see if it works with your design. Text, buttons, etc might get too small on an iPhone depending on your initial size.

Responsive Layouts and Flexible layout settings work great together.

Flexible layout settings can often allow you to use the same layout on similar devices. For example the iPhone 5, 6, 6+ can usually share the same layout (even iPhone landscape can often be the same).

But sometimes you need an entirely different layout when switching to a different device class like an iPad. It is difficult to define flexible layout settings that will work from 320 px wide to 1200 px wide. At some point things will get too squished or overlap. When you hit one of these points you can add an entirely new Layout and a new set of flexible layout settings.

I recommend using as few of layouts as you can, but the number is usually determined by the specific design of the page. A good target is 3 layouts (iPhone, iPad, and Desktop).


(Tanuj) #7

Can this work for specific layouts?

I only want this to happen for my mobile site, can that be done?

Thanks!


(stephen) #8

It’s a bit more complicated to do this with only one layout, but we are working on something that should make this much easier. Hopefully it will make it into 3.5, but I can’t promise for sure yet.


Is there a Physics API? 🤔
(Freelancer) #9

The relative distance is not correct and you can’t drag the object from A to B, in some cases B is in a wrong position

Thanks for the help @stephen
I made a simple project with an element with the “Control element position” applied to the red circle.

if the window size is the same of the hype project ( in my example 1024x768) I can drag the element correctly. if the window is less or bigger than the original size I can’t drag the element correctly.

thanks again.


(stephen) #10

Thanks for the sample project! Unfortunately I don’t have a workaround at the moment, but this is something we will consider as we add scaling natively to Hype.


(Jacob Nielsen) #11

Thanks @stephen. The thing about size is that i have 4 scenes, each with a video, and this increases the load time since it is one big document to load. The user navigates to every scene trough buttons on a house - and navigates back to this house from each scene.

In order to decrease the loadtime, I’m thinking about splitting the scenes up into documents, so the buttons just points to a new url on the site where the scene loads.

But is there a way to make the same smooth transition from thw function “jump to scene” -“top down”?

Thanks in advance.

Jacob


(Mark Hunte) #12

@stephen,

I posted a way of getting notified with the layout name.

I am unable to test this at the mo. But I am wondering if this can be used with your code as @wadhi wants. By posting the notification into a global var.
And using it in and if clause that surrounds your code in the head.

This does depend on sequence of events I know…


(stephen) #13

@MarkHunte thats a really good idea. I think you could actually use On Layout Load and On Layout Unload to selectively apply/remove the transform on the hype container and set/unset the window.resize function.


(stephen) #14

There isn’t an easy way to get our animated scene transitions when loading a new url, but if you just want to use an action to jump to a different page you can use the Go to URL… action.


(Mark Hunte) #15

Ta.

Yep. I had put your code in the javascript that got called by the behaviours in the Layout Load. (The behaviours never got called on document load that I called see)

	window.deviceName = event.customBehaviorName;
	console.log("JS " + event.type);
	 hypeDocument.getElementById("device").innerHTML = event.customBehaviorName;
  
   
    if (isScalePossible()){
    if (window.deviceName == "iPhone Landscape" ){
   
     console.log("js " + window.deviceName);
      window.myHypeContainerId = hypeDocument.documentId();
      $('#' + window.myHypeContainerId).css({
        '-moz-transform-origin': '0% 0%',
        '-webkit-transform-origin': '0% 0%',
        '-ms-transform-origin': '0% 0%',
        '-o-transform-origin': '0% 0%',					
        'transform-origin': '0% 0%',
        margin: 0
      });
      scaleSite();
      $(window).resize(scaleSite);
    }
    return true;
    }
  

  
  function scaleSite()
  {
  	var hypeContainer = $('#' + window.myHypeContainerId);
    var containerWidth = hypeContainer.width();
    var containerHeight = hypeContainer.height();
    var parentWidth = hypeContainer.parent().width();
    var parentHeight = hypeContainer.parent().height();
    var scaleWidth = parentWidth / containerWidth;
    var scaleHeight = parentHeight / containerHeight;
    var scale = Math.min(scaleWidth, scaleHeight);
    var left = (containerWidth * scale < parentWidth) ? ((parentWidth - (containerWidth * scale)) / 2) + 'px' : '0px';
    var top = (containerHeight * scale < parentHeight) ? ((parentHeight - (containerHeight * scale)) / 2) + 'px' : '0px' ;
    hypeContainer.css({
        "-moz-transform"    : "scale("+scale+")",
        "-webkit-transform" : "scale("+scale+")",
        "-ms-transform"     : "scale("+scale+")",
        "-o-transform"      : "scale("+scale+")",
        "transform"         : "scale("+scale+")",
        "left" : left,
        "top" : top
    });
  }
  
  function isScalePossible() 
  {
    can = 'MozTransform' in document.body.style;
    if(!can) can = 'webkitTransform' in document.body.style;
    if(!can) can = 'msTransform' in document.body.style;
    if(!can) can = 'OTransform' in document.body.style;
    if(!can) can = 'transform' in document.body.style;
    if(!can) can = 'Transform' in document.body.style;
    return can;
  }

Works to an extent but I am not sure 100% how well, as my layout set up is very basic. Also I think it needs something else to work with the trigger… Orientation changes on the Mobile did not re trigger it for me, but as I said it may be my basic setup.

You maybe able to set it right and see what I am missing


(Freelancer) #16

thanks for your time Stephen
This could be a huge improvement, a final solution for the responsive behaviour.

I’ve found an interesting discussion about the problem in order to keep the element in that particular position ( in any window size) during the dragging.

regards


(Matt) #17

Could anyone describe how to get this to work within an iFrame? I see that @roddy147 was able to do it.

I have a lot of things to resize and this would help a great deal.

thank you!
Matt


(Matt) #18

Ok, I’ve gotten it to work in an iframe by using the process described here:

It works perfectly in a browser but in iOS it does not resize the Hype material small enough. Some of it is still cut off.

Any ideas why??

Thanks!


(Matt) #19

For the last month this has been working perfectly for me! I have hype content embedded in iFrames.

Suddenly it stop working on iOS but still works perfectly in browsers.

Any idea why this might have happened?

Thank you!


(Gaylord Gauvrit) #20

Very nice ! Thank you very much !!