Forum Moderators: open
I am trying to build a sidebar div that disappears when the width of the browser is less than 800px, but displays when the browser width is wider.
this is o.k., and has tested well in IE and Firefox, but I hit one problem.
when putting this code into a working html document. If there was any Iframe in the html page, the code will not work. I figure it must be throwing off the reading of my browser size and maybe I am not referencing the parent window correctly?
here is the code: (just take out the iframe to make it work correctly)
thanks for any advice! really stuck on this one...
==============
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Div test</title>
<style type="text/css">
#sidebar {
width: 200px;
height: 200px;
background-color: green;
display: none;
}
</style>
</head>
<body onload="checkRightPanel();">
<script language="JavaScript">
<!--
window.onresize= checkRightPanel;
function checkRightPanel() {
userWidth = document.body.clientWidth;
if (userWidth >= 800) {
document.getElementById('sidebar').style.display = 'block';
} else {
document.getElementById('sidebar').style.display = 'none';
}
}
//-->
</script>
<div id="sidebar">
sidebar here
</div>
<!-- iframe start -->
<iframe width=900 height=240 marginwidth=0 marginheight=0
hspace=0 vspace=0 frameborder=0 scrolling=no
bordercolor="#000000"
src="http://www.webmonkey.com">
</iframe>
<!-- iframe end -->
</body>
</html>
I just changed the body reference to:
userWidth = document.getElementsByTagName('body')[0].clientWidth
which I think references the parent frame element if I am correct.
works in Firefox! but not ol' IE?
man. I hate IE. at least now I know it works though and I must be getting close.
any IE bugs anyone can spot? I am hopeless at cross-browser javascript.
cheers!
