hype

The new version of Tulmult’s Hype 2.x now has its own responsive layout features. However, they are a little confusing and not quite ready for production use in my humble opinion. I’ve tried creating a responsive infographic using Hype for DD Audio’s “DDZ Survival Guide” but could not get them to work reliably enough so I re-created that particular animation using tween.js. It is possible to take a hype animation and resize it dynamically using a little jQuery. This does not require you to do anything with the responsive settings.

Open up your html5 output file in a code editor and add the following lines to the head :

<style>
body {
background-color: #212121;
margin: 0px;
}

#scalecontainer {
-moz-transform-origin: left top;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
width: 640px;
margin: 0 auto;
}
</style>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" language="javascript">
var alsoenlarge = true;
$(function() {
if (isScalePossible()) {
$('body').css({
overflow: 'hidden'
});
$('#scalecontainer').css({
position: 'absolute',
margin: 0
});
// Run scale function on start
scaleSite();
scaleSite();
// Run scale function on browser resize
$(window).resize(scaleSite);
}
});

function scaleSite() {
containerw = window.innerWidth * 1; /* The width of the div, currently set to half of the window's width */
containerh = 640; /* The maximum possible height of the div; the recommend size for this is equal to or larger than the H of the element. */
sitew = $('#scalecontainer').width();
siteh = $('#scalecontainer').height();
f = containerw / sitew;
f = containerh / siteh < f ? containerh / siteh : f;
if (!alsoenlarge && f > 1) f = 1;
$('#scalecontainer').css({
"-moz-transform": "scale(" + f + ")",
"-webkit-transform": "scale(" + f + ")",
"-ms-transform": "scale(" + f + ")",
"-o-transform": "scale(" + f + ")",
"transform": "scale(" + f + ")",
"left": ((containerw - (sitew * f)) / 2) + "px",
"top": "0px"
});
}

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>
<!-- copy these lines to your document head / change "640" to the width of your hype canvas : -->
<meta name="viewport" content="user-scalable=yes, width=640" />
<!-- end copy -->

Then you wrap your hype container movie in this :

<div id="scalecontainer">
<!-- copy these lines to your document: -->
<div id="test_hype_container" style="position:relative;overflow:hidden;width:640px;height:640px;">
<script type="text/javascript" charset="utf-8" src="{your hype javascript file}"></script>
</div>
<!-- end copy -->
</div>

Make sure you change the width and height “640px” to the size of your Hype canvas.