BUG IN CELLPHONE VIEW - FORM FIELDS

franciscocasas commented 4 years ago

I am having this bug when I try to use the form text fields, in cellphone view we are not able to put your information due to it is going to the footer section. I am having a great headeche, please I need help. This is the website I am working on: https://creativityco.webflow.io/ )I have a class called "scroll" with 100vh in each section, and I using the following script:

<script>
if (window.matchMedia("(max-width: 476px)").matches) {
  /* The viewport is less than, or equal to, 476 pixels wide */
$(function() {
          $.scrollify({
            section : ".scroll",
          });
        });
} else {
  /* The viewport is greater than 476 pixels wide */
  console.log = 'Nothing'
}
</script>;

franciscocasas commented 4 years ago

I could fix the error, it was a bug made of a mix of scrollify and chrome. If someone finds this error, I solve it with the following code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js" integrity="sha512-0+SppYGxjfZ+5clBrJbcVIC/984AGub2ahawvvjG+DoaJEWnO7ReppZdthk7HmF/jaiI8gVtpfNM5HgXp16Mgw==" crossorigin="anonymous"></script>

 <script>
if (window.matchMedia("(max-width: 476px)").matches) {
  /* The viewport is less than, or equal to, 476 pixels wide */
$(function() {
          $.scrollify({
            section : ".scroll",
             standardScrollElements: ".form",
              scrollbars: true,
              setHeights: true,
              overflowScroll: true,
              updateHash: true,
              touchScroll: true,
          });
        });
} else {
  /* The viewport is greater than 476 pixels wide */
  console.log = 'Nada'
}
</script>
<script>
$(window).resize(function() {
    var $htmlOrBody = $('html, body'), // scrollTop works on <body> for some browsers, <html> for others
    scrollTopPadding = 8;
    // get input tag's offset top position
    var textareaTop = $(this).offset().top;
    // scroll to the textarea
    $htmlOrBody.scrollTop(textareaTop - scrollTopPadding);

    // OR  To add animation for smooth scrolling, use this. 
    //$htmlOrBody.animate({ scrollTop: textareaTop - scrollTopPadding }, 200);
});
</script>

zhirniy commented 3 years ago

Hello. I modificated your script. I added correct scroll for Android and only for active input. $(window).resize(function() { var $htmlOrBody = $('html, body'), // scrollTop works on for some browsers, for others scrollTopPadding = 8; var ua = navigator.userAgent.toLowerCase(); var isAndroid = ua.indexOf("android") > -1;

if(isAndroid){
    var emailEl = document.getElementById('email');
    var nameEl = document.getElementById('name');
    var mesEl = document.getElementById('message');
    var isFocused = (document.activeElement === emailEl) || (document.activeElement === mesEl) || (document.activeElement === nameEl);
    if(isFocused){
        var textareaTop = $(this).offset();
        $htmlOrBody.scrollTop(textareaTop - scrollTopPadding);
    }
}

// });
// get input tag's offset top position
// var textareaTop = $(this).offset().top;

// scroll to the textarea
// $htmlOrBody.scrollTop(textareaTop - scrollTopPadding);

// OR  To add animation for smooth scrolling, use this.
//$htmlOrBody.animate({ scrollTop: textareaTop - scrollTopPadding }, 200);

});

lukehaas / Scrollify

BUG IN CELLPHONE VIEW - FORM FIELDS #406