SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy document.body.clientHeight - not working

    Guys I wrote this function ‘newWidthHeight’ in javascript to dynamically capture the width and height of the screen and display the div ‘abc’. The code is working fine for controlling the width but its not working while controlling the height. Line no 3 and 4 not working could u help me guide whats wrong in the script.

    function newWidthHeight()
    {

    var xWidth = document.body.clientWidth;
    document.getElementById('abc').style.width = xWidth;
    var xHeight = document.body.clientHeight;
    document.getElementById('abc').style.height = xHeight;


    }


    Thanks - vicky!!!!

  2. #2
    Member ngaisteve1's Avatar
    Join Date
    May 2003
    Location
    Kuala Lumpur, Malaysia (Boleh!)
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What browser are you using? If you have firebug addon of firefox, what error message it shows? Have you tested with different browser?
    My Personal HomePage - www.findingsteve.net

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is IE (6) only, I believe you'd want innerHeight/innerWidth for non IE browsers..

    Code:
    <script type="text/javascript">
    function newWidthHeight() {
        var xWidth = document.body.clientWidth;
        document.getElementById('abc').style.width = xWidth - 20;
        var xHeight = document.body.clientHeight;
        document.getElementById('abc').style.height = xHeight - 30;
    }
    
    window.onload = function() {
        newWidthHeight();
    }
    
    window.attachEvent("onresize", newWidthHeight);
    </script>
    
    <div id="abc" style="border:1px solid red; padding:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

  4. #4
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For this I usualy use excellent code from here http://www.themaninblue.com/writing/...ve/2004/09/21/

    Code:
    function getBrowserWidth()
    {
    	if (window.innerWidth)
    	{
    		return window.innerWidth;
    	}
    	else if (document.documentElement && document.documentElement.clientWidth != 0)
    	{
    		return document.documentElement.clientWidth;
    	}
    	else if (document.body)
    	{
    		return document.body.clientWidth;
    	}
    	
    	return 0;
    };
    var xWidth= getBrowserWidth()

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    @Mirek: I agree, that is a very nice script.
    I've also found that quirksmode has other variations that can be very useful depending on your needs.
    http://www.quirksmode.org/viewport/compatibility.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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