Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Member metromax's Avatar
    Join Date
    Jun 2007
    Posts
    76
    Member #
    15335
    Hi everyone, I'm having a huge problem. What I'm trying to do is to set the height of a div (named wrap2) equal to the height of the browser window minus 62px. This is what I have so far:

    Code:
    <script type='text/javascript'>
    <!--
     
     var viewportwidth;
     var viewportheight;
     
     if (typeof window.innerWidth != 'undefined')
     {
          viewportwidth = window.innerWidth,
          viewportheight = window.innerHeight
     }
     
     else if (typeof document.documentElement != 'undefined'
         && typeof document.documentElement.clientWidth !=
         'undefined' && document.documentElement.clientWidth != 0)
     {
           viewportwidth = document.documentElement.clientWidth,
           viewportheight = document.documentElement.clientHeight
     }
     
     // older versions of IE
     
     else
     {
           viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
           viewportheight = document.getElementsByTagName('body')[0].clientHeight
     }
    document.getElementById('wrap2').style.height = viewportheight - 62;
    //-->
    </script>
    <div id='wrap2' style='overflow:scroll;clear:both;position:relative;margin: 4px 0 0 0;height:;'>Hello world!</div>
    The problem is that the div named wrap2 isn't changing at all.
    Any suggestions/fixes would be greatly appreciated .

  2.  

  3. #2
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Don't forget that CSS attributes have string values. So you must change this line:
    Code:
    document.getElementById('wrap2').style.height = viewportheight - 62;
    to this:
    Code:
    document.getElementById('wrap2').style.height = viewportheight - 62 + 'px';
    Hyperair

  4. #3
    Member metromax's Avatar
    Join Date
    Jun 2007
    Posts
    76
    Member #
    15335
    Hi hyperair, thank you for the fast reply. I've tried this before, but the result is still the same. I'm sorry, but I realized that I had additional styles attached to wrap2, which I've posted the fix to above.

  5. #4
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Do you have the page in action?
    Hyperair

  6. #5
    Member metromax's Avatar
    Join Date
    Jun 2007
    Posts
    76
    Member #
    15335
    Yes, I do, but please note that it is in very early stages.
    Here it is: http://osxjunky.blogspot.com/.
    Thank you!

  7. #6
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Aha. I think I know what went wrong... The script must be put either AFTER the div (not recommended) or run onload or ondomready of the page.

    You see, if you place the script high up in your page (or before the div), it will be run before wrap2 can be found. When it is run, it cannot find <div id="wrap2"> so this command:
    Code:
    document.getElementById('wrap2')
    will return null, and the entire line will fail.

    However, if you make it run AFTER wrap2 is loaded (through onload, ondomready, or putting the script below wrap2) it should work.
    Hyperair

  8. #7
    Member metromax's Avatar
    Join Date
    Jun 2007
    Posts
    76
    Member #
    15335
    oh, didn't think about that. I put it under the wrap2, but it still comes out the same. How would I put it in an onload, just by making it a function? (I'm a javascirpt newbie).

  9. #8
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Code:
    <script type="text/javascript">
    // <![CDATA[
    function resizeWrap2()
    {
    	var viewportwidth;
    	var viewportheight;
    
    	if (typeof window.innerWidth != 'undefined')
    	{
    		viewportwidth = window.innerWidth;
    		viewportheight = window.innerHeight;
    	}
    
    	else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
    	{
    		viewportwidth = document.documentElement.clientWidth;
    		viewportheight = document.documentElement.clientHeight;
    	}
    
    	// older versions of IE
    
    	else
    	{
    		viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
    		viewportheight = document.getElementsByTagName('body')[0].clientHeight;
    	}
    	document.getElementById('wrap2').style.height = viewportheight - 62 + 'px';
    
    }
    // ]]>
    </script>
    HTML Code:
    <body onload="resizeWrap2();">
    While modifying your code I noticed that instead of ; you used , at the end of your width commands. Those create errors. You can't end a command with , only with ;.
    Hyperair

  10. #9
    Member metromax's Avatar
    Join Date
    Jun 2007
    Posts
    76
    Member #
    15335
    Hmmm, tried it, but nothing is happening. Do you think it might have anything to do with blogger?

  11. #10
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Are you sure nothing's happening? It works on Firefox 3.0 beta 5 pre here. However, I did notice that there are some issues with the figure you used... 62. It's not enough. I still get the scrollbar at the right side of my screen.
    Hyperair


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:56 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com