I need to adjust the layout of my website so that the sidebar disappears when the window is resized below a certain width, and then reappears when the window is expanded.
Here is the HTML code:
<style type="text/css">
#sidebar{
width:290px;
float:right;
/*...*/
}
#header{
margin-right:290px;
/*...*/
}
#navigation{
margin-right:290px;
/*...*/
}
#page{
margin-right:290px;
/*...*/
}
</style>
<div id="wrapper">
<div id="sidebar">
...
</div>
<div id="header">
...
</div>
<div id="navigation">
...
</div>
<div id="page">
...
</div>
</div>
And here is the Javascript code:
<script type="text/javascript"><--
function checkSidebar(){
var page = $("#page");
var header = $("#header");
var navigation = $("#navigation");
var sidebar = document.getElementById("sidebar");
//get width of page
var pageWidth = page.width();
if(pageWidth < 451) {
//hide sidebar
sidebar.style.display = 'none';
header.css('marginRight', '0');
navigation.css('marginRight', '0');
/*
//error occurs here
page.css('marginRight', '0');
*/
} else {
//show sidebar
/*
header.css('marginRight', '290');
navigation.css('marginRight', '290');
page.css('marginRight', '290');
*/
sidebar.style.display = 'block';
}
}
//initial check for sidebar
$().ready(function(){
checkSidebar();
});
//check sidebar on window resize
window.onresize = function(event){
checkSidebar();
};
//--></script>
The line causing unexpected behavior is labeled as //error. When this line is uncommented, both the header and navigation containers expand while the sidebar disappears. However, when the line is commented out, the sidebar remains visible.
This behavior is puzzling and currently has no clear explanation.