I'm trying to restrict a field to input specific values like only floats, i'm using keypress event to handle it. It is working fine on desktop browser but not working on mobile devices. I'm using android
$(function() {
$(document.body).on('keypress', '.number-only', function (evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
var value = $(this).val();
var dotcontains = value.indexOf(".") != -1;
if (dotcontains){
if (charCode == 46) return false;
}
if (charCode == 46){
return true;
}
if(charCode > 31 && (charCode < 48 || charCode > 57)){
return false;
}
return true;
});
});
Related
I use the following codes to detect which UI element is the player pointing. It works well in Unity Editor, on one of my Android phone, but failed on a second Android phone.
public static T RaycastOnFirstPointed<T>(EventSystem eventSystem, GraphicRaycaster raycaster)
{
if (Application.platform == RuntimePlatform.Android || Application.platform == RuntimePlatform.IPhonePlayer)
{
if (Input.touches == null || Input.touches.Length == 0) return default;
}
var m_PointerEventData = new PointerEventData(eventSystem);
m_PointerEventData.position = Input.mousePosition;
var results = new List<RaycastResult>();
raycaster.Raycast(m_PointerEventData, results); // On the 2nd phone the results.length is 0
foreach (RaycastResult result in results)
{
var component = result.gameObject.GetComponent<T>();
if (component != null)
{
return component;
}
}
return default;
}
This method is called within a IEndDragHandler.OnEndDrag method. I tried to debug it on the 2nd Android phone, and saw the results.length is 0 after Raycast was executed.(it should be > 0 since I ended my drag on several overlapped UI elements, and it is > 0 on the 1st phone, not sure why the 2nd phone is different)
I don't have any clue where should I go from here to find the problem. Please show me some directions, thank you!
More info:
Phone 1: MI 8 Lite, OS: MIUI 10.3
Phone 2: MI 9, OS: MIUI 10.2.35
============Update===========
Reason found:
When IEndDragHandler.OnEndDrag is triggered, the Input.mousePosition has different value on the two devices. 1st Phone has the touch position from the last frame, while the 2nd phone seems clears that value, and it has a very large wrong value. I'm working on how to solve this in a proper way. Any suggestions are welcomed.
Problem solved. As I updated in the question, this problem is caused by wrong Input.mousePosition value on different devices. So I updated the RaycastOnFirstPointed method as follows:
public static T RaycastOnFirstPointed<T>(EventSystem eventSystem, GraphicRaycaster raycaster, PointerEventData eventData = null)
{
if (Application.platform == RuntimePlatform.Android || Application.platform == RuntimePlatform.IPhonePlayer)
{
if (Input.touches == null || Input.touches.Length == 0) return default;
}
var m_PointerEventData = new PointerEventData(eventSystem);
if (eventData == null)
{
m_PointerEventData.position = Input.mousePosition;
}
else
{
m_PointerEventData.position = eventData.position;
}
var results = new List<RaycastResult>();
raycaster.Raycast(m_PointerEventData, results);
foreach (RaycastResult result in results)
{
var component = result.gameObject.GetComponent<T>();
if (component != null)
{
return component;
}
}
return default;
}
When call this method within OnEndDrag, pass in the PointerEventData that unity provides and use its position.
I am using jQuery's scrollTop() for a fixed menu:
function fixed_menu(){
if( $('window').width() < 770 )
{
var menu = $('.col-left.sidebar');
var offset = menu.offset();
var trigger = offset.top;
$(document).scroll(function(e){
if($('body').scrollTop() >= trigger){
menu.addClass('fixed');
} else if ($('body').scrollTop() < trigger){
menu.removeClass('fixed');
}
});
}
}
fixed_menu();
When I am testing on my own phone (android device, Moto G 2nd gen), the if statement still works while scrolling.
When I am testing on an iPad mini, the if statement only initiates when the hover is done.
How can I make this function work on certain iOS devices, while the hover is still ongoing?
The scrollTop() function is problematic in different browser. You can try with $('html, body').scrollTop() and $(window).scroll()
function fixed_menu(){
if( $('window').width() < 770 ){
var menu = $('.col-left.sidebar');
var offset = menu.offset();
var trigger = offset.top;
$(window).scroll(function(e){
if($('html, body').scrollTop() >= trigger){
menu.addClass('fixed');
} else if ($('html, body').scrollTop() < trigger){
menu.removeClass('fixed');
}
});
}
}
fixed_menu();
My issue is very clear and I will go direct to the point.
I have registration form and the user is not allowed to type some characters as (Arabic letter and special characters), So I used JQuery to do that and it worked fine in windows browsers and in iOS browsers but I faced a problem in Android browsers, Here is my code :
$("#NonArabic").keypress(function(event) {
var ew = event.keyCode || event.which;
if (1 <= ew && ew <= 126 && ew != 38)
return true;
return false;
});
$("[name='NationalID']").keypress(function(event) {
var ew = event.which;
if (48 <= ew && ew <= 57 || ew <= 32)
return true;
return false;
});
$("[name='FullName']").keypress(function(event) {
var ew = event.which;
if (47 >= ew || ew >= 58)
return true;
return false;
});
"NoneArabic" is the ID of the form and the others are input fields, the wired thing is that the "NationalID" input field only accepts numbers as you can see the validation and it works fine in all environments (including android browsers), but the "FullName" input field supposed to accept letters only, Although I'm using the same validation way but it's not working in android browsers.
Note: I'm using JSP and Jquery.
So does anyone ever dealt with something like that or know where I went wrong !!
I hope that it's clear and thanks in advance.
How to pull to refresh?
In Titanium appcelerator I need to show a list of content in tableview. If I pull the view it needs to update. In iPhone I complete but in Android it won't work. Please any one help to solve this problem in Android.
My Android code:-
tableView.addEventListener('scroll',function(e)
{
var offset = e.contentOffset.y;
if (offset < -65.0 && !pulling && !reloading)
{
var t = Ti.UI.create2DMatrix();
t = t.rotate(-180);
pulling = true;
arrow.animate({transform:t,duration:180});
statusLabel.text = "Release to refresh...";
}
else if((offset > -65.0 && offset < 0 ) && pulling && !reloading)
{
pulling = false;
var t = Ti.UI.create2DMatrix();
arrow.animate({transform:t,duration:180});
statusLabel.text = "Pull down to refresh...";
}
});
tableView.addEventListener('dragEnd', function(e)
{
if(pulling && !reloading)
{
reloading = true;
pulling = false;
arrow.hide();
actInd.show();
statusLabel.text = "Reloading...";
tableView.setContentInsets({top:60},{animated:true});
tableView.scrollToTop(-60,true);
arrow.transform=Ti.UI.create2DMatrix();
beginReloading();
}
});
Titanium now supports pull to refresh for BOTH Android (> v6.2.0) and iOS (>3.2.0) with a Titanium.UI.TableView, Titanium.UI.ListView or Titanium.UI.ScrollView object.
See the docs:
https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListView
https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.RefreshControl
Sample code taken from the docs:
var win = Ti.UI.createWindow({
fullscreen:true
});
var counter = 0;
function genData() {
var data = [];
for (var i=1; i<=3; i++) {
data.push({properties:{title:'ROW '+(counter+i)}})
}
counter += 3;
return data;
}
var section = Ti.UI.createListSection();
section.setItems(genData());
var control = Ti.UI.createRefreshControl({
tintColor:'red'
})
var listView = Ti.UI.createListView({
sections:[section],
refreshControl:control
});
control.addEventListener('refreshstart',function(e){
Ti.API.info('refreshstart');
setTimeout(function(){
Ti.API.debug('Timeout');
section.appendItems(genData());
control.endRefreshing();
}, 2000);
})
win.add(listView);
win.open();
Is this just the IOS code form the Kitchen Sink example?
There are a couple of attempts at getting this working on Android, though I haven't confirmed that any of them work as expected. From what I understand, the problem is that you can't get the offset the same way in Android as in IOS.
A quick Google search turned up this link, which was referenced from the official Appcelerator forums.
https://gist.github.com/903895
var style1 = document.createElement("link");
style1.id = "rel";
style1.rel = "stylesheet";
style1.href = "http://www.mysite.com/css.css";
style1.onload = function(){document.body.innerHTML+="fffffff";};
document.getElementsByTagName("head")[0].appendChild(style1);
This code works in Chrome/Firefox, and yet stock browsers on my Froyo (2.3) and Jellybean (4.1) Android devices will print nothing. What's the problem? I'd like if I could execute some js onload of a link. Anything else would in my case amount to a hack. :/
The problem isn't innerHTML. Try it with alerts if you want (at your own peril).
Another answer mentions checking for this functionality by doing
var huh = 'onload' in document.createElement('link');
..but this is true in both stock browsers! wtf guys?
Android browser doesn't support "onload" / "onreadystatechange" events for element: http://pieisgood.org/test/script-link-events/
But it returns:
"onload" in link === true
So, my solution is to detect Android browser from userAgent and then wait for some special css rule in your stylesheet (e.g., reset for "body" margins).
If it's not Android browser and it supports "onload" event- we will use it:
var userAgent = navigator.userAgent,
iChromeBrowser = /CriOS|Chrome/.test(userAgent),
isAndroidBrowser = /Mozilla\/5.0/.test(userAgent) && /Android/.test(userAgent) && /AppleWebKit/.test(userAgent) && !iChromeBrowser;
addCssLink('PATH/NAME.css', function(){
console.log('css is loaded');
});
function addCssLink(href, onload) {
var css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", href);
document.head.appendChild(css);
if (onload) {
if (isAndroidBrowser || !("onload" in css)) {
waitForCss({
success: onload
});
} else {
css.onload = onload;
}
}
}
// We will check for css reset for "body" element- if success-> than css is loaded
function waitForCss(params) {
var maxWaitTime = 1000,
stepTime = 50,
alreadyWaitedTime = 0;
function nextStep() {
var startTime = +new Date(),
endTime;
setTimeout(function () {
endTime = +new Date();
alreadyWaitedTime += (endTime - startTime);
if (alreadyWaitedTime >= maxWaitTime) {
params.fail && params.fail();
} else {
// check for style- if no- revoke timer
if (window.getComputedStyle(document.body).marginTop === '0px') {
params.success();
} else {
nextStep();
}
}
}, stepTime);
}
nextStep();
}
Demo: http://codepen.io/malyw/pen/AuCtH