ScrollTOP with the field that is in focus

Navigation
1

I need to know the px size of the input field with focus at the top of the screen. To give a scrollTOP and the field in focus stay at the top of the screen.

The problem idea is as follows:

I'm working on mobile, and I'm using hybrid methods to develop, for this reason I have HTML5 , CSS3 , JQUERY among other web medium to develop. I need a generic solution so that any page that the person is browsing, it will take the field being typed and place it at the top of the page. The page in the sense of div , since each div is a view , the div being viewed has the display: block , but the rest are with display: none .

Using the specifications how to develop?

I started to do some things but I do not know to continue, it follows the code: 

window.addEventListener("resize", function() {
is_keyboard = (window.innerHeight < initial_screen_size);
is_landscape = (screen.height < screen.width);

updateViews();
}, false);

function updateViews() {
 // $("#ajusteTeclado").show();
  console.log("Entro aqui.");

    var elmnt = document.getElementById("login");
    elmnt.scrollTop = 500;

  $('#login').css('top','100px');

}

But as I used it all manual I need to get the field in focus.

    
asked by anonymous 14.10.2015 / 20:38

3 answers

1

I did a jsFiddle to test your problem . I do not know if I approach the problem you are having, but notice that measuring the% w / o% of an element that receives a focus will give error, because the event is fired before the element and scroll is in the right place. 

$(inputs).on('focus', function () {
    // repara que o focus dispara antes de fazer scroll 
    // e por isso o .scrollTop() pode ser errado! 
    var scroll = $(document).scrollTop();
    var input = this;
    setTimeout(function () {
        var scrollTardio = $(document).scrollTop();
        input.value = scrollTardio;
        console.log(scroll, scrollTardio); // valores diferentes!
    }, 10);
});

To scroll the element, given its height, you need to know the position of the element on the page and apply it to the scroll.

You can do this: 

$(inputs).on('focus', function () {
    var pos = $(this).offset();
    $(document).scrollTop(pos.top);
});

jsFiddle: link

    
14.10.2015 / 21:32
2

You can use jQuery to calculate the distance to the top, and after using scrollTop () to "take the input up ". It would look like this: 

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$( "input" ).focus(function() {
     var scrollTop     = $(window).scrollTop(),
        elementOffset = $(this).offset().top,
        distance      = (elementOffset - scrollTop);
    
  $('html, body').animate({
    scrollTop: $(this).offset().top
    }, distance);

  });
});//]]> 

</script>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>

In this example, you "grab" the jQuery focus () event, and calculate the distance of the highlighted element top of the page. When calculating this distance, just add it in scrollTop .

Follow this example in JSFiddle.

    
14.10.2015 / 21:28
1

Use jQuery for this. 

var el = $("#seuidentificador");

el.stop().animate({scrollTop:0}, '500', 'swing', function() { 

   console.log("Funcionou!!!");

});

Where, your youridentifier is your input.

If you do not have an identifier in the input, you only have to scan the elements and check which input is in focus.

    
14.10.2015 / 21:19
Get only one value from mysqli_fetch_assoc [closed] Post Post Wordpress