Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BUG IN CELLPHONE VIEW - FORM FIELDS #406

Open
franciscocasas opened this issue Sep 23, 2020 · 2 comments
Open

BUG IN CELLPHONE VIEW - FORM FIELDS #406

franciscocasas opened this issue Sep 23, 2020 · 2 comments

Comments

@franciscocasas
Copy link

franciscocasas commented Sep 23, 2020 •
edited
Loading

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
Copy link
Author

franciscocasas commented Sep 24, 2020 •
edited
Loading

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
Copy link

zhirniy commented May 19, 2021

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);

});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@franciscocasas @zhirniy