jQuery/js/html5 change page content when keyboard is visible on mobile devices [duplicate]

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.

Vacua

Hey Doua Beri! I'm a bit confused what you want from this - are you trying to keep it from zooming in at all? Or are you trying to grab the height of the screen between the keyboard and top when the keyboard is visible? Or do you mean that when the keyboard is visible you want it to look exactly like the second screen shot you posted? – Rotgut

@JCole I want to grab height of the screen between the keyboard and top when the keyboard is visible. when the keyboard is visible I want to reduce the umber of items to 4 like in the second screen, however this also depends on the first problem, of grabbing the height. This is some examples I gave for a better understanding of the problem. – Vacua

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

Tatianatatianas

in your example "logo" doesn't disappear until I start typing in the search box – Turbinate

I have test with chorme and firefox with a android phone. I don't have any iOS device so I don't see this behaviour – Tatianatatianas

@Turbinate I have ios 5.1 and after I start typing the search box and the keyboard is visible the logo is not disappearing. can you tell us what OS/browser are you using? – Vacua

@DoubleYo thanks for your help, and thanks for confirming that works on chrome/firefox on adroid. it seems that in ios showing the keyboard doesn't reduce the viewport size, so the only solution is to make a focus implementation. – Vacua

I update the script with LKM solution and it's works fine on iOS an Android now – Tatianatatianas

@DoubleYo woow .. thanks bro. helps a lot with some basic stuff. – Vacua

I have the same issue but it involves Jquery mobile footer what should i do note: I don't have static class or id to represent the element. All I have is data-role="footer" – Cotopaxi

Helpful. But window.innerHeight < initial_screen_size what about manual user-resize in non-mobile browser, or touch resize in mobile browser? – Slenderize