Create an Android-like Popover with Onsen Ui - android

I am currently creating an Android App with Phonegap + Onsen UI. Now, I have an Android-like more Button (three dots) in my menu, and when somebody clicks on it, I want to open this typical "More-Button Menu". There is an example for an android popover with onsen ui over here, but when you take a look at the components documentation, you can't read something about the android popover anymore.
My problem is, that when I take the popover code from the example, I cant open it with the code from the documentation:
ons.createPopover('more-popover.html').then(function(popover) {
$scope.popover = popover;
});
more-popover.html:
<div class="popover-mask"></div>
<div class="popover popover--up popover" style="top:10px;right:10px;">
<div class="popover__content popover__content--android">
<div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
</div>
</div>
But when I try to use it like from the documentation, the popover opens, but I did not found any possibility to get the android style working.
Is there a way to use the ons.createPopover Function with the above code from "more-popover.html" or any other way?

I solved the problem with using this inside the more-popover.html:
<ons-popover modifier="android more" cancelable>
<ons-list>
<ons-list-item ng-click="share()" modifier="tappable">Teilen</ons-list-item>
<ons-list-item ng-click="quit()" modifier="tappable">Beenden</ons-list-item>
</ons-list>
</ons-popover>
With setting the modifier to android, I've got the Android Style. I also added more as modifier, so that I can remove the arrows, if the popoverarrow is a sub-element of the "more"-popover:
app.css:
.popover--more .popover__right-arrow, .popover__bottom-arrow, .popover__left-arrow, .popover__top-arrow {
display: none;
}

Related

ionic keyboard focus on input box issue

I am using angular with ionic
I have used below code
<input type="number" name="foo" ng-model="field.field_value" class="form-number" ng-focus="keyboardFocus(this)" >
$scope.keyboardFocus=function(t){
var a= $(t).attr('class');
alert(a);
// $ionicScrollDelegate.scrollBottom();
// $ionicScrollDelegate.$getByHandle(t).scrollTop();
$("."+a).css('position','absolute');
$("."+a).css('top','0px');
}
But scroll is not working in current position on textbox. keyboard focus on textbox is not working but type any text foucus is working
Imho, no need to use $ionicScrollDelegate, change position, scroll manually or any other complicated stuff.
You just need the Ionic Keyboard Cordova plugin to be installed. See the explanation here.
To install it:
cordova plugin add com.ionic.keyboard
Nothing else to do. On focus, the page will move automatically.
Of course, it will work only on real devices, but in my experience, with this plugin, focused form elements are never hidden under the keyboard.
Best way will be to use $ionicScrollDelegate, for that you need to define delegate-handle value on element this way:
<input type="number" name="foo" ng-model="field.field_value" class="form-number" delegate-handle="myInput" ng-focus="keyboardFocus('myInput')" >
And then pass into keyboardFocus this way: ng-focus="keyboardFocus('myInput')" .
And function will become
$scope.keyboardFocus=function(handleValue){
$ionicScrollDelegate.$getByHandle(handleValue).scrollTop();
}

jQuery .on() not working with long dynamic content on Android and css()

I'm trying to bind interactions to dynamically loaded links:
HTML:
<div id="content">
My dynamic content will be here.
</div>
JS:
$(function(){
loadContent();
$('#content').css('height',400);
$('#content').on('click','a',function(){
alert();
});
});
This is working fine on desktop, and with a quite short content on Android.
But it will not work with longer content on Android (with no JS error on Eclipse). Yet, I have not identified any other differences but content length between working and not working pages. Therefore, I tried to artificially limit the length of the content, and then it is working fine.
Do you have any clues of what is happening ?
// EDIT
I updated the code as I had made some basic mistakes when typing this question. This version better reflects the core problem.
// EDIT
I finally managed to isolate what produced a conflict. It is due to a css update of the div after content being loaded. If I artificially remove the height style attribute using Weinre, then the links are clickable again!
I can't see how this is working on desktop at all because the on() call should be inside the DOM ready handler, and the event name should come before the filtering element, like this:
$(function(){
loadContent();
$('#content').on('click', 'a', function(e) {
alert('something');
});
});
First, fix your document ready function to wrap loadContent and on.
Second, If you load content after the page is loaded. you should bind event to the body like this
$(function(){
loadContent();
$('body').on('click', '#content a', function(){
alert('Hello world!');
});
});

