Tumult Hype Forums

Welcome, Guest Login

Support Center

Responsive size for your project: resizing your document to fit in a window or element

Last Updated: Feb 20, 2014 12:03PM PST

Tumult Hype 2.5 supports flexible / responsive layouts. Please read the Flexible Layouts documentation chapter for more info. 

To see how it works, please watch this video which includes several other new features in Tumult Hype 2.5.







The example below is an unsupported method of scaling a document. The below examples cover three types of scaling

  • Scale an element to the width of the browser window
  • Scale an element to the width of a containing element
  • Notes on scaling Tumult Hype documents for mobile browsers

 

Scaling to the browser window's width

Keep in mind that if you have a 500x500 document, visitors will be upscaling that be several hundred percent based on the resolution of their monitors. Starting with a document no smaller than 1000 pixels wide with give you a good starting point for this technique. Some laptop and desktop monitors can be as wide as 2880 pixels. 

Ok... let's begin. Here's code to add to the 'head' of your document, which can be edited by clicking the Edit Head HTML… button in Hype's Document inspector.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 
<script type="text/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 * 0.5; /* The width of the div, currently set to half of the window's width */
    containerh = 600; /* 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>
You'll also need to create a div called 'scalecontainer' that will contain your Hype document:
 #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: 300px;
        margin: 0 auto;
      }

You will need to adjust the "width: 300px;" line to represent half the width of your document.

Placing your Hype element within <div id="scalingcontainer"> ... </div> will dynamically resize your project depending on your user's browser window width. You'll find a zip file that demonstrates this functionality attached at the bottom of this article.

The above technique is great for displaying your Tumult Hype document as the only element on a page, but what if you want to display your Tumult Hype element as a resizable element on a larger web page? 

Scaling your Tumult Hype element within a variable width div

By adjusting the above script, we can set the dimensions of our Tumult Hype project to be contained within another element. For example: Let's say you have a blog post that is a variable width (a percentage of the total available width). We can place our Tumult Hype document within that element and it will stretch to fit.  

Media Queries 

Matt Vincent posted an additional method of scaling a Tumult Hype document with the use of Media Queries: http://art209.net/playground/hype-rwd/. The core of this technique is a set of breakpoints that define the size of the container for the document at different widths:
@media screen and (max-width: 320px) {#containingElement {height:116px;background-color: red;}}
@media screen and (min-width: 321px) and (max-width: 380px) {#containingElement {height:138px;background-color: purple;}}
@media screen and (min-width: 381px) and (max-width: 420px) {#containingElement {height:152px;background-color: blue;}}
@media screen and (min-width: 421px) and (max-width: 480px) {#containingElement {height:174px;background-color: green;}}
@media screen and (min-width: 481px) and (max-width: 539px) {#containingElement {height:195px;background-color: yellow;}}
@media screen and (min-width: 540px) and (max-width: 599px) {#containingElement {height:217px;background-color: orange;}}
@media screen and (min-width: 600px) and (max-width: 680px) {height:246px;background-color: red;}}
 

Scaling your document for Mobile Browsers

Hype automatically fills with width of mobile browsers that respect the 'viewport' tag, so you don't have to do much to get this working. You may have noticed that documents stretch to the width of your mobile browser's screen without any work on your end.

At the end of the day, you want all your users to have the best experience possible on your site. If you want to make your document shine for everybody, you should create a version of your document for Mobile (small sized) screens. Please read our article on mobile browser tips or learn how to redirect a mobile browser to a different page.
Attachments

Contact Us

support@tumult.com
http://assets1.desk.com/
false
hypeapp
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete