This is an advance on the JQuery scripting I used for control of fonts and borders in my last post.
It works in a very similar way but I’ll explain a little more clearly this time.
The area we need to measure is the viewport – this is the part of the browser that actually shows the web page and not all the scrollbars, buttons, bookmark bars, etc that may or may not be present on your user’s browser setup. Luckily for us JQuery has a really quick and easy way of doing this:
$(window).width();
will get the width while
$(window).height();
will get the height for us.
As we are working with proportions we’ll just use the width for now:
var vpW = $(window).width();
$('#page').css({'width': vpW + 'px'});
Here we’ve put the viewport with into a variable and used it to set the width of our ‘page’ div.
Now we need to work out the height
var vpH = vpW/2.35;
$('#page').css({'height': vpH + 'px'});
My favourite ratio is cinemascope – 2.35:1 so here we create a variable that divides the width by 2.35. If you wanted 4:3 (1.78:1) then you would need to use 1.78.
We’ve also used the result to set the height of our ‘page’ div.
That’s is as far as setting up the values for a proportional scaling div goes but we can now go on to make it even more special.
the scaling div is not necessarily going to be the same proportions as the users viewport. At the moment the div will float at the top of their window but we don’t always want that so how about using the viewport measure to set the div into the vertical centre?
First we need to get the viewport height and take away the height of our div as this is the screen space we’ve already used up. Then we divide that number by two to give us top and bottom margin values. Finally, we can out that into a variable and use it to set the margins for our ‘page’ div
var vpM = ($(window).height()-vpH)/2;
$('#page').css({'margin': vpM + 'px auto'});
Here I’ve used ‘auto’ for left and right values so that the div will also float in the horizontal centre of the viewport.
As an added bonus we can include the tweak for my last post to set the font size in proportion to the viewport too – this will mean the text will scale at the same rate as our div:
$(‘body’).css({fontSize: vpW/100+’px’});
Now that’s all together we just need to wrap it in a function
var setPage=function() {
// All the code goes here
};
and then trigger it when the page is loaded:
$(document).ready(function() {
setPage();
});
And when the page is resized:
$(window).resize(function() {
setPage();
});
And that’s it the full script should look like this:
var setPage=function() {
var vpW = $(window).width();
$('#page').css({'width': vpW + 'px'});
var vpH = vpW/2.35;
$('#page').css({'height': vpH + 'px'});
var vpM = ($(window).height()-vpH)/2;
$('#page').css({'margin': vpM + 'px auto'});
$('body').css({fontSize: vpW/100+'px'});
};
$(document).ready(function() {setPage();});
$(window).resize(function() {setPage();});
As I said in my last post – if you use ’em’ measures for anything such as border widths or rounded corners they will automatically scale in proportion too!
Loop 13 