phonegap android GO button to not submit form

I'm writing an app with Phonegap and I have a register form that is sent through ajax. It works fine when you hit the register button and execute the formcheck() function. However, when I hit the GO button from my android phone it submits the form instead of going through the formcheck() process. I tried:
<form id="RegForm" onsubmit="formcheck();return false;">
My form has no proper submit button but a button like this:
<input type="button" id="submitbtn" onclick="formcheck()"/>
I also tried to create a new OnSubmitForm() function that calls the formcheck() one but with no avail. Thank you for helping.
Found it!
1) Add this to the JS section:
$(document).ready(function() {
$("#YourFormName").submit(function() {
FormCheck();
return false;
});
});
function FormCheck() {
... validation process here ...
}
2) Make sure to include a Submit button in your form .. ( <input type="submit" )
Hope it'll help others so my 5 hour trying & testing time won't go wasted :)
Simply ensure your form tag is:
<form type='submit' onsubmit='return false;'></form>
This makes the submit action not do anything.
If you also need to hide the keyboard refer to How can I hide the Android keyboard using JavaScript?. A simple onsubmit='hideKeyboard(); return false;' will take care of this.

How to add dynamic jquery mobile Back button?

Since jquery mobile back button doesn't work well in different pages i have tried to add dynamic back button .Here's what i did
$("#page1").bind("pagecreate",function() {
if(page2 == 1){
$('<div data-role="button" id="back"><a data-icon="arrow-l" href="pag2.html">Back</a></div>').prependTo("div:jqmData(role='header')");
$("back").button();
}else{
$('<div data-role="button" id="back"><a data-icon="arrow-l" href="default.html">Back</a></div>').prependTo("div:jqmData(role='header')");
$("back").button();
}
}
when the button is prepend to the header its not having jquery mobile button styles it showsup like a plain link and moves all other header content down.Any help would be appericiated.
You need to enhance new markup with:
trigger("create")
Take a look at this jQuery mobile documentation.
Format of adding button to particular id is not,
$("back").button();
It should be,
$("#back").button();
If you are using class,
$(".back").button();
Kindly update your code. Hope this helps for your case.

Jquery Mobile on android link transition double blink

Im having a problem with Jquery Mobile after compiling it with Phonegap.
Here is a code snippet:
function game() {
$.mobile.changePage( "#game", { transition: "slideup"} );
}
Page 1:
<a onclick="game()" data-role="button">Start game</a>
Page2:
<div data-role="page" id="game" data-theme="a">
...
</div>
When i click the link "Start Game" it sure does change the page, but it double blinks. This looks very bad, and im trying to get rid of it. I like the transision slideup, but i just want the page to change without it looking like its double changing.
Anyone able to help? :)
Phonegap problem with blinking on android is due the poorly performing platforms like Android version 2.x. I advise you to turn them off on that android versions. There are some possible css fixes but I never managed to include them properly in my code.
Transitions can be turned off like this:
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.indexOf("Android") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
});
More about android phones problem can be found here: http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/
After much after a lot of testing and refinement, we’ve decided to use a 3D transform feature test to exclude poorly performing platforms like Android 2.x from the more complex slide, pop and and flip transitions so these will fall back to the default fade for all transitions to ensure a smooth experience.
Solution found, thanks to Gajotres.
I found that i had to include the transition disable script before jquery mobile, which in terms are a bit weird. It would be more logical to include it after, however it works now, and im happy :)
The solution:
<script src="js/disableTransition.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Categories

Resources