Using Only JS for Responsive Scaling

Responsive
1

Continuing the discussion from Proportionally scaling a Tumult Hype document based on the browser width:

Hi -
I’ve been using this excellent code by @stephen for quite awhile now. Is this still recommended? Are there any known disadvantages to using this as opposed to the new Hype tools for responsive layouts? Is anyone else still using this?

One thing I have noticed with recent designs is that the layout is not scaled when the browser is resized - after resizing the window the page must be reloaded. I’m not certain if this is a limitation of the code and I should scrap this or if it is some other issue.

Thank you!
Matt

2

Here is @stephen 's code:

<head>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 
  <script type="text/javascript">
  function myCallback(hypeDocument, element, event) {
    if (isScalePossible()){
      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;
  }
  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
  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;
  }
</script>
</head>
3

Hype's Flexible Layout and Responsive Layout tools currently work at the scene and element levels, they do not apply to the document as a whole. Thus to use Hype's systems, you'd generally need to put all elements in a group for each scene and then turn on zoom contents. See this post in the same topic. Some folks still want to do this at the document level and thus this is still the recommended technique.

There might be some issue with your page. A simple test works for me – the $(window).resize(scaleSite); line should cause it to resize whenever the window changes.

1 Like
4

Thank you @jonathan ! This is very helpful.

If I could ask one follow up question: All of my hype projects are embedded in iframes. Can you say if the document scaling JS is perfectly applicable to iframes?

Thank you!
Matt

5

The way the document scaling (aka the code you have above) works is using the transform:scale() CSS property. This is a visual property and has the tendency to scale pixels. There are a few browser optimizations that can make iframes render text and images more sharply but also many paths that end up using pure pixels from the source size resulting in a blurred look.

Using the Flexible Layout system without using Zoom contents (this also invokes scaling) is the best way to ensure sharp rendering.