Jump to content

[SOLVED] Stop iOS devices from scrolling page when focusing


DarkxPunk
 Share

Recommended Posts

Hey everyone, So anyone who programs for iOS or has an iOS device will notice when a form field gets focused and the keyboard loads up it centers that field, sometimes causing unwanted visuals. How can we counteract that? There is one catch, no JQUERY!. I want to completely understand JS before I go to jQuery so please oblige. Thanks! **************Look at the bottom for the results**************

Edited by DarkxPunk
Link to comment
Share on other sites

I don't believe there is any code. He's asking what kind of code he needs and I actually don't see a starting point in this case.The question here involves overriding a browser feature. Since I don't have the browser to test, I can know if this feature can be overridden or not. All that can be done is experimenting.

Link to comment
Share on other sites

Please post your code.
No code.
I don't believe there is any code. He's asking what kind of code he needs and I actually don't see a starting point in this case.The question here involves overriding a browser feature. Since I don't have the browser to test, I can know if this feature can be overridden or not. All that can be done is experimenting.
Exactly... One thing about Apple is they follow standards when it comes to web development, so I am assuming what is happening with the browser is as soon as a field is placed into focus it uses code to call up the keyboard than JS/jQuery to center the page in the available space. I have researched this a bit but everyone wants to use jQuery. What needs to happen is after x amount of seconds the page scrolls to x0 y0. So JS should be able to do this, but how to detect the action and execute the delay. Any help is appriciated. Thanks in advance! :) Edited by DarkxPunk
Link to comment
Share on other sites

Well i suggest you lookup onfocus event, setTimeout(), or setInterval(), and scrollBy() they should be good place to start.
I have been using a bunch of those from the net can't get it to work. I will keep playing, but if anyone can find one that works give me a shout :D
Link to comment
Share on other sites

Okay I am almost there, next problem now is, HOW TO SAVE THE X/Y position. Basically I got it to work so it scrolls to the top after the element is put into focus, but now I need to save the current X/Y position prior to focusing so it can realign to its original position. Thanks for the info!

Link to comment
Share on other sites

Very funny. I would like to mention the reason people come to forums is they have either already searched or they are looking for a answer without searching, just being condescending is not polite. Now I did end up finding it and I did end up solving it.
function rePos(sfield){var yPos = window.pageYOffset || document.documentElement.scollTop;setTimeout(function() {window.scrollTo(0, yPos);},0);}

You call it on focus. Winning! Now problems arise, in landscape mode the page scrolls up right after page load and it hides under the URL bar for a unnecessary amount of time. Now I found a way to counteract it last night, but forgot I will keep searching. If anyone has ideas let me know. Thanks everyone.

Edited by DarkxPunk
Link to comment
Share on other sites

Very funny. I would like to mention the reason people come to forums is they have either already searched or they are looking for a answer without searching, just being condescending is not polite.
Are you making my point for me? Aside from that, you didn't show us your updated code or what you had tried, so there was no way of knowing what you knew or didn't know. Nothing like, "I tried this, but it does this", or "doing this only results in that", etc. It seemed like you were just looking for pointers, and not everyone has had to do what you're doing. So, providing references was a start for those of us who don't have the actual answer, but just wanted to help. If you've ever been to stackoverflow, you'll understand why they have recommended guidelines for how to ask questions, because the community there wants to encourage people trying and doing some initial research on their own, providing code samples, and reporting on what they been able to achieve (or not achieve) with what they've tried. While it's not as competitive here, it doesn't mean people should be less responsible for initiating their own interest in what they're trying to do. I helped you with honest answers and resources before. Don't get all bent out of shape over one link to some google help. If I really wanted to be condescending, I would have done this.http://lmgtfy.com/?q...ates+javascript Edited by thescientist
Link to comment
Share on other sites

Are you making my point for me? Aside from that, you didn't show us your updated code or what you had tried, so there was no way of knowing what you knew or didn't know. Nothing like, "I tried this, but it does this", or "doing this only results in that", etc. It seemed like you were just looking for pointers, and not everyone has had to do what you're doing. So, providing references was a start for those of us who don't have the actual answer, but just wanted to help. If you've ever been to stackoverflow, you'll understand why they have recommended guidelines for how to ask questions, because the community there wants to encourage people trying and doing some initial research on their own, providing code samples, and reporting on what they been able to achieve (or not achieve) with what they've tried. While it's not as competitive here, it doesn't mean people should be less responsible for initiating their own interest in what they're trying to do. I helped you with honest answers and resources before. Don't get all bent out of shape over one link to some google help. If I really wanted to be condescending, I would have done this.http://lmgtfy.com/?q...ates+javascript
My bending is in regards to the fact that some people don't want to search cause they (I hope) feel they have a community here that is willing the help, and I agree that people should try, and I have which is why then I come here because I rather get community help than search for endless hours on google. If people are not trying, and people are just leeching it's obvious, and I would have hoped it be obvious I am not one.Anyway thanks for all the help peoples. Edited by DarkxPunk
Link to comment
Share on other sites

So! I think I am satisfied with my results so here is the code: HTML

  <div id="bgHeader"></div>  <div id="header">   <?php echo $qsBtn; ?>   <form id="qSearch" action="index.php" method="get">	<label>Find:</label>	<input id="qsText" type="text" name="qsInput" value="a Therapist by Name, Skill, Location" title="Start typing than hit enter" onfocus="csText(this);rePos(this)" onblur="fsText(this)">	<input id="qsImage" type="image" name="qsSubmit" title="Find" alt="Find" src="images/btnSearch.gif">   </form>   <?php echo $naviPhone ?>   <ul id="nav">	<li class="<?php echo $nHome; ?> nav stretch"><a class="stretch" href="index.php">HOME</a></li>	<li class="<?php echo $nAbout; ?> nav stretch"><a class="stretch" href="about.php">ABOUT ORMT</a></li>	<li class="<?php echo $nRMTs; ?> nav stretch"><a class="stretch" href="rmts.php">OUR RMTs</a></li>	<li class="<?php echo $nInvolved; ?> nav stretch"><a class="stretch" href="involved.php">GET INVOLVED</a></li>	<li class="<?php echo $nContact; ?> nav stretch"><a class="stretch" href="contact.php">CONTACT US</a></li>   </ul>  </div>

CSS

/* Header */#header,#bgHeader {padding: 10px 0 0 0;position: fixed;top: 0;left: 0;right: 0;}#bgHeader {background: url(../images/bgNav.png) repeat-x;width: 100%;height: 60px;}#wrap,#header {width: 980px;}

JS

function rePos(sfield){var yPos = window.pageYOffset || document.documentElement.scollTop;setTimeout(function() {window.scrollTo(0, yPos);},0);}

Thats the basics, its not complete obviously but you can get the hint. If you would like a little assistance/walkthrough let me know and I will make a sample for yall. Peace!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...