...

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



danacton
04-14-2005, 01: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
http://www.useractive.com/learning/dhtml/dhtmltut10.php3

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;

}else{

windowwidth = "can't tell you";

}

document.open();
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);
document.close();

</script>

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 :)

Dan

_Aerospace_Eng_
04-14-2005, 04: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"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#container {
width:80%;
}
#leftcol {
width:200px;
height:500px;
float:left;
border:1px solid #000000;
}
#rightcol {
width:50px;
height:500px;
float:right;
border:1px solid #000000;
}
-->
</style>
<script type="text/javascript">
<!--
function tellsize(){
if(document.getElementById){
if(window.innerWidth <= 800 || document.body.clientWidth <=800){
document.getElementById('rightcol').style.display='none';}
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+"";
}
-->
</script>
</head>

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

danacton
04-14-2005, 09:42 PM
Aerospace_Eng_,

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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum