SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need some JS help. My code is goofed somehow

    As you can tell from this code, I am simply trying to set the height of a div based on the innerheight of the browser window - 90px.

    However, when my code does not work.

    I realize I am using getDocumentbyID which might not be cross browser.

    Any chance someone who is a JS guru could look at my code and make the needed tweaks to get this to function correctly.

    It doesn't look like much, but I have spent the better part of 2 hours on this

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function alertSize() {
      var myHeight = 0;
      var newHeight;
      var heightscript;
      if( typeof( window.innerWidth ) == 'number' ) {
    	//Non-IE
    	myHeight = window.innerHeight;
    	newHeight = myHeight - 90 ;
    	document.getElementById('nav').style.height = newHeight + 'px';
    	
      } else if( document.documentElement && (document.documentElement.clientHeight ) ) {
    	//IE 6+ in 'standards compliant mode'
    	myHeight = document.documentElement.clientHeight;
    	newHeight = myHeight - 500 + 'px';
    	document.getElementById('nav').style.height = newHeight + 'px';
      } else if( document.body && ( document.body.clientHeight ) ) {
    	//IE 4 compatible
    	myHeight = document.body.clientHeight;
    	newHeight = myHeight - 90 + 'px';
    	document.getElementById('nav').style.height = newHeight + 'px';
      }
      //window.alert( ' Height = ' + newHeight );
    	  window.onresize = alertsize;
    }
    </script>
    </head>
    
    <body>
    <div id="nav" style="overflow: auto;"><br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs</div>
    </body>
    </html>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    newHeight = myHeight - 500 + 'px';


    is not subtracting 90 like the other two places plus also you are concatenating 'px' onto the end twice in IE.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I fixed those, but it still doesn't work.

    I mean, the idea is that the JS pulls the inner window height, subtracts 90 pixels, and displays the height of the div to basically be 100% of the browser window - 90pixels.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function alertSize() {
      var myHeight = 0;
      var newHeight;
      if( typeof( window.innerWidth ) == 'number' ) {
    	//Non-IE
    	myHeight = window.innerHeight;
    	newHeight = myHeight - 90 ;
    	document.getElementById('nav').style.height = newHeight + 'px';
    	
      } else if( document.documentElement && (document.documentElement.clientHeight ) ) {
    	//IE 6+ in 'standards compliant mode'
    	myHeight = document.documentElement.clientHeight;
    	newHeight = myHeight - 90;
    	document.getElementById('nav').style.height = newHeight + 'px';
      } else if( document.body && ( document.body.clientHeight ) ) {
    	//IE 4 compatible
    	myHeight = document.body.clientHeight;
    	newHeight = myHeight - 90;
    	document.getElementById('nav').style.height = newHeight + 'px';
      }
      //window.alert( ' Height = ' + newHeight );
    	  window.onresize = alertsize;
    }
    </script>
    </head>
    
    <body>
    <div id="nav" style="overflow: auto;"><br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs<br />afdfdsafs</div>
    </body>
    </html>

  4. #4
    SitePoint Addict dek's Avatar
    Join Date
    Oct 2004
    Location
    UK
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason it doesn't work is two-fold:

    One - you're incorrectly capitalised 'alertSize' when you're assigning it to window.onresize. Two - you put the window.onresize assignment inside the alertSize function, so it never gets called.

    Oh - and in FF, I believe I'm right in saying that it doesn't call the onresize handler at load time, so you may want to add alertSize as an onload handler as well.
    Only dead fish go with the flow

  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, ok. Thanks.

    Well, it works now. Just to clarify, though, am I incorrect for running the "
    document.getElementById('nav').style.height = newHeight + 'px';"

    In the 3 different places, or is there an easier way to do it? I guess I just want to make sure it is as clean as possible.

    Thanks

  6. #6
    SitePoint Addict dek's Avatar
    Join Date
    Oct 2004
    Location
    UK
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's fine to do it like that, but personally, I'd either make a helper function of it, or use a predefined library to make manipulations like that easier.
    Only dead fish go with the flow

  7. #7
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Making a helper function out of it is where I may need some "help"

  8. #8
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Btw - the following code NOW works:

    Code:
    <script type="text/javascript">
    function size() {
      var myHeight = 0;
      var newHeight;
      if( typeof( window.innerWidth ) == 'number' ) {
    	//Non-IE
    	myHeight = window.innerHeight;
    	newHeight = myHeight - 250 ;
    	document.getElementById('divChatWrap').style.height = newHeight + 'px';
    	
      } else if( document.documentElement && (document.documentElement.clientHeight ) ) {
    	//IE 6+ in 'standards compliant mode'
    	myHeight = document.documentElement.clientHeight;
    	newHeight = myHeight - 250;
    	document.getElementById('divChatWrap').style.height = newHeight + 'px';
      } else if( document.body && ( document.body.clientHeight ) ) {
    	//IE 4 compatible
    	myHeight = document.body.clientHeight;
    	newHeight = myHeight - 250;
    	document.getElementById('divChatWrap').style.height = newHeight + 'px';
      }
      //window.alert( ' Height = ' + newHeight );
    	  //window.onresize = alertSize;
    }
    window.onload = function() { 
    
    	size();
    	
    }
    window.onresize = function() {
    	size();
    }
    
    
    </script>
    The only issue that is happening is that the height of the #divChatWrap on the page load is not being given the height needed until the page is resized.

    Can I make this so that once the page is loaded, the div takes on the height of (innerwindow height - 250px).

    ????

    Thanks


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
  •