Flickering when resizing the browser
-
Hi, I'm trying to build a page that have a header, middle pane, and a footer. The footer should be always floating on the lower edge of the window, and the header and footer heights should remain constant. I created 3 div sections. And the only way I found to do this is to always resize the height of the middle pane when the user resizes the window and make it equal to window height minus header and footer heights. But this caused the page to be flickering so much while user is resizing the page. Does anyone has an idea about how could I stop this flickering?:confused: Thanks, Ahmed
-
Hi, I'm trying to build a page that have a header, middle pane, and a footer. The footer should be always floating on the lower edge of the window, and the header and footer heights should remain constant. I created 3 div sections. And the only way I found to do this is to always resize the height of the middle pane when the user resizes the window and make it equal to window height minus header and footer heights. But this caused the page to be flickering so much while user is resizing the page. Does anyone has an idea about how could I stop this flickering?:confused: Thanks, Ahmed
It seems that this happens only on IE as it raises the onResize event multiple times until the user stops resizing the window. You can try introducing a delay in calling the resizing function, like the example below:
<!--
var resizeDelay;function resize()
{
<code>//Your resizing calculation</code>
document.body.style.backgroundColor=(document.body.style.backgroundColor=="black")?"white":"black";
}onresize=function()
{
<code>//Call this method during onresize</code>
clearTimeout(resizeDelay);
resizeDelay=setTimeout("resize()", 200);
}
//-->"Democracy is two wolves and a sheep voting on what to have for dinner" - Ross Edbert Sydney, Australia