Reputation: 133
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
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