Scrolling Phonegap iOS after input - javascript

When a user inputs text on my Phonegap application then returned upon completion, the entire page is scrolled further than it should be.
I am looking for a workaround to ensure that, once unfocused, the page returns to it's normal position.
See image that illustrates issue:
http://i.imgur.com/ehdXCQq.png
I am using iScroll 4.0 but it is not active on this page.
How can this problem be rectified?

The way forward was to set a Javascript event to take it back to the top of the page (or wherever) once focus has been lost on the input box. This uses the onblur method (I guess the opposite of onfocus?) and really simply states that once focus is lost, the page snaps back to the top.
Here's the working sample:
<input name="foo" id="foo" class="foo" onblur="window.scrollTo(0,0);" type="text" />
...with, of course, onblur="window.scrollTo(0,0);" being the operative code to return to the top of the page.

Related

Screen reader aria live assertive text is interrupted

$('#firstButton').focus();
<div id="liveRegion" aria-live="assertive">
This is a very long text
</div>
<button id="firstButton">First Button</button>
I am quite a newbie in accessibility issues. I basically have a button on which I want the focus to be on page load, but I also want a text to be picked up by the screenreaders in the liveRegion.
Right now, the text will be inteerrupted at some point during page load, and focus goes to the button.
Is there a way to have the screenreader not be interrupted?
Live regions can be confusing at first. The purpose of a live region is to announce changes to the page, not to announce page load information. After your page is loaded, if something changes on the page, such as the text within an element, or a new element is added, those changes can be announced if the aria-live attribute is used.
Most pages do not announce anything as they're loaded. A screen reader user will hear that the page is loading, and when it's done (usually there's an audible clue in the screen reader to let you know if the page is still loading or if it's done), the page title is typically announced and then whatever object has initial focus is read.
If you really need something read after the page loads, then it should probably have the initial focus. But be careful because putting focus on a non-interactive element such as a paragraph (<p>) or non-semantic elment (<div>) can be confusing. If you have to resort to that, make sure that element has tabindex="-1" so that the element will not be in normal keyboard focus order.
as such, there is no way to prevent the reading of your text by the button gaining focus.
The order of priority of what to say when heavily depends on screen reader / browser / OS combination, but usually, an element taking the focus has priority against any live region, including assertive.
What you can do is making the live region assertive text appear after the focus is moved to the button.
It has greater chances to be announced without interruption then.
IN any case, a live region present at page load isn't reliably read on all platforms.
To make sure that it will be effectively spoken, make it appear in the DOM after the page has completely finished to load.

How to prevent scroll when clicking on html canvas for the first time?

I have a large canvas with an interactive Processing sketch that i want to run as soon as the page is loaded. For some reason when the user clicks on the screen (on the canvas) for the first time, the page scrolls down a tiny bit. It is annoying because the user misses the click target when interacting with the sketch for the first time (wait until text "click on any species" appears).
http://417i.com/alcazar-vegetal/
I have tried focusing the canvas element on page load, also clicking via javascript, and even preventDefault, but nothing worked.
<!DOCTYPE html>
<html>
<head>
<meta name="Alcazar Vegetal" CONTENT="Alcazar Vegetal">
<title>Alcazar Vegetal</title>
<script src="processing-1.4.1.min.js"></script>
<script>
document.onload = function() {
var elem = document.getElementById("main_canvas");
elem.click();
elem.focus();
elem.preventDefault();
}
</script>
<style>
canvas{border:0px;margin:0px;padding:0px;outline:none;}
canvas:focus{outline:none;}
</style>
</head>
<body bgcolor="white" style="color:rgb(20,20,20)">
<canvas datasrc="alcazar_vegetal_viz_Pjs.pde" tabindex="1"></canvas>
<br>
<br>
</body>
</html>
This is the correct default behavior of the browser. It has nothing to do with P5.js or even JavaScript.
Think about it this way: let's say you have a page full of buttons, and those buttons go past the bottom of the viewport. Now a user (who can't use a mouse due to accessibility issues) interacts with the page using the tab key. Pressing the tab key changes the focus. The user keeps pressing the tab key until the focus goes to a button that's below the viewport. That causes the viewport to scroll so the button is in view.
That's what's happening here. Clicking on the canvas causes it to gain the focus, and gaining the focus causes the viewport to scroll so the canvas is fully visible.
To get around this, there are a few things you can do:
Detect the focus change and manually scroll the viewport back to the top.
Try to see if there's a way to disable the default scrolling functionality. The preventScroll parameter on this page seems promising. See also: Preventing page from scrolling on focus switching and disable scrolling on input focus in javascript,
Resize your canvas so it fills the viewport without being larger than it.
If I were you I'd go with the third option, but it's really up to you. If you still can't get it working, please post a MCVE in a new question post and we'll go from there. Good luck.

How to prevent the keyboard on Android browsers from changing the height of the page?

When clicking on an an input type=text, a keyboard comes up. Unfortunately, that changes the height of the web page, so that all the thinks that were "stickied" to the bottom of the page want to come up above the keyboard.
And, in my case, the element that's anchored to the bottom of the page (e.g. the Apply button below) ends up covering the next input element (e.g. Max textbox), so that when the user presses Next on the virtual keyboard, you can't see it at all because the button is still covering it.
My question is whether there is any way to prevent the keyboard from changing the height of the page?
P.S. On iOS it works like you would expect. Bringing up the keyboard doesn't change the dimensions of the page.
It is default behavior on Android devices. As I know, you can not prevent this.

Scroll to Focused Field Cordova

My Issue
I am currently in the process of writing an application for iOS using Cordova. I have a page with a form on it like so:
When the user taps on a field, the keyboard appears as expected on iOS. However, to prevent my app from moving off the screen, I have enabled the following setting:
// Prevent the keyboard from pushing up the webview
cordova.plugins.Keyboard.disableScroll(true);
Unfortunately, this prevents a few things that are causing me issues:
When a field is focused, the screen does not scroll to that field so sometimes, the field appears behind the keyboard.
Even if I did have a solution to the above, for the elements that are at the bottom of the screen, I will not be able to scroll down far enough to bring them into view above the keyboard.
My Question(s)
Solution 1
Is there any way, in Cordova, to auto scroll to the focused field without moving the whole app off the screen?
If it is possible, then how can I handle fields that are close to the bottom and cannot be scrolled up any further into view?
Obviously, the first point can be achieved using JavaScript/jQuery and some clever logic with the keyboard_height, position() and scrollTop(). But, this then creates the issue with the second point about the input fields behind the keyboard...
Solution 2
If I apply the following code, it will fix the issue highlighted above, but it will create another issue (explained below):
// Enable the auto scroll when the keyboard is shown
cordova.plugins.Keyboard.disableScroll(false);
Is there anyway to fix my header (the 'Edit Profile' bit), to the top of the screen to ensure that part is always visible?
Use https://www.npmjs.com/package/cordova-plugin-keyboard#keyboardshrinkview and its Keyboard.shrinkView method.

Creating layout for user leave-intent

I want to understand how to capture user intent i.e. when a user decides to leave the page and moves his/her mouse (as of now), show them an alternate version (without refresh).
An example
When you open this page, it will show you a couple of listings. Now, if you move your mouse to the address bar again. It hides the content and shows a separate part of the layout, basically a modal window with some messaging.
Is it handled via javascript - detect the cursor position and change the layout.
Any help would be welcome.
Using document mouseleave and mouseenter you can achieve this.
$(document).on('mouseleave',function(){
$('#test').removeClass('disnone');
}).on('mouseenter',function(){
$('#test').addClass('disnone');
});
FIDDLE DEMO

Categories