www.webdeveloper.com
Results 1 to 5 of 5

Thread: set layer or table to the very bottom of window

  1. #1
    Join Date
    Jun 2004
    Location
    London UK
    Posts
    541

    set layer or table to the very bottom of window

    Hi all

    I am wanting to set a layer or table to the very bottom of the window so no mater the size of the window it is always at the bottom. Like as if I was using a frame but I don't want to use frames.

    Any ideas? I've looked on goole but can't seem to find what I need, maybe i'm searching the wrong keywords.

    Cheers
    Chris
    Successful people ask better questions, and as a result, they get better answers - Anthony Robbins

  2. #2
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    You need to get the height of the window using

    document.body.clientHeight

    Then you need the height of the layer, or table.

    Then use

    document.getElementById("ID").style.top = document.body.clientHeight - document.getElementById("ID").offsetHeight

    to set its position

    <div id="div1" style="position:absolute;left:0;top:0;width:300px;height:100px;border:1px solid blue">hi there</div>

    <script>
    <!--
    win_height=document.body.clientHeight
    div_height= document.getElementById("div1").offsetHeight
    document.getElementById("div1").style.top = win_height - div_height

    // -->
    </script>

  3. #3
    Join Date
    Jun 2004
    Location
    London UK
    Posts
    541
    Thanks for that.

    For some reason it didn't work....but.....it did lead to me finding this very cross compatable solution:

    PHP Code:
    function setfooter() {
      var 
    myWidth 0myHeight 0;
      if( 
    typeofwindow.innerWidth ) == 'number' ) {
        
    //Non-IE
        
    myWidth window.innerWidth;
        
    myHeight window.innerHeight;
      } else if( 
    document.documentElement &&
          ( 
    document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        
    //IE 6+ in 'standards compliant mode'
        
    myWidth document.documentElement.clientWidth;
        
    myHeight document.documentElement.clientHeight;
      } else if( 
    document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        
    //IE 4 compatible
        
    myWidth document.body.clientWidth;
        
    myHeight document.body.clientHeight;
      }
      
    div_heightdocument.getElementById("footer").offsetHeight
      document
    .getElementById("footer").style.top myHeight div_height


    PHP Code:
    <body onLoad="setfooter()" onResize="setfooter()"
    PHP Code:
    <div id="footer" style="position:absolute; left:0; top:352px; width:100%; height: 32px; border:0; color: #FFFFFF;">
    Footer
    </div
    Thanks for your help

    Chris
    Successful people ask better questions, and as a result, they get better answers - Anthony Robbins

  4. #4
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,222
    You are doing it the hard way. You could just use css to position it completely. I do not see why you need the scripts.

    edit: Oh, wait, nevermind, I see you want it to stay there even when it scrolls. But if you just want something to always be at the window bottom no matter the size, css can still do that without the aid of a script.
    Last edited by PeOfEo; 08-14-2004 at 11:48 AM.

  5. #5
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Strange that it did not work for you, I'd tested it in IE6, Mozilla, and Firefox without any problems

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles