Posted By

burnandbass on 04/17/15


Tagged

responsive clientsfromhell


Versions (?)

Make everything "Responsive"


 / 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

  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
Posted By: matthewbanks on April 30, 2015

Thanks for it really helped me out. I want to develop a website and one of my friend give me suggestion to consult HJMT Best Social Media in NYC, as I was little bit confused about the website idea.

You need to login to post a comment.