0

I'm trying to resize the div "main" so that the footer is at least at the bottom of the screen (if not farther) no matter how the viewer's phone is oriented. Is there a way to do this using javascript?

Here's the html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<link rel="stylesheet" type="text/css" href="about.css" />
<link rel="shortcut icon" type="image/x-icon" href="/about.ico">
<script type = "text/javascript" src="about.js"></script>
    <body onLoad="baseSize()">
        <div id="container">
        <div id="header">
            <table id="navbar" align="center"><tr>
                <td class="link"><a href="index.html">Home</a></td>
                <td class="link"><a href="poetry.html">Poetry</a></td>
                <td class="link"><a href="essays.html">Essays</a></td>
                <td class="link"><a href="stories.html">Stories</a></td>
                <td class="link"><a href="about.html">About</a></td>
                <td><p id="icon">Craig InTheDell</p></td>
            </tr></table>
        </div>
        <div id="main">
            <div id="text">
            <p>Hello! My name is Craig, Craig InTheDell. I love writing, and I love thinking. I hope that in reading some of my writings here, I have encouraged some of you to think, because after all, if thinking brings about being, better think and be than blank and blink out of existence! But whatever your cerebral activity right now, enjoy!</p>
            </div>
            <div id="contact">
            <h2>Questions or Comments?</h2><p>Shoot me an email at admin@craiginthedell.com. I appreciate your feedback!</p></div>
            <img src="dolphin.png">
        </div>
        </div>
        <div id="footer">
            <div id="image"></div>
        </div>
    </body>
</html>

and the javascript

function baseSize() {
    var available = window.screen.availHeight;

    var right = document.getElementById("main");
    main.style.height = available + "px";
}

It works great on computer screens and the landscape mode of mobile phones, but in portrait it's way too short.

Matvei
  • 323
  • 1
  • 6

1 Answers1

0

This website might be helpful to you... From that I wrote this code which I haven't tested yet but should help.

// Define an event handler function to execute when the device orientation changes 
var onOrientationChange = function() {

    // The device is in portrait orientation if the device is held at 0 or 180 degrees
    // The device is in landscape orientation if the device is at 90 or -90 degrees

    var isPortrait = window.orientation % 180 === 0;
    var orientation = isPortrait ? 'portrait' : 'landscape';

    var viewPortWidth;
    var viewPortHeight;

    if (typeof window.innerWidth != 'undefined') {
        viewPortWidth = window.innerWidth,
        viewPortHeight = window.innerHeight
    }
    $('#footer').css('margin-top', viewPortHeight);
    alert('You are now viewing in '+orientation+' mode.');
}

// Execute the event handler function when the browser tells us the device has 
// changed orientation

window.addEventListener('orientationchange', onOrientationChange, false);

// Execute the same function on page load to set the initial <body> class

onOrientationChange();
Ali
  • 1
  • 1
  • So do I need to put anything in the html to execute this? Or do I just replace alert('You are now viewing in '+orientation+' mode.'); with the resize command? – Matvei Jul 21 '13 at 04:30
  • The `$('#footer').css('margin-top', viewPortHeight);` will cause the footer to have a margin-top the same height as the window.. the alert was just for debugging purposes. This may not be exactly what you want as this may push the footer WAY to far down the page. You may want to instead set the min-height of the #container div to the viewPortHeight. Also this solution requires JQuery fyi – Ali Jul 21 '13 at 05:02