johnmahugu

javascript - make everything responsive

Jun 14th, 2015
426
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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.     }
Advertisement
Add Comment
Please, Sign In to add comment