SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to "Pin" Content to Bottom of Popup Window

    Hello,

    I have a popup window that is divided into three sections: header, body, and footer. I would like to "pin" the footer to the bottom of the window, but am having difficulty. I have created a test page here:

    http://www.entropysolutions.net/test/popup_demo.html

    I tried adding the following properties to "#helpfooter": position:absolute, bottom:0, and width:100%. That was really close, but the "Close window" text was cut off a bit.

    Any ideas?

    Thanks,


    Sean

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I should add this bit of info: the content of the "body" section will be variable, so if the content fits within the popup window, then I'd like the footer to be pinned at the bottom.

    If not (lots of content), then I'd like to have the user scroll down and see the footer after scrolling down all the way.

  3. #3
    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)
    Positioning the footer at the bottom with CSS is a good idea, but will only work if the content never exceeds the innerHeight of the window minus the height of the footer. DHTML is needed for the logic you've described.

    This demo uses the X library and downgradable dhtml.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Help Popup</title>
    <style type='text/css'><!--
    body
    {
    	margin:0; padding:10px;
    	background-color: #fff;
    	background-image: none;
    }
    p
    {
    	line-height: normal;
    	margin-top: 0px;
    	margin-bottom: 12px;
    }
    #helpheader
    {
    	background-color: #03c;
    	font-size: 12px;
    	font-weight: bold;
    	color: #fff;
    	padding: 8px 10px 8px 10px;
    	margin:0;
    }
    #helpbody
    {
    	background-color: #fff;
    	font-size: 12px;
    	font-weight: normal;
    	color: #000;
    	padding: 10px 10px 0px 10px;
    	margin:0;
    }
    #helpfooter
    {
    	background-color: #ccc;
    	font-size: 11px;
    	font-weight: normal;
    	color: #000;
    	text-align: center;
    	padding: 5px 10px 5px 10px;
    	margin:0;
    }
    --></style>
    <script type='text/javascript' src='x.js'></script>
    <script type='text/javascript'><!--
    
    var xDowngrade = true;
    
    if (document.getElementById || document.all || document.layers) {
      document.write("<" + "style type='text/css'> .X {position:absolute;width:100%;height:auto;} <" + "/style>");
      xDowngrade = false;
    }
      
    window.onload = function()
    {
      if (!xDowngrade) {
        setupFooter();
        xAddEventListener(window, 'resize', setupFooter);
      }  
    }
    
    function setupFooter()
    {
      var margin = 10;
      // y at end of body
      var y = xPageY('helpbody') + xHeight('helpbody') + margin;
      // y at bottom of window
      var y2 = xClientHeight() - xHeight('helpfooter') - margin; 
      // choose the greater
      if (y < y2) y = y2;
      // position the footer
      xMoveTo('helpfooter', xPageX('helpbody'), y);
    }
    //--></script>
    </head>
    <body>
    
    <div id="helpheader">
    Print Orientation
    </div>
    
    <div id="helpbody">
    ...
    </div>
    
    <div id="helpfooter" class="X">
    <a href="javascript:window.close();">Close window</a>
    </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
  •