HTML5/CSS3 Website and soft keyboard

I'm working on a mobile web application and I have a problem with the Android soft keyboard when an input field is focused.

When I focus the input field, the soft keyboard appears. On Windows Phone (tested on 7.8) the whole page, so the entire DOM goes up to make room for the softkeyboard. With Android (and also on Google Chrome) some elements stay where they are, and others go up when the soft keyboard is openend. How can I get the whole DOM, or actually, the hole body of the page to go up to make room for the soft keyboard on Android (I haven't tested this on iOS yet).

Here are a few screenshots on Android when the keyboard is opened:

Here is what the page looks like when it's normal:

a busy cat http://i61.tinypic.com/2zflkw1.png

And this is what it looks like when the soft keyboard is opened:

a busy cat http://i58.tinypic.com/3160yo6.png

How can I get this effect?:

a busy cat http://i61.tinypic.com/msg2a.png

Answers


Here's my source code:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="robots" content="noindex" />
<!-- CSS -->
<style>
    @charset "UTF-8";

    body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    input, textarea, button {
        outline: none;
    }

    #appMain {
        position: absolute;
        width: 100%;
        max-width: 640px;
        height: 100%;
        background: url(static/img/static/main_bg.fw.png) no-repeat;
        background-size: cover;
    }

    #appHeader {
        position: absolute;
        margin: 0;
        width: 100%;
        height: 50px;
        background: #007EA8;
    }

    #headerUnderline {
        position: absolute;
        margin-top: 50px;
        width: 100%;
        height: 5px;
        background: #CCC;
    }

    #headerLogo {
        position: absolute;
        left: -50px;
        width: 125px;
        height: 72px;
        background: url(static/img/static/sprite.fw.png);
        background-position: 0 0;
    }

    #mainLogo {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 100px;
    }

    #mainSlogan {
        width: 100%;
        text-align: center;
        font: 20px sans-serif;
        color: #FFF;
        text-shadow: 1px 1px 1px #000;
    }

    #footer {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 50px;
        background: red;
    }

    #facebook {
        margin: 0;
        padding-left: 30px;
        float: left;
        width: 50%;
        height: 100%;
        font: 14px sans-serif;
        color: #FFF;
        background: #003A75;
        border: 0;
        text-shadow: 1px 1px 1px #000;
    }

    #signIn {
        margin: 0;
        float: right;
        width: 50%;
        height: 100%;
        font: 14px sans-serif;
        color: #FFF;
        background: #007900;
        border: 0;
        text-shadow: 1px 1px 1px #000;
    }

    #facebookLogo {
        position: absolute;
        left: 4%;
        top: 10px;
        width: 16px;
        height: 30px;
        background: url(static/img/static/sprite.fw.png);
        background-position: -160px -30px;
    }

    #fieldHolder {
        position: absolute;
        width: 100%;
        bottom: 100px;
    }

    .accountField {
        margin-bottom: -2px;
        padding-left: 5px;
        width: 100%;
        height: 40px;
        background: rgba(255, 255, 255, 0.2);
        border: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font: 14px sans-serif;
        color: #333;
    }

    .accountField:focus {
        background: #FFF;
    }

    .accountField::-webkit-input-placeholder {
       color: #FFF;
    }

    .accountField2::-moz-placeholder {  /* Firefox 19+ */
       color: #FFF;  
    }

    .accountField:-ms-input-placeholder {  
       color: #FFF;  
    }

    #subFooter {
        position: absolute;
        bottom: 65px;
        width: 100%;
    }

    #signUpButton {
        margin-left: 10px;
        float: left;
        background: none;
        border: 0;
        font: 14px sans-serif;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 1px 1px 1px #000;
        text-decoration: none;
    }

    #forgotButton {
        margin-right: 10px;
        float: right;
        background: none;
        border: 0;
        font: 14px sans-serif;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 1px 1px 1px #000;
        text-decoration: none;
    }
</style>
    <!-- JS -->
<script src="static/js/includes/jquery_m.js"></script>
<script src="static/js/includes/jquery.js"></script>
</head>
<body>
<div id="appMain">
    <div id="appHeader">
        <div id="headerUnderline"></div>
        <div id="headerLogo"></div>
    </div>
    <img id="mainLogo" src="static/img/static/main_logo.fw.png" alt="Welcome to     Scrapll!" />
    <h1 id="mainSlogan">The Private Social Network<h1>
    <form action="login.php" method="post">
        <div id="fieldHolder">
            <input type="email" class="accountField" name="email" placeholder="Email Address" />
            <input type="password" class="accountField" name="password" placeholder="Password" />
        </div>
        <div id="subFooter">
            <a href="index.php" type="button" id="signUpButton" data-transition="slide">Sign Up</a>
            <a href="index.php" type="button" id="forgotButton" data-transition="slide">Forgot password</a>
        </div>
        <div id="footer">
            <input type="submit" id="signIn" value="Sign In" />
    </form>
            <button type="button" id="facebook">Login with Facebook</button>
            <div id="facebookLogo"></div>
        </div>
</div>
</body>
</html>

Need Your Help

Sqlplus login without password

oracle passwords sqlplus

I installed Oracle 11gR2 on my linux server. When I want to login via sys user on my db, I enter "sys as sysdba" and when system give password , I push enter and I can login on my db with sqlplus.

Using TIMESTAMPDIFF with JPA criteria query and hibernate as the provider

java mysql sql hibernate jpa

I have a data table with columns setup and release, both of which hold timestamps. My goal is to create an equivalent of the SQL query below using CriteriaQuery.