Back to Top

IOS – Moving header and footer when open a keyboard and enter a text in search box

moving header footer issue

I was working in IOS mobile app which is using jQuery mobile and Phonegap and get issue that header and footer moving when entering text in a text box or text area.

Here, I am going to explain about to stop moved header and footer when open a keyboard and enter a text in search box IOS.

Let’s see solution for moving header and footer in IOS version.

id_textboc_addcourse is a id of textbox and .footer is a class name of footer and .topbar is Header class name.

 $(document).on('focus', '#id_textboc_addcourse', function() {
     if (parseFloat(window.device.version) >= 5.0) {
         if ($(this).attr('readonly') === undefined) {
             $('.footer').show();
             $('.footer').css('position', 'absolute');
             $(document).scrollTop($('.footer').position().top);
             $('.topbar').css('position', 'absolute');

         }
     }
 });

 $(document).on('blur', 'input, select, textarea', function() {
     if (parseFloat(window.device.version) >= 5.0) {
         if ($(this).attr('readonly') === undefined) {
             $('.footer').show();
             $('.footer').css('position', 'fixed');
             $('.topbar').css('position', 'fixed');
         }
     }
 });

I am going to explain here a two ways to solve this issue,but they have a little shortcoming.

Way 1: Here in this way,shortcoming is Editing text is a bit slow for ‘position’, ‘absolute’. But let’s understand code written below:

$(document).on('focus', 'input,textArea', function() {
        $('div[data-role="header"]').css('position', 'absolute');
        $('div[data-role="footer"]').css('position', 'absolute');
        $(document).scrollTop(document.body.scrollHeight);
        $(document).trigger("refresh");
    })
    .on('blur', 'input,textArea', function() {
        $('div[data-role="header"]').css('position', 'fixed');
        $('div[data-role="footer"]').css('position', 'fixed');
    });

Lets understand the next code which is explained below:

Way 2: shortcoming is page margins top and bottom.

$(document).on('focus', 'input,textArea', function() {
        $('div[data-role="header"]').css('position', 'relative');
        $('div[data-role="footer"]').css('position', 'relative');
        $(document).scrollTop(document.body.scrollHeight);
        $(document).trigger("refresh");
    })
    .on('blur', 'input,textArea', function() {
        $('div[data-role="header"]').css('position', 'fixed');
        $('div[data-role="footer"]').css('position', 'fixed');
    });

$(document).on('focus', 'input, textarea', function() {
    $('div[data-role="header"]').css('position', 'absolute');
    $.mobile.silentScroll($('input:focus').offset().top - 100);
});

$(document).on('blur', 'input, textarea', function() {
    $('div[data-role="header"]').css('position', 'fixed');
});

That’s it. You can check in your device.

You may like to read:

Save Image/File into sd card in Android using PhoneGap
To use JSON Response of Webservice in Phonegap Android
To restrict screen orientation in Android

Hope this article helpful ot you.As always, thanks for reading. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How to add child product in VirtueMart

Posted on 6 years ago

Bhumi

How to detect browser in Joomla

Posted on 6 years ago

Bhumi

How to setup Facebook PageTab Popup

Posted on 6 years ago

Bhumi

How to Create a Simple Anti-Spam Captcha

Posted on 6 years ago

Bhumi

Hello world

Updated 1 month ago

Nick Carter

In depth Understanding of Laravel Core

Updated 3 months ago

Bhumi

ECMAScript 6 New Features – 2

Updated 1 year ago

Bhumi

The Reader’s Poll – June 2015

Posted on 4 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 5 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 6 years ago

Bhumi