Revision: 69083
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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