Have a different HTML head for each scene?

1

Hi there,

I have some html code which I am looking to use only for only certain scenes.

The code I am looking to use makes the content on the page remain proportional as the scale is changed, due to the browser window changing size (I have added the code below). Currently I have added this code to the HTML head but this means all the scenes are effected.

I am looking for the code to be used just for specific scenes so am hoping it is possible to have a different HTML Head per scene, or to be able to find a way to link this code to a specific scene through another method.

Any help or suggestions would be greatly appreciated.

Thanks Ollie

<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 scale = scaleWidth;
    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>
2

You can accomplish what this script does by using features built into Hype, specifically this: Proportionally scaling a Tumult Hype document based on the browser width - #30 by jonathan

You can do this on only specific scenes without any code. Does that work for what you're building?

When setting scale properties you'll need to uncheck 'Apply changes to all scenes' underneath the scale checkboxes if you only want a single scene to have those properties:

3

Thanks Daniel for your swift response, but in the context of what I am building I will required the use of the code instead of using the scalable properties.

I am however using the scalable properties on the scenes where I don’t require the HTML code.

But the scenes which require the html code have a scroll feature which if using the scalable properties do not function how I would like.

Is there a way of creating separate html heads per scene, or maybe a method of adding the html code I linked to the specific scenes another way.

Thanks again,

4

Here’s an initial stab at that:

scaling-specific-scenes.zip (31.7 KB)

This requires more work on the ‘removescaling’ scene, since it still scales when the resize event is triggered.

5

Thanks for attaching the document Daniel, I have taken a look and worked it into my project and it is a great help towards what I am trying to achieve.

Thanks again,

Ollie