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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Getting the browser window size

    Hi, this will probably make a bit more sense it you read my topic in the HTML section (Many problems with floating divs) where I had a problem with two floating divs, in the end the solution was to give both on my floating divs a fixed width. Now, the menu bar div will always be 150 pixels and i wanted the remaing width to be taken up by the main content div.

    This script here seems to work very wel in firefox but in ie I get scrollbars. This seems to be because firefox returns the actuall width of the viewing 'frame' while IE seems to give the width of the window itself.

    PHP Code:
    <script type="text/javascript">
    onload = function getBrowserWidth() {
        if (!
    document.all) {
        var 
    width document.body.offsetWidth;
        var 
    newWidth width 150;
        
    document.getElementById('main').style.width newWidth;
        }
    }
    </script> 
    After a bit of playing with it I found that IE seems to return in offsetWidth about 19 more pixels than the actual size of the viewable 'frame', can anyone confirm this?
    Now, when the browser window is resized I want the width of the element to be resized as well, which meant I had to add to the body tag <body onresize="getBrowserWidth();"> is there a better way to attach the function to when the window is resized?
    I am not sure how Opera and Safari return offsetWidth and if they do it like mozilla, or need special values like IE does to make it fit.

    Thanks for all of your help with any of these 'mini' questions
    Last edited by evilguru; 04-17-2005 at 11:23 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    It can get a bit confusing with the different browsers but if you run the following script in all your browsers you will see what each returns.


    PHP Code:
    <script type="text/javascript">
    <!--

    function 
    info(){
    str="<ul>"

    if(document.body.clientWidth){
    str+="<li>document.body.clientWidth = "+document.body.clientWidth
    str
    +="<li>document.body.clientHeight = "document.body.clientHeight
    }
    if(
    document.body.offsetWidth){
    str+="<li>document.body.offsetWidth = "+document.body.offsetWidth
    str
    +="<li>document.body.offsetHeight = "+document.body.offsetHeight
    }
    if(
    window.innerWidth){
    str+="<li>Window.innerWidth = "+window.innerWidth
    str
    +="<li>Window.innerHeight = "+window.innerHeight
    }
    if(
    window.outerWidth){
    str+="<li>Window.outerWidth = "+window.outerWidth
    str
    +="<li>Window.outerHeight = "+window.outerHeight
    }
    if(
    document.getElementsByTagName){
    str+="<li>document.getElementsByTagName('body')[0].offsetWidth = "+document.getElementsByTagName('body')[0].offsetWidth
    str
    +="<li>document.getElementsByTagName('body')[0].offsetHeight = "+document.getElementsByTagName('body')[0].offsetHeight
    }
    if(
    document.documentElement){
    str+="<li>document.documentElement.offsetWidth = "+document.documentElement.offsetWidth
    str
    +="<li>document.documentElement.offsetHeight = "+document.documentElement.offsetHeight
    }

    document.getElementById("display2").innerHTML=str

    }
    setTimeout("info()",200)
    //-->
    </script>

    <P>The following examples and may vary depending on which browser you are using to view this page.
    <P><center>
    <table border="0" width="80%">
    <tr valign="top">
    <td id="display2" width="50%"></td>
    </tr>
    </table> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also, available properties with window size information depend not only on the browser, but DOCTYPE as well (or more accurately whether the browser is in "quirks" mode or not)
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #4
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    You, sir have to be one of the greatest forum members ever!

    The result from it in IE were:
    Code:
    document.body.clientWidth = 1050
    document.body.clientHeight = 820
    document.body.offsetWidth = 1069
    document.body.offsetHeight = 824
    document.getElementsByTagName('body')[0].offsetWidth = 1069
    document.getElementsByTagName('body')[0].offsetHeight = 824
    document.documentElement.offsetWidth = 1069
    document.documentElement.offsetHeight = 824
    Note that the clientWidth is 19px lower than the others and 19px is what my testing showed was the 'viewable frame' area. From this I will keep with clientWidth (if it is the most correct DOM wise) as it gives the correct value for both IE and Firefox (I do not have opera or a mac, so I can not test safari or opera).
    Does anyone know a better way of calling the function when the window is resized other than '<body onresize="function()">?
    Thanks a million

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    You could try adding

    onresize=functionName

    to the end of your script.

    Not sure if this reacts differently to being called from the body tag
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #6
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks.
    The current script works almost perfectly but I have a couple of things I want to clear up first

    PHP Code:
    <script type="text/javascript">
            
    onload onresize = function mainWidth () {
                var 
    width document.body.clientWidth;
                var 
    mainWidth width 166;
                
    document.getElementById('main').style.width mainWidth;
            }
            
    </script> 
    In IE this script works fine, and as you resize the browser window the 'main' content div does as well. However firefox waits until you have finished picking your new browser window size before calling the function. It seems that while IE regesters onresize events as you move and 'nodes' around firefox only does it when you have finished. This can cause the site to look a bit distorted while you are moving it about. I am sure I read somewhere that there was a fix for this, however I am not sure what it was, if anyone knows please tell me.

    I have also read that opera does not support onresize is this correct? If so, is there another method of doing this? Thanks for all of your help.

  • #7
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Help

    i need to knw if this is right and how can i set offsetWidth for my flag.. and its stop button doesnot work the way it should.. when i click on start it speed increas but then my flag doesnot stop ny help
    Code:
    <script language="JavaScript" type="text/javascript">
    	<!--
    		function flagMove() {
    			var obj = document.getElementById('float');
    			if (!obj) return false; 
    			var leftPos = parseInt(obj.style.left);
    			leftPos += direction;
    			if (leftPos < 0) {
    				direction = -direction;
    				leftPos = 0;
    			} else if (leftPos > 750) {
    				direction = -direction;
    				leftPos = 750;
    				
    			}
    			obj.style.left = leftPos + 'px';
    		}
    		function Move() {
    			direction = 1;//can change the speed
    			delay = 10; // can make it slow
    			flagMoveInterval = window.setInterval('flagMove();',delay); 
    		}
    		
    //-->
    
    	</script>
    </head>
    <body onload="Move();">
    <h1>The Flag of <a href="http://en.wikipedia.org/wiki/Honduras">HONDURAS</a> by KAVITA RAWAT (K0847674)</h1>
    
    <div id="float" style="left:400px;"> 
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
    </div>
    
    <div id = "button"><input type="button" value="Start!" onclick="Move()"/>
    <input type="button"  value="Stop!" onclick="window.clearInterval(flagMoveInterval)"/></div>

  • #8
    Banned
    Join Date
    Oct 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmm this is very interesting. msn is always just a little bit larger when it comes to objects.
    Last edited by WA; 01-05-2010 at 08:28 PM.

  • #9
    New Coder
    Join Date
    Dec 2009
    Posts
    71
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by evilguru View Post
    Does anyone know a better way of calling the function when the window is resized other than '<body onresize="function()">?
    Try this for size (or resize i suppose)


  •  

    Posting Permissions

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