Jquery mobile 1.4 on iOS the fixed elements on bot

Question

Hi there I am building cordova 3 app with Jquery mobile 1.4

Safari, and Chrome on my mac have no issues with the following, but when I deploy on the real device, or iOS simulator and want to type in the fields I get the bottom fixed elements of the page moving up and overlapping the input elements. The cursor is blinking in the right position, where the input field is, but the slider of the footer is hiding it.

To make it simple my page looks like that:

[header fixed] div with input text div with input text div with input text [footer fixed]

one of the input text instances

<input data-role="none" class="inputCalc gray_br" type="text" id="grams4" value="37"><div class="macro_g">grams</div>

the slider on the bottom

<div id="cal_slider" style="position:fixed; bottom:0px; left:0px; height:57px; width:100%; background-color:#E2E2E2;">
<form style="padding-top:6px" class="full-width-slider"><label for="slider-12" class="ui-hidden-accessible">Slider:</label> <input type="range" data-highlight="true" name="slider-12" id="slider-12" min="0" max="100" value="50"></form>
</div>

Jquery to show hide on focus and blur events

$(document).on('focus', 'input , text', function(e){

    // I have try with --> $("#grams4").focus( function () {... // but it's the same

    console.log("on focus fired");

    $("#cal_slider").hide();

});


$(document).on('blur', 'input, text', function(e){

    console.log("on blur fired");

        $("#cal_slider").show();

});

So I have been trying with focus() and blur() events to toggle (show and hide) the slider. It works fine on Chrome and Safari.

But on real device (iPhone 5 iOS7) when I tap the input textfield, the cycle works like expected the first time only:

(1) I get a focus log, the footer is hidden, (2) the keyboard comes up and (3) I can type in the input text.

Then (4) when I tap DONE the keybord hides and it's OK. (5) I get a blur event in the console, and the footer with the slider shows again. Perfect.

However, if I tap again on any of the input text fields, I get a blur log in the console and not a focus as expected, and the slider goes back again in front of the input field.

As I told above in Chrome, Safary works perfectly.

Any other ideas how to detect keybord on / off, maybe without event handlers ?

Answer 1

This works:

put the following code after the closing tag of the multipage.

</body>
<script type="text/javascript">
document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
</script>
</html>

Thanks to Richard Kennard stackoverflow.com/a/20092755/3166158