Advanced Search

Make everything "Responsive"

/ Published in: JavaScript
Save to your folder(s)
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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //--------------------------------------------------------------
  2.     //  Ico
  3.     //  When you have iFrame with fixed height and the client wants it responsove,
  4.     //  this is how you (t)roll
  5.     //  1200 is the breakpoint
  6.     //  $holderElement is the wrapper element
  7.     //  You need jQuery and TweenLite included
  8.     //--------------------------------------------------------------
  9.     var isResponsive = true;
  10.  
  11.     if (isResponsive) {
  12.         var $holderElement = $('.app__holder');
  13.         var $window = $(window);
  14.         var isMobile = $window.width() < 1200;
  15.         var scaleRatio = 1;
  16.  
  17.         TweenLite.set($holderElement, {transformOrigin: '0 50%'});
  18.  
  19.         $(window).on('resize', function () {
  20.             var winWidth = $window.width();
  21.             if (winWidth < 1200) {
  22.                 isMobile = true;
  23.                 scaleRatio =  winWidth / 1200;
  24.             } else {
  25.                 if (isMobile) {
  26.                     isMobile = false;
  27.                     scaleRatio = 1;
  28.                 }
  29.             }
  30.  
  31.             TweenLite.set($holderElement, {scale: scaleRatio});
  32.  
  33.         }).trigger('resize');
  34.     }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.