View Full Version : if(document.body.clientWidth < 800) hide my div

04-14-2005, 02:47 AM
Hi, It's been awhile since I've needed your expert help with js.

I've created a page that is 800 x 600 and this is all tables and sliced images. Then to the right of this i created a div/layer that is 224 x 600. Inside of this layer I plan to nest a swf file.

My goal is to have the entire div be hidden (display:none) when the user drags or sets the browser window equal to or below 800px.

I was starting out with the code below that I pasted from

As it is, I'm already getting the error: Object required: line 13. Hmmm!?

<script language=javascript>

if(navigator.appName == "Netscape"){

windowwidth = window.innerWidth;
windowheight = window.innerHeight;

}else if(navigator.appName == "Microsoft Internet Explorer"){

windowwidth = document.body.clientWidth;
windowheight = document.body.clientHeight;


windowwidth = "can't tell you";


document.write("<br>screen width = " + screen.availWidth);
document.write("<br>screen height = " + screen.availHeight);
document.write("<br>this window width = " + windowwidth);
document.write("<br>this window height = " + windowheight);


After I get the first part working, then I need to be able to tell it how to hide my layer?

I can't figure out how to put the logic together other than:

If(window.innerwidth =< 800){
document.getElementById(whichLayer).style.visibility = "hidden"

Here is some code I was using to try to figure out the logic of hiding divs

function hideLayer(whichLayer) {

if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "hidden";
else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "hidden";
else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "hidden";

Any help you have would be GREATLY appreciated :)


04-14-2005, 05:05 AM
I dont code of NS4 or any version of IE 5.0 or less, but give this a try

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
#leftcol {
border:1px solid #000000;
#rightcol {
border:1px solid #000000;
<script type="text/javascript">
function tellsize(){
if(window.innerWidth <= 800 || document.body.clientWidth <=800){
else if(window.innerWidth >= 800 || document.body.clientWidth){document.getElementById('rightcol').style.display='block';}
else if(document.all){
if(window.innerWidth <= 800 || document.body.clientWidth <=800){document.all['rightcol'].style.visibility = "hidden";}
else if(window.innerWidth >= 800 || document.body.clientWidth){document.all['rightcol'].style.visibility = "visible";}
else if(document.layers){
if(window.innerWidth <= 800 || document.body.clientWidth <=800){document.layers['rightcol'].style.visibility = "hidden";}
else if(window.innerWidth >= 800 || document.body.clientWidth){document.layers['rightcol'].style.visibility = "visible";}

document.getElementById('leftcol').innerHTML="screen width="+screen.width+"<br>screen height="+screen.height+"<br>window width="+document.body.clientWidth+"";

<body onresize="tellsize()" onload="tellsize()">
<div id="container">
<div id="leftcol"></div>
<div id="rightcol" name="rightcol"></div>

04-14-2005, 10:42 PM

Thank you very very much!

This is exactly(with a few very minor adjustments)what I needed to accomplish.

I don't know how to mark this as the answer - but it's perfect

Dan :)