Is it possible to make a webpage adjust in height to the height of the browser window, so that when a short page, designed to fit on an iPad in landscape orientation without scrolling, is viewed on a larger display, the footer section stays stuck to the bottom of the web browser window?
I created my CSS layout following Waltd’s great explanation on how to make a header and footer adjust to the width of the page while keeping the content centered on the page, (http://www.freewaytalk.net/thread/view/96544#m_96557)
I suspect the answer is to query the browser to determine it’s current window dimensions, and to adjust the height of the content section accordingly. If so, how does one do that?
By the way, I’m not interested in scaling my content to fill the space, only to add white space if necessary below the main content so that footer is always at the bottom of the window, or below, if the content exceeds the window height.
I found out how to determine the window height of the browser window with JavaScript. To make the height of my webpage fit the browser window, I can get the height value through JavaScript, subtract the fixed height of the header and footer, and use that result as the height of my content HTML Item.
Does anyone know how to apply the result of a JavaScript to the height of an HTML Item? Is there and action that does this?
Yes. There’s two ways off the top of my head. If you apply the Protaculous Action to your page, and set the Library picker to protaculous-packed, you can click the top Function Body button in that Action’s interface and paste in this code (which also gets the height of the browser window for you in a studiously cross-browser manner):
The long-hand way to do this is to add a JavaScript block to the bottom of the page, and manipulate the element directly from there. Assuming you already know the code to get the window height, you would open the Page / HTML Markup dialog, and switch to the Before /head section of the picker at the bottom left of the dialog. Then paste in your own variation on the following:
<script type="text/javascript">
var box = document.getElementById('yourElementId');
//your code to get the height goes here, like this
// var h = whateverYouDoToGetTheHeight();
box.style.height = h + 'px';
//that's assuming that your height-getting function returns
//only the number without the px (pixels) unit...
</script>
I don’t know your skill level with code, so if I’m over-explaining, sorry about that. The lines with the leading // are comments, the script doesn’t need those to run. The ‘yourElementId’ bit is shown in Freeway as the Title field in the Inspector – but only for HTML boxes that have been drawn as layers or as inline CSS elements. Look in the Inspector for either the Layer checkbox or the CSS checkbox, which must be checked, in order to get a DIV with an ID, instead of a TD without one.
Walter
On Dec 14, 2012, at 6:26 AM, Marek wrote:
Does anyone know how to apply the result of a JavaScript to the height of an HTML Item? Is there and action that does this?
I applied the Protaculous Action to my page, and added the code you provided. I used the name of My HTML Item (it has the CSS checkbox checked) in place of ‘yourElementId’. But the height of my page has not changed.
Any ideas on what I might check to see where the issue lies?
Thanks again for all the help, Walter. You have been a great help to me already through your responses in other threads!
Could you post a link showing what you’ve gotten so far?
Walter
On Dec 14, 2012, at 5:50 PM, Marek wrote:
Thanks, Walter!
I applied the Protaculous Action to my page, and added the code you provided. I used the name of My HTML Item (it has the CSS checkbox checked) in place of ‘yourElementId’. But the height of my page has not changed.
Any ideas on what I might check to see where the issue lies?
Thanks again for all the help, Walter. You have been a great help to me already through your responses in other threads!