I was worked on a centred project design of a website. When I met such requirement I’ve always used Dead Centre approach.
Unfortunately I’ve noticed that when the content is larger than the screen the top-left corner is not visible. In that current project the logo of the site was exactly on that place, so it’s really confusing.
I had to solve this issue in order to satisfy the clients requirements. So, I’ve used jQuery to sort this out.
You can see the difference in these 2 examples:
Resize your browser window in order to see the difference.
How it’s working?
First of all there are 2 javascript includes:
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
After this there is a function which track the size of the screen and the content.
/*Track height and width of the window and the content*/
function resize(){
if($(window).height() < $('#content').height()){
$('#horizon').css('top', '0px');
$('#content').css('top', '0px');
} else {
$('#horizon').css('top', '50%');
$('#content').css('top', '-'+($('#content').height()/2)+'px');
}
if($(window).width() < $('#content').width()){
$('#content').css('left', ($('#content').width()/2)+'px');
} else {
$('#content').css('left', '50%');
}
}
//Bind events on resize
$(document).ready(function(){
resize();
})
$(window).bind("resize", function(){
resize();
});
</script>
The explanation of the code:
I am using jQuery plugin named jQuery Dimensions Plugin 1.1 which extract the proper dimensions of the boxes.
The function checking if the content screen is bigger than the window size, if so it change the CSS in order to fit properly. I guess that you can see the logic easily. So, no more explanations here.
Hope this will help someone.
