/ Published in: JavaScript
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
So here is the code if somebody needs it.
This is how I (t)Roll
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
//-------------------------------------------------------------- // 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'); }