Return to Snippet

Revision: 69083
at April 17, 2015 22:07 by burnandbass


Initial Code
//--------------------------------------------------------------
    //  Ico
    //  When you have iFrame with fixed height and the client wants it responsove,
    //  this is how you (t)roll
    //  1200 is the breakpoint
    //  $holderElement is the wrapper element
    //  You need jQuery and TweenLite included
    //--------------------------------------------------------------
    var isResponsive = true;

    if (isResponsive) {
        var $holderElement = $('.app__holder');
        var $window = $(window);
        var isMobile = $window.width() < 1200;
        var scaleRatio = 1;

        TweenLite.set($holderElement, {transformOrigin: '0 50%'});

        $(window).on('resize', function () {
            var winWidth = $window.width();
            if (winWidth < 1200) {
                isMobile = true;
                scaleRatio =  winWidth / 1200;
            } else {
                if (isMobile) {
                    isMobile = false;
                    scaleRatio = 1;
                }
            }

            TweenLite.set($holderElement, {scale: scaleRatio});

        }).trigger('resize');
    }

Initial URL


Initial Description
Client wanted an iFrame with fixed dimensions. The iFrame is fixed height, so we agreed that it will not be responsive. However, after a while, the client needed it responsive, but could not do modifications for the parent page ( so it can communicate with the iFrame, get it's height and update it ), so I decided I can just scale the whole f*kin stuff and make it "Responsive".

So here is the code if  somebody needs it. 

This is how I (t)Roll

Initial Title
Make everything "Responsive"

Initial Tags


Initial Language
JavaScript