How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

I understand that mobile safari has a lot of bugs around fixed elements, but for the most part I've managed to get my layout working correctly until I added a much needed text input to the fixed navigation at the bottom. Now when the user focuses on the text input element and the virtual keyboard appears, my navigation, which is otherwise always fixed at the bottom of the page, jumps up to a really strange spot in the middle of the page.

I'd add some of my code to this post, but I wouldn't be sure where to start. That navigation is fixed at the bottom and positioned to the left and bottom 0, and 100% width. From there, I don't know what's going on, I can only assume it's a mobile safari bug.

It also appears to lose it's position fixed and become relative, only while the text input element is focused on and the virtual keyboard is open.

Answer by Sujesh Arukil for How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

http://dansajin.com/2012/12/07/fix-position-fixed/ this is one of the solutions proposed. Seems worth a shot.

In short: set fixed elements to position:absolute when any input is focused and reset them when that element is blurred

.header {       position: fixed;   }   .footer {       position: fixed;   }   .fixfixed .header,   .fixfixed .footer {       position: absolute;   }   

and

if ('ontouchstart' in window) {      /* cache dom references */       var $body = $('body');         /* bind events */      $(document)      .on('focus', 'input', function() {          $body.addClass('fixfixed');      })      .on('blur', 'input', function() {          $body.removeClass('fixfixed');      });  }  

Answer by martinedwards for How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

I really like the solution above. I packaged it up into a little jQuery plugin so I could:

• Set which parent gets the class
• Set which elements this applies to (don't forget "textarea" and "select").
• Set what the parent class name is
• Allow it to be chained
• Allow it to be used multiple times

Code example:

$.fn.mobileFix = function (options) {      var $parent = $(this),      $fixedElements = $(options.fixedElements);        $(document)      .on('focus', options.inputElements, function(e) {          $parent.addClass(options.addClass);      })      .on('blur', options.inputElements, function(e) {          $parent.removeClass(options.addClass);            // Fix for some scenarios where you need to start scrolling          setTimeout(function() {              $(document).scrollTop($(document).scrollTop())          }, 1);      });        return this; // Allowing chaining  };    // Only on touch devices  if (Modernizr.touch) {      $("body").mobileFix({ // Pass parent to apply to          inputElements: "input,textarea,select", // Pass activation child elements          addClass: "fixfixed" // Pass class name      });  }  

Answer by wxy112233 for How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

Add javascript like this:

$(function() {    var $body;    if ('ontouchstart' in window) {      $body = $("body");      document.addEventListener('focusin', function() {        return $body.addClass("fixfixed");      });      return document.addEventListener('focusout', function() {        $body.removeClass("fixfixed");        return setTimeout(function() {          return $(window).scrollLeft(0);        }, 20);      });    }  });  

and add class like this:

.fixfixed header{       position: absolute;   }   

you can reference this article: http://dansajin.com/2012/12/07/fix-position-fixed/

Answer by Patrick Canfield for How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

I wasn't having any luck with the solution proposed by Dan Sajin. Perhaps the bug has changed since he wrote that blog post, but on iOS 7.1, the bug will always surface when the position is changed back to fixed after the input is blurred, even if you delay until the software keyboard is hidden completely. The solution I came to involves waiting for a touchstart event rather than the blur event since the fixed element always snaps back into proper position when the page is scrolled.

if (Modernizr.touch) {    var $el, focused;    $el = $('body');    focused = false;    $(document).on('focus', 'input, textarea, select', function() {      focused = true;      $el.addClass('u-fixedFix');    }).on('touchstart', 'input, textarea, select', function() {      // always execute this function after the `focus` handler:      setTimeout(function() {        if (focused) {          return $el.removeClass('u-fixedFix');        }      }, 1);    });  }  

HTH

Answer by revobtz for How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

The solutions on the top are some ways to go and fix the problem, but I think adding extra css class or using moderniz we are complicating things.

If you want a more simple solution, here is a non-modernizr non-extra-css but pure jquery solution and work on every device and browsers I use this fix on all my projects

if ('ontouchstart' in window) {      $(document).on('focus', 'textarea,input,select', function() {          $('.navbar.navbar-fixed-top').css('position', 'absolute');      }).on('blur', 'textarea,input,select', function() {          $('.navbar.navbar-fixed-top').css('position', '');      });  }  

Answer by Edie Johnny for How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

I use this jQuery script:

var focus = 0;  var yourInput = $(".yourInputClass");  yourInput.focusin(function(){      if(!focus) {          yourInput.blur();          $("html, body").scrollTop($(document).height());          focus = 1;      }      if(focus) {          yourInput.focus();          focus = 0;      }  });  

Works perfectly for me.

Answer by sylowgreen for How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

I had a similar problem, but I found a workaround by adding the following css class to the body element on input focus and then removing it again on unfocus:

.u-oh {      overflow: hidden;      height: 100%;      width: 100%;      position: fixed;  }  

Answer by brain_bacon for How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

The focusin and focusout events seem to be better suited to this problem than the focus and blur events since the former bubble up to the root element. See this answer on SO.

Personally I use AngularJS, so I implemented it like this:

$window.document.body.addEventListener('focusin', function(event) {      var element = event.target;      var tagName = element.tagName.toLowerCase();      if(!$rootScope.inputOverlay && (tagName === 'input' || tagName === 'textarea' || tagName === 'select')) {          $rootScope.$apply(function() {              $rootScope.inputOverlay = true;          });      }  });  $window.document.body.addEventListener('focusout', function() {      if($rootScope.inputOverlay) {          $rootScope.$apply(function() {              $rootScope.inputOverlay = false;          });      }  });  

Note: I am conditionally running this script if this is mobile Safari.

I put an ng-class attribute on my navbar:

using the following CSS:

.navbar-absolute {      position: absolute !important;  }  

You can read more about focusin here and focusout here.

Answer by Hesam for How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

Test this one. It works. I just test it.

         $(document).on('focus','input', function() {           setTimeout(function() {                      $('#footer1').css('position', 'absolute');                      $('#header1').css('position', 'absolute');           }, 0);           });           $(document).on('blur','input', function() {           setTimeout(function() {                                 $('#footer1').css('position', 'fixed');                                 $('#header1').css('position', 'fixed');           }, 800);           });  

Answer by Scott Semyan for How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

Taking from what sylowgreen did, the key is to fix the body on entering the input. Thus:

    $("#myInput").on("focus", function () {          $("body").css("position", "fixed");      });        $("#myInput").on("blur", function () {          $("body").css("position", "static");      });  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72