I would like to share a code snippet for a site I'm currently developing which I thought was particularly cool.
The following code adjusts the page margins in a dynamic fashion and is nice on the liquid layout I'm designing. Basically it sets the page margins (or padding in this case) logarithmically (sort of) so in a really wide screen there's heaps of margin and on low res (1024 wide) there is very little. Percentages didn't cut it.
$(document).ready(function(){
function logwidth() {
var newwidth = Math.floor(Math.exp(3 * $(window).width() / 1000));
if (newwidth < 150) {
return newwidth;
}
else {
return 150;
}
}
// override defaults on doc ready
$('#page').css('padding-left', logwidth() + 'px').css('padding-right', logwidth() + 'px');
$(window).resize(function() {
$('#page').css('padding-left', logwidth() + 'px').css('padding-right', logwidth() + 'px');
// debug
//$('body').prepend('<div>' + logwidth() + '</div>');
});
});Edit: I'm not sure how this would go on higher resolutions -- Mine maxes at 1680px wide.
Edit: Changed the function to check / set max allowable widths.
Submitted by Chris Herberte on Wed, 2010-03-31 10:28
Post new comment