SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist Fleeters's Avatar
    Join Date
    Jul 2003
    Location
    Dumpsville
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow window height detection / dynamically assign width to style?

    So i'm looking to do this kind of thing on a window.onResize event.:: pseudocode::

    onResize
    {

    if( window.height < 500 )
    {
    set the height style of a div to 800px.
    }
    else
    {
    set the height style of a div to 100%.
    }
    }

    can anyone direct me?
    Aaron Smith
    smithaaronlee.net

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Getting the window size is not a straight-forward task. This little demo is offered just to illustrate how this might be done. But this is really not what you should do. Try to find a way to make that DIV fluid - let the browser size it to fit the content instead of forcing its size with script.

    Give us a link to the page and maybe we can suggest something.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type='text/css'>
    #d1 {
      position: relative;
      color: #FFF;
      background: #009;
      width: 100%;
      height: 800px;
    }
    </style>
    <script type='text/javascript'>
    window.onresize = function()
    {
      if (document.getElementById)
      {
        var e = document.getElementById('d1');
        if (e && e.style)
        {
          var h = 0;
          if (window.innerHeight)
          {
            h = window.innerHeight;
            window.status = 'window.innerHeight: ' + h; // for debugging
          }
          else if (document.documentElement && document.documentElement.clientHeight)
          {
            h = document.documentElement.clientHeight;
            window.status = 'document.documentElement.clientHeight: ' + h; // for debugging
          }
          else if (document.body && document.body.clientHeight)
          {
            h = document.body.clientHeight;
            window.status = 'document.body.clientHeight: ' + h; // for debugging
          }
          if (h)
          {
            if (h < 500)
            {
              e.style.height = '800px'; 
            }
            else
            {
              e.style.height = '100%'; 
            }
          }
        }
      }
    }
    </script>
    </head>
    <body>
    
    <div id='d1'>
    I am 'd1'
    </div>
    
    </body>
    </html>


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
  •