0

I am trying to scale my iframe with it's content to change dynamically with proportion to the change in the browser window size. I have the following code which scale the height but my problem is the variable I define outside the window.resize() function do not have values inside the function. Am I missing something? Shouldn't they be global?

  var windowHeight = $(window).height();
  var iframeHeight = $('iframe').height();
  var heightScale = windowHeight/iframeHeight;

  //define resize function
$(window).resize( function() {
/*test*/ console.log("I have triggered");

//define dimensions for window and iframe
  var newWindowHeight = $(window).height();
  var newIframeSize = null;
  var hScale = 1.01;
  var sScale = .09;


  //window size getting bigger
  /*test*/ console.log("windowHeight is " + windowHeight);
  /*test*/ console.log("newWindowHeight is " + newWindowHeight);

  if ( windowHeight < newWindowHeight )
    {
      console.log("i'm in the first if")
      windowHeight = newWindowHeight;
      newIframeSize = iframeHeight*heightScale;
      /*test*/ console.log("iframe"+iframeHeight);
      /*test*/ console.log("heightScale"+heightScale);
      /*test*/ console.log("newiframe"+newIframeSize);

      while ( newIframeSize < iframeHeight  )
      {
        console.log("While loop in progress");
        $('iframe').css('transform' , 'scale(' + hScale + ')');
        newIframeSize = $('iframe').height();
      }
    }
    //window size getting smaller
    else if ( windowHeight > newWindowHeight )
      {
        console.log("i'm in the first if")
        windowHeight = newWindowHeight;
        newIframeSize = iframeHeight/heightScale;    
        /*test*/ console.log("hey"+iframeHeight);console.log("hi"+heightScale);console.log("ho"+newIframeSize);

        while ( newIframeSize > iframeHeight ) //can use newIframe < iframeHeight
        {
          console.log("While loop in progress");
          $('iframe').css('transform' , 'scale(' + sScale + ')');
          newIframeSize = $('iframe').height();

        }
      }

Appreciate the help. Thanks

bos570
  • 1,505
  • 2
  • 23
  • 45
  • There's no reason that your variables shouldn't be available. You might need to create a demo so we can see what's happening. – isherwood Jan 08 '16 at 14:26
  • Have you tried looking at [this answer](http://stackoverflow.com/questions/819416/adjust-width-height-of-iframe-to-fit-with-content-in-it) ? You would need to adjust the event, on which the resize function would react. – Patryk Jan 08 '16 at 14:27
  • @Patryk that wouldn't work for me. I need the iframe to change according to the browser and then scale the content in the iframe. – bos570 Jan 08 '16 at 14:29
  • Normally you set and width and height for iframes. If the content inside is bigger, scrollbars have to suffice. [Source](https://css-tricks.com/snippets/jquery/fit-iframe-to-content/) – Little Phild Jan 08 '16 at 14:37
  • @nulldev yeah unfortunately I need the content in the iframe to be visible without scrolling – bos570 Jan 08 '16 at 14:55

0 Answers0