celli
celli

Reputation: 133

Javascript Resize on First Run

I have a javascript resize function that works when I resize the browser, but How can I get it to resize my content if I start my browser window at a certain size as well ? You can see this in code pen http://codepen.io/celli/pen/pyMMWe my content will resize when we adjust the browser window--However if you refresh the codePen with your browser starting at a smaller size (smaller that 840px) then the content is not "pre" resized. How can I add code to make that happen ?

var maxWidth  = $('#outer').width();
var maxHeight = $('#outer').height();

var windowWidth = $(window).width();
var windowHeight = $(window).height();

// media query
var mediaQuery = window.matchMedia("(max-width: 828px)");
mediaQuery.addListener(setAnimation);

// First run
setAnimation(mediaQuery);

function setAnimation(mediaQuery) {
  if (mediaQuery.matches) {
    // resize func below
    var maxWidth  = $('#outer').width();
    var maxHeight = $('#outer').height();

    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    $(window).resize(function(evt) {
      var $window = $(window);
      var width = $window.width();
      var height = $window.height();
      var scale;

      // early exit
      if(width >= windowWidth && height >= windowHeight) {
        $('#outer').css({'-webkit-transform': ''});
        $('#wrappie').css({ width: '', height: '' });
        return;
      }

      scale = Math.min(width/windowWidth);

      $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'});
      $('#wrappie').css({ width: maxWidth * scale, height: maxHeight * scale });
    });
  } else {
  }
}

Upvotes: 0

Views: 142

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

Best way, convert it into a function. Replace:

$(window).resize(function(evt) {
  var $window = $(window);
  var width = $window.width();
  var height = $window.height();
  var scale;

  // early exit
  if(width >= windowWidth && height >= windowHeight) {
    $('#outer').css({'-webkit-transform': ''});
    $('#wrappie').css({ width: '', height: '' });
    return;
  }

  scale = Math.min(width/windowWidth);

  $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'});
  $('#wrappie').css({ width: maxWidth * scale, height: maxHeight * scale });
});

With:

function reszEvt(evt) {
  var $window = $(window);
  var width = $window.width();
  var height = $window.height();
  var scale;

  // early exit
  if(width >= windowWidth && height >= windowHeight) {
    $('#outer').css({'-webkit-transform': ''});
    $('#wrappie').css({ width: '', height: '' });
    return;
  }

  scale = Math.min(width/windowWidth);

  $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'});
  $('#wrappie').css({ width: maxWidth * scale, height: maxHeight * scale });
}

And give these two:

$(window).resize(reszEvt);
$(reszEvt); // Or the below:
$(document).ready(reszEvt);

CodePen: http://codepen.io/anon/pen/yOmmjo

Upvotes: 2

Related Questions