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.