Develop Reference

Sencha Touch android keypad hiding textarea

`
constructor: function() {
this.adjustHeight = Ext.Function.createBuffered(function(textarea) {
var textAreaEl = textarea.getComponent().input;
if (textAreaEl) {
textAreaEl.dom.style.height = 'auto';
var iNewHeight = textAreaEl.dom.scrollHeight;
if (iNewHeight > 0) {
textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
}
}
},200,this);
this.callParent(arguments);
}
I want the textarea focused with full content visible . But text area hiding with keypad

Try to use the onBeforeFocus event with scrolling:
scrollableView.scrollTo(textfield.element.getXY()[0],textfield.element.getXY()[1]);
And now you might want to do this to all textfields and textareafields, so that the user gets the same on all items.
Make sure, that the effect is either earlier than the keypad animation or delay it with about 175ms.
Ext.defer(function() {###your code goes here###}, 175, this);

Window resize bug on Android

On android triggered event window resize when you click on the input text or search. From there it take if resizing the window does not occur. I shoveled a lot of sources, how to fix I do not know.
Accordingly, I have written that when the browser is resized remove attributes eventually INPUT text disappears
https://youtu.be/2pAL221qgwc
https://youtu.be/W4M4c4UzMfc

$(function() {
$('nav>#main-menu').click(function() {
if($(this).hasClass('active')) {
$('.nav-menu ul ').slideUp();
$(this).removeClass('active');
}
else {
$(this).addClass('active');
$('.nav-menu ul' ).slideDown();
}
});
//search-toggle
$('.icon-b').click(function() {
//$( "#search-bl" ).slideToggle( "500");
$( "#search-bl" ).toggle( "slide",{ direction: "right" });
});
$(window).resize(function() {
$('.nav-menu ul').removeAttr('style');
$('#search-bl').removeAttr('style');
$('nav>#main-menu').removeClass('active');
});
});
I forgot to add.

start with different url in angularjs/phonegap

I am trying to understand the execution flow of angularjs/phonegap. I have 2 views: one is list view another is detail view. When the app is started the first time, the list view is shown first, user then selects which list item and show detail view which is recorded in localStorage. When the app is started next time, it should show the detail view directly without showing list view first. I use the following code and is working except when the app is started next time, the list view is shown first then quickly detail view is shown.
index.html:
<!-- Libs -->
<script type="text/javascript" src="phonegap.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<!-- App -->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/routers.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script type="text/javascript">
app.initialize();
</script>
index.js:
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
//handle backbutton to exit app when on homepage
document.addEventListener('backbutton', function(e){
if(window.location.hash == '#/users' || window.location.hash == '#' || window.location.hash == ''){
e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
onDeviceReady: function() {
//app.startPage(); //listview then detailview
angular.element(document).ready(function() {
//app.startPage(); //listview only
angular.module('userdemo', []);
//app.startPage(); //listview only
angular.bootstrap(document, ['userdemo']);
//app.startPage(); //listview only
});
app.startPage(); //listview then detailview. if remove "route otherwise clause", show blank listview then detail template view, backbutton working
},
// decide which page to start with
startPage: function() {
var userId = window.localStorage.getItem("userId");
if(!userId) window.location.hash = '/users';
else window.location.hash = '/users/' + userId;
}
};
routers.js:
angular.module('userdemo', ['userdemoFilters', 'userdemoServices']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/users',{
templateUrl: 'partials/user-grid.html',
controller: UserGridCtrl
}).
when('/users/:userId', {
templateUrl: 'partials/user-detail.html',
controller: UserDetailCtrl
}).
otherwise({redirectTo: //if removed, it shows black screen. backbutton working
'/users' //normal
//'/users/3' //show detail template only. backbutton not working
/*
function(routeParams, path, search) { //show detail template only. backbutton not working
var userId = window.localStorage.getItem("userId");
if(!userId) return '/users';
else return '/users/' + userId;
}*/
});
}])
.run(function($location) { //listview then detailview. if remove "otherwise" clause, blank screen, backbutton not working
//var userId = window.localStorage.getItem("userId");
//if(!userId) $location.hash('/users');
//else $location.hash('/users/' + userId);
});
UserDetailControl():
function UserDetailCtrl($rootScope, $scope, $routeParams, User) {
//handle the case when the app is started from the last saved userId
if(!$rootScope.users)
$scope.users = User.query(function() {
for (var i=0; i<$scope.users.length; i++) {
var user = $scope.users[i];
if(!user.id) user.id = i;
}
$rootScope.users = $scope.users;
});
else
$scope.users = $rootScope.users;
$scope.user = $rootScope.users[$routeParams.userId];
}
user-detail.html:
<div class="container-fluid">
<div class="row-fluid">
<div>
<b>Hello {{user.name}}</b><br>
</div>
</div>
</div>
I tried other possible alternatives:
remove "route otherwise clause". It shows blank listview then detail template view without scope applied(that is, literally, Hello {{user.name}}).
put app.startPage() in different places. around, inside, before, after document.ready or angular.bootstrap call. If around document.ready, it shows listview then detailview. If inside document.ready, it shows listview only.
write a custom "route otherwise redirectTo" function as shown in commented code. The result shows detail template only without scope applied. Also backbutton not working.
put initialization code inside module.run() as shown in commented code. It shows listview then detailview. If remove "otherwise" clause, blank screen, backbutton not working.
Not change others, just replace "route otherwise redirectTo" from "/users" to "/users/3", it shows detail template view only. backbutton not working.
None of them shows what I want. Can someone expert on Angular/Phonegap explain why these happen to better understand mechanism behind? What is the right solution for showing the detail view only for app's next start?

You may set the angular routs dynamically after loading phonegap and checking the local-storage, and before manually bootstraping angular..
otherwise({redirectTo:SOME_DYNAMIC_VALUE})

find keyboard is visible using jquery

Hi I have developed android phonegap app which is responsive.So when keyboard is visible i need to hide the footer in portrait and landscape mode and keyboard is not visible i need to show the footer in both the mode.I have tried the sample but its not working fine.If i open the app in portrait mode i cant able to find the footer in landscape mode when keyboard is not visible.
Here is my sample code:
var is_keyboard = false;
var is_landscape = false;
var initial_screen_size = window.innerHeight;
/* Android */
window.addEventListener("resize", function() {
is_keyboard = (window.innerHeight < initial_screen_size);
is_landscape = (screen.height < screen.width);
if (is_keyboard)
{
$("#footer1").hide();
}
else
{
$("#footer1").show();
}
}, false);
Please guide me.Thanks in Advance.

I think your best bet is to register for the show and hide keyboard events.
document.addEventListener("showkeyboard", function() {
$("#footer1").hide();
}, false);
document.addEventListener("hidekeyboard", function() {
$("#footer1").show();
}, false);

Android scroll bar in phonegap application?

I have a problem in android phonegap mobile website application, I applied scroll bar in my application, it is working good in PC but when i test in android device(mobile phone) scroll bar not enable.

personally I don't like iscroll.. had many problems using it so I discovered another solution... you can try this:
1.) set your DIV overflow to auto (or scroll) and set its height.. e.g.
<div id="wrapper" style="overflow:auto; height: 200px">...content...</div>
(I usually calculate height with javascript based on user's screen size.. I never set just a fixed height for all devices, this is just for the purpose of this "demo")
2.) add this javascript:
<script>
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
</script>
3.) call it on page load.. if you use jQuery:
$(document).ready(function() {
touchScroll("wrapper");
});
4.) if you want your scrollbars to be visible, just define following CSS rules:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #000;
}

Use this PhoneGap link
http://phonegap.pbworks.com/w/page/22863184/Hide%20the%20scrollbar%20in%20Android
this works in Android ,PhoneGap Applications for vertical and Horizontal Scroll

Code look Like this
public class MyActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
// Display vertical scrollbar and hide horizontal scrollBar
super.appView.setVerticalScrollBarEnabled(true);
super.appView.setHorizontalScrollBarEnabled(false);
// set scrollbar style
super.appView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
}
}