Today I was working on a page layout where a page width had to be fluid, while the sidebar had to be with fixed width. So here is my solution:
The layout looked like this in the beginning:
» Read more: How to – layout with fixed sidebar
Posts Tagged ‘HTML’
How to – layout with fixed sidebar
March 13th, 2010» Read more: How to – layout with fixed sidebar
Fixing Dead Centre approach with jQuery
October 17th, 2008I 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-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<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.
<script type="text/javascript">
/*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>
/*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.
Loading ...
