I managed to make the margins grow smaller and body’s width stick the same when resizing the window’s browser. The problem is ‘#content’ still flashes for a second.
If you test the code below you’ll see what I mean. It’s hard to express its behavior. Does anybody know how to fix that? Does it have anything to do with callback functions and the order of events.
Thank you.
Here is the code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
html, body{
padding: 0;
margin: 0, auto;
}
body{
position:absolute;
margin: 0px;
padding: 0px;
}
#content{
background-color: green;
}
#mainContent{
background-color: orange;
}
aside{
background-color: blue;
}
.floatLeft{
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<section id="content" class="border">
<section id="mainContent" class="floatLeft" >
mainContent
</section>
<!-- End of main content -->
<aside class="floatLeft">
aside
</aside>
<!-- End of aside -->
<p class="clear"></p>
</section>
<!-- End of content -->
<script type="text/javascript">
$(document).ready(function(){
change_template();
});
change_template = function(){
var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w, left_right2, last_width;
left_right = 180;
aux = left_right;
top = screen.height - (screen.height - 100);
left_right = left_right - (screen.width - $(window).width())/2;
resize_body(top, left_right, left_right);
last_width = $(window).width();
$( window ).resize(
function(){
if($(window).width() > last_width){
left_right = left_right + ($(window).width() - last_width)/2;
}else if($(window).width() < last_width){
left_right = left_right - (last_width - $(window).width())/2;
}
resize_body(top, left_right, left_right);
last_width = $(window).width();
});
content_w = screen.width - 2*aux;
mcontent_w = content_w - 300;
$('#mainContent').css('width', mcontent_w);
aside_w = content_w - mcontent_w;
$('aside').css('width', aside_w);
}
resize_body = function(top, left, right){
$('body').css('top', top+'px');
$('body').css('left', left+'px');
$('body').css('right', right+'px');
}
</script>
</body>
</html>
The reason it flashes is because the browser only sends “resize” events to JavaScript so many times per second (variable depending on the browser you use) and your browser can only execute the code so fast (variable depending on browser and how powerful your computer is). Pretty much what you are doing is executing your resize function tens of times per second and the code can’t run fast enough to keep up with how fast your are resizing the window. Also, when you finally stop moving the window and the final resize event is triggered, it takes time to run through the code – it doesn’t just complete instantaneous, all code takes some time to run.
If you don’t want to notice the flashing, use media queries.