Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2003
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    if(document.body.clientWidth < 800) hide my div

    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/d...htmltut10.php3

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

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

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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I dont code of NS4 or any version of IE 5.0 or less, but give this a try
    Code:
    <!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>

  • #3
    New to the CF scene
    Join Date
    May 2003
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: if(document.body.clientWidth < 800) hide my div

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •