Angular routing with href does not work on android browser - android

I'm getting puzzled by this..
I have this piece of code:
<a href=" #/products/{{product.id}}" ng-click="customFunction()">
Where product is an object with an 'id' element.
Where customFunction adds the product in a shopping cart
Both are combined because the route in the href element permits to access a new page where the added product is customizable.
The code and the routing is working fine cross browser except on mobile phone (android at least, both chrome and native browser). On android phone only the ng-click reacts on click. But i am still able to open the web page routed by href by pressing the link and opening in a new tab :oO
my routing looks like that (app.js):
when('/products/:productId', {
templateUrl: 'partials/store_composition.html',
controller: 'mainCtrl'
})
and in the main Ctrl is called the getProduct function:
if ($routeParams.productId != null) {
$scope.product = $scope.store.getProduct($routeParams.productId);
}
which access the store.js file here :
store.prototype.getProduct = function (id) {
for (var i = 0; i < this.products.length; i++) {
if (this.products[i].id== id)
return this.products[i];
}
return null;
}
And it works fine... Except on android!! but again the link exists if long pressed for new tab :s :s
Any idea?
Update:
I am noticing that the URL in the navbar of android/chrome never changes. Contrarly of whats happening in regular browsers (an URL such as app/index.html#/products/batavia400 is updated on top)
But except for the route i have linked in my post every other routing in my app are working (with no url update just the same... :/)
SOLVED:
I actually solved the problem by adding the
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
and its the user-scalable=nothat made the trick.
The screen was slightly, really slightly zoomed by default by android, and this was creating the conflict on user's touch on the div's link.
I guess if my web designing skills were better I wouldn't have had the problem ;)

I actually solved the problem by adding the
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
and its the user-scalable=nothat made the trick.
The screen was slightly, really slightly zoomed by default by android, and this was creating the conflict on user's touching the div's link.

Related

What can I do to make my webapp auto refresh? Pages won't load in sequence. IOS

I made an app using WP and apppresser. Finally got the sliders and everything working. BUT....
my popup windows work nicely using this code. but, when i hit the "done" button (on IOS. Works fine on android) it wont work again until I refresh the page (kinda a pain) by switching between my home panes.
Help? Everything has a different "btnNUMBERClick" name
<!--Pay Water Bill-->
<a href onclick="Btn777Click()"><img src="http://pwpllc.net/apppress3/wp-content/uploads/2014/02/maps105new.jpg" width="105"></a>
<script>
var myWindow;
function Btn777Click()
{
Btn777Click = window.open("http://maps-directions.org/15/?keyword=quest%20map%20directions&gclid=CM--_tSo97wCFe87MgodpgEAGA","myWindow","width=200,height=100");
}
</script>

Force Orientation on certain pages

I'm developing a PhoneGap + JSmobile + html5 app for iOS and Android. I'd like to force the landscape orientation for same pages. I'm trying to find a solution but I can't do it.
Is it possible at all?
I found a post where someone says to use a trick in CSS to rotate the #div:
#ID {
-webkit-transform:rotate(90deg); /* Safari and Chrome */
}
this trick rotates the page but it is rendered with with a border on the left and right side.
i found a solution:
$(document).on('pagebeforeshow', '#ID',function() {
setTimeout(function() {
$('head').append( '<meta name="viewport" content="width=device-height, height=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">' );
}, 200);
});
the timeout is to prevent strange change in the prev page ;)

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>

On an Android device, how do I prevent taps on an address from launching the Maps application?

I have an application showing a WebView which shows information that includes street addresses like "123 Main St., Citytown, NY". However, when any of these addresses are tapped, it highlights briefly and the usual browser behavior of launching the Google Maps app is triggered.
I would like to prevent that behavior from occurring because some of the addresses aren't meant to be selectable. Is there anything I can do?
Update:
A commenter asked me to paste an example HTML snippet that triggers the behavior.
<hgroup class="unit list_item_body">
<h2 class="thick truncated heading">
Foobar
</h2>
<h3 class="truncated subheading">
123 East Market St., Charlottesville, VA, 22902
</h3>
</hgroup>
Notice there's no link on the address. Nevertheless, tapping the address triggers the behavior of launching Maps. This occurs whether I'm accessing the site through the WebView or viewing the site itself.
I figured this out. This meta tag will preclude the browser controls from hijacking address strings:
<meta name="format-detection" content="address=no">
Take a look at WebViewClient.shouldOverrideUrlLoading
webView.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
boolean shouldHandle = true;
//Check if you want to override the loading of the URL and set shouldHandle accordingly
return shouldHandle ;
}
});

iFrame Changes window.innerHeight / window.innerWidth on Android + PhoneGap

I'm creating an App using PhoneGap for Android. One of the pages in the App contains an iFrame (with local content) that is larger than the rest of the pages (this is a single-page App).
The problem I've run into is that once the iFrame page is viewed, the window.innerHeight and window.innerWidth JavaScript objects change their values to match the iFrame's width/height which is causing the rest of the 'pages' to display incorrectly as they are not the same size.
This persists even after I remove the iFrame from the DOM.
Has anyone run into this or has an idea of a workaround?
I just was in the same situation and also I removed the iframe, the solution (that worked for me) is to put the next in your html head:
<meta name="viewport" content="width=device-width, initial-scale=1">
I always though that this part was unnecessary because the innerWidth and innerHeight don't complicate on the desktop, but it cost me 6 hours.
I would like to know if it worked for you, bye.
First, for sure there is a bug here !
I just had the same issue and resolved, here is how.
I changed all the iframes & images width to 100% or less for those wider than window.innerWidth.
Here is the corresponding HaxeJS code:
resizeNodeChildrenTag(_contentContainer,"iframe");
resizeNodeChildrenTag(_contentContainer,"img");
private function resizeNodeChildrenTag(node:HtmlDom, tagName:String):Void
{
var tagNodes:HtmlCollection<HtmlDom> = node.getElementsByTagName(tagName);
// for all nodes with the given tag name
for (i in 0...tagNodes.length)
{
if(tagNodes[i].clientWidth > Lib.window.innerWidth)
tagNodes[i].setAttribute("width", "96%");
tagNodes[i].setAttribute("height", "");
}
}
}

Categories

Resources