Question

Possible Duplicate:
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

I’m building a mobile version for a website, and I’m interested if I can create using jQuery/js/html5 or any other technology the same split screen effect that can be made on mobile apps when virtual keyboard is visible.

For example if a user enters my webpage and clicks on an input text field, the virtual keyboard is showed and the browser automatically zooms to the area where the input text field is.

What I want is to be able to change my page content the moment the virtual keyboard is visible based on the new resolution( screen height – keyboard height), by moving the input text field on top of the screen, followed by some tips depending on what the user enters in the text field.

Here are some sketches to see what I am talking about:

This is the page view without keyboard, results based on the search:

page with portrait keyboard, the logo disappears, the text input moves to top, and a max 4 items are shown

page with landscape keyboard, the logo disappears, then input moves to top and is enlarged, only 2 items are shown

is the keyboard is hidden, the page should go to phase 1.

Hope this helps.

Answer 1

I have tried a first solution for your problem by catching the resize event
With that you can know the orientation and gest is the keyboard is visible

UPDATE : adding iOS mobile safari support with LKM solution

var is_keyboard = false;
var is_landscape = false;
var initial_screen_size = window.innerHeight;

/* Android */
window.addEventListener("resize", function() {
    is_keyboard = (window.innerHeight < initial_screen_size);
    is_landscape = (screen.height < screen.width);

    updateViews();
}, false);

/* iOS */
$("input").bind("focus blur",function() {
    $(window).scrollTop(10);
    is_keyboard = $(window).scrollTop() > 0;
    $(window).scrollTop(0);
    updateViews();
});

Now you can show and hide the logo and some line item

function updateViews() {
    $("li").hide();
    if (is_keyboard) {
        $("#logo").hide();
        if (is_landscape) {
            $("li").slice(0, 2).show();
        }
        else {
            $("li").slice(0, 4).show();
        }
    }
    else {
        $("#logo").show();
        $("li").show();
    }
}

For the JS based on this HTML

<div id="logo">Logo</div>
<input type="text"><input type="submit" value="search">
<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

Check out my example page