I have a Cordova Mobile application which uses iScroll plugin. To my surprise scroll doesn't work when I run the app in VoiceOver mode (three finger swipe up/down gesture). It just reads page 1 of 1 even if the content is existing for more than 2 pages.
Are there any role attributes to make page to scroll ? Please help.
I found that iScroll is using transform CSS property for scrolling.
I was able to resolve this issue.
May be you can also try the same.
Add below style to your parent div
-webkit-overflow-scrolling : touch
There is a phone gap plugin to listen for VoiceOver on/off https://github.com/phonegap/phonegap-mobile-accessibility
// Define a persistent callback method to handle the event
function onScreenReaderStatusChanged(info) {
if (info && typeof info.isScreenReaderRunning !== "undefined") {
if (info.isScreenReaderRunning) {
console.log("Screen reader: ON");
// Do something to improve the behavior of the application while a screen reader is active.
} else {
console.log("Screen reader: OFF");
}
}
}
// Register the callback method to handle the event
window.addEventListener(MobileAccessibilityNotifications.SCREEN_READER_STATUS_CHANGED, onScreenReaderStatusChanged, false);
On voiceover ON event you can destroy iScroll(or make useTransform property to false).
On voiceover OFF you can re-initiate the iScroll.
Let me know if it works.
Related
I'm trying to create a video player with controls for Android TV with Flutter
The basic video_player is working:
https://gist.github.com/andraskende/195e746716e5e4e978356abb09e66a37
Would like to enhance the controls:
video plays: show controls for first 5 seconds, then hide controls..
keypress on D-pad controls would appear (play/pause, forward rewind)
video paused: show controls, if back pressed once hide controls
I tried to add RawKeyboardListener to listen on a keypress on remote but then the controls are not selectable as the RawKeyboardListener takes over..
I guess when the controls are hidden I need RawKeyboardListener to bring up the controls and disable the RawKeyboardListener so the control buttons can be selected.
Any help is greatly appreciated.
Thanks,
Andras
I faced similar kind of issue where I fixed it with below code:
void _onKey(RawKeyEvent e) {
controls();
if (e.runtimeType.toString() == 'RawKeyDownEvent') {
switch (e.logicalKey.debugName) {
case 'Media Play Pause':
case 'Select':
setState(() {
if (_videoViewController.value.isPlaying) {
_videoViewController.pause();
} else {
_videoViewController.play();
}
});
break;
}
}`
Now if you wanted to have a fast forward or back just use the RawKeyboardListener with
specific case to handle it.
You can also use your D-PAD keys to perform such action.
can anyone please explain to me why the html SELECT control (or any other control like BUTTON) placed inside the div (that is registered with dojox/gesture/swipe events) cannot be opened? I'd welcome any workarounds pls
require({
}, [ 'dojo/dom', 'dojox/gesture/swipe', 'dojo/on', 'dojo/_base/event' ], function(dom, swipe, on, event) {
var div = dom.byId('testSwipe');
var isSwipe = false;
on(div, swipe.end, function(e) {
console.log("### SWIPE");
});
});
http://jsfiddle.net/zLyck884/
based on the documentation here, particularly the image : http://dojotoolkit.org/reference-guide/1.10/dojox/gesture.html
the image depicts how the dojo standardizes the events (also for desktops) and how the swipe is just another layer of the touch events. so I reckoned if the mouse events are replaced by touchstart or something, then it most likely blocks the default mouse action...
once I've stopped propagating the event (on the SELECT) further, then it worked ok.
query("select", this.domNode).on(touch.press, function(e){e.stopPropagation()});
where this.domNode is the element on which the swipe is enabled
on(this.domNode, swipe, lang.hitch(this, "_onSwipe"));
Unfortunately the swipe (touch) event overriding the default behaviour is not very handy, I just left dojox/gesture/swipe or touch for now. Seems like I'll rather implement my own touch event handling.
I am new to createJS toolkit (Flash CS6), My concept is I have a multiple buttons on the stage, each button click will have different animations in different frames.
my code is
'/* js
this.stop();
this.btnname.onPress = function()
{ this.parent.gotoAndPlay("cone"); }
*/'
it is perfectly working in all browsers and android mobile, but in iPhone it is not working,
I am trying to click on the button but canvas is highlighting in iphone,
when I change my code to the following code,
'/* js
this.stop();
this.onPress = function()
{ this.gotoAndPlay("cone"); }
*/'
It is working in iPhone, but I have multiple button clicks, here is my major problem.
Please help me find a solution to this issue.
Use addEventListener and listen for the "click" or "mousedown" event instead of assigning an onPress function. Like this:
/* js
this.stop();
this.btnname.addEventListener("click", function(){
this.parent.gotoAndPlay("cone");
});
*/
You need to create a shape, cache it and use it as the hitArea of your button. john has answered your question here: http://community.createjs.com/discussions/easeljs/5663-touch-on-ios-only-seems-to-work-with-bitmaps
I'm looking to use a LazyLoad technique for images and infinite scroll to load new content into my page. Both these things make use of the $(window).scrollTop() function that inside a Facebook canvas application doesn't work. I know i can use FB.Canvas.getPageInfo() to get the current scrollTop value however I'm encountering some performance issues with this, my code is as follows:
var oldScroll = 0; // current scroll
var newScroll = null; // new scroll (fetched from FB.Canvas)
// Override the normal function to work within fb
// !!This seems to kill the browser
$.fn.scrollTop = function() {
return FB.Canvas.getPageInfo().scrollTop;
};
// poll to check for any changes in scroll
setInterval(function() {
newScroll = FB.Canvas.getPageInfo().scrollTop;
if(oldScroll != newScroll) { // have we scrolled at all?
oldScroll = newScroll;
$(window).trigger($.Event('scroll')); // fire a scroll event to keep the rest of the application that is listening
}
}, 1000);
It appears to be fine if i don't override the scrollTop function but once I do my browser soon crashes.
Am i going about this completely wrong? Has someone already created a way to do this inside FB canvas? Cheers.
Im trying to solve the same problem and my solution is a additional element (div#xscroll, pos:abs, L) inside Facebook application + setInterval:
function wininfo() {
FB.Canvas.getPageInfo(
function(info) {
$('#xscroll').height(info.clientHeight+info.offsetTop+info.scrollTop).trigger('scroll');
}
);
};
now you can use this #xscroll for LazyLoad:
$(".img").lazyload({threshold:400,effect:"fadeIn",skip_invisible:true,container:'#xscroll'});
the problem is - huge CPU usage while FB.Canvas.getPageInfo, my interval is 2000 - and CPU usage is hight. After hour of script work - Safari slows down and memoryleaked...
Do you insist on having the scrollTop() function overridden? Originally it works for any element that you supply via the jQuery selector, while you seem to restrict it to only the facebook canvas. If any other javascript tries to use scrollTop(), it will fail miserably, won't it?
As for the solution, I've done infinite scrolling pretty much the same way - setInterval() to see if you've reached the bottom, then load content, then check scroll again, and so on. But I'm not triggering the original scroll event of the window at any time, as there is no need to - at least in my case.
I'm creating a webapp for the iPhone, based in HTML/CSS/JS. I'm using forms to receive input and pass data to the script, but a problem I'm encountering is that the keyboard won't disappear. The user will enter the information, hit submit, and since it's JavaScript the page doesn't reload. The keyboard remains in place, which is a nuisance and adds another step for users (having to close it).
Is there any way to force the keyboard in Safari to go away? Essentially, I have a feeling this question is equivalent to asking how I can force an input box to lose focus or to blur. Looking online, I find plenty of examples to detect the blur event, but none to force this event to occur.
Even more simply, you can call blur() on the currently focused element. $("#inputWithFocus").blur()
document.activeElement.blur();
You could try focus()ing on a non-text element, like the submit button.
Here's a small code snippet that always hides the keyboard whenever the focus is in an input or textarea field and the user taps outside of that element (the normal behaviour in desktop browsers).
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);
To detect when the return button is pressed use:
$('input').bind('keypress', function(e) {
if(e.which === 13) {
document.activeElement.blur();
}
});
I came across this issue and have spent some time until getting a satisfactory solution. My issue was slightly different from the original question as I wanted to dismiss the input event upon tapping outside input element area.
The purposed answers above work but I think they are not complete so here is my attempt in case you land this page looking for the same thing I was:
jQuery solution
We append a touchstart event listener to the whole document. When the screen is touched (doesn't matter if it's a tap, hold or scroll) it will trigger the handler and then we will check:
Does the touched area represent the input?
Is the input focused?
Given these two conditions we then fire a blur() event to remove focus from the input.
ps: I was a little bit lazy so just copied the line from above response, but you can use the jQuery selector for document in case you want to keep consistency of code
$(document).on('touchstart', function (e) {
if (!$(e.target).is('.my-input') && $('.my-input').is(':focus')) {
document.activeElement.blur();
}
});
Hammer.JS solution
Alternatively you can use Hammer.JS to handle your touch gestures. Let's say that you want to dismiss that on a tap event but the keyboard should be there if the users is just scrolling the page (or let's say, hold a text selection so he can copy that and paste into your input area)
In that situation the solution would be:
var hammer = new Hammer(document.body);
hammer.on('tap', function(e) {
if (!$(e.target).is('.search-input') && $('.search-input').is(':focus')) {
document.activeElement.blur();
}
});
Hope it helps!
$('input:focus').blur();
using the CSS attribute for focused element, this blurs any input that currently has focus, removing the keyboard.
Be sure to set, in CSS:
body {
cursor: pointer;
}
otherwise, your event handler calling document.activeElement.blur() will never get fired. For more info, see: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari
For anyone using Husky's code in AngularJs here is the rewrite:
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
angular.element($document[0]).on('touchstart', function(e) {
var activeElement = angular.element($document[0].activeElement)[0];
if(!isTextInput(e.target) && isTextInput(activeElement)) {
activeElement.blur();
}
});
In my case, I have an app:
AppComponent -> ComponentWithInput
and with the html:
<div class="app-container" (click)="onClick()">
<component-with-input></component-with-input>
</div>
And everything I do is adding (click)="onClick()"
You can leave the method empty as I did:
onClick() {
// EMPTY
}
This works for me.