I have a project that simply displays a website. My code is:
function pencere() {
var self = Ti.UI.createView({ width:"100%", height:"100%" });
var webPencere = Ti.UI.createWebView({ left:1, right:1, top:1, bottom:1, url:"http://www.radyobasaksehir.com" });
self.add(webPencere);
return self;
}
My friend told me that the Android browser doesn't support the new CSS and HTML codes. I don't know the exact meaning of these but I think I need to revise my code but I couldn't figure that out.
The problem is related to chromium WebView being used Android 4.4.
There is developed a module for solving this. But, I found advice here in another topic
Just add borderRadius property with a minimum value. Sample code:
var webview = Ti.UI.createWebView({url: '..', borderRadius: 1});
Related
I'm trying to load a image from users phone, crop it and then display. Im using the webview plugin to do that. It works as intended on android but not on IOS.
I've tried this from another question, which resloves to file not found error
itemSrc = itemSrc.replace(/^file:\/\//, '');
I also looked at NormalizeURL but that does not seem to work with Ionic 4
Heres some code
this.imagePicker.getPictures(options)
.then((results: string[]) => {
results.forEach(res => {
this.crop.crop(res, {quality: 50})
.then(
data =>{
//this is extracting the URL
this.user.photos.push(this.webview.convertFileSrc(data));
},
After that, the UI should display the cropped image, which it does on android, but not on IOS.
I used safari dev tools to inspect and this is the error:
[Error] Failed to load resource: unsupported URL (unsafe:ionic://localhost/_app_file_/Users/radmac/Library/Developer/CoreSimulator/Devices/8E6A6BFA-66FA-4DB3-B556-BCE9E2EFE33A/data/Containers/Data/Application/C39D8D99-0F67-4D33-9195-EE2B4D4E4707/tmp/cdv_photo_024.jpg, line 0)
So, I found the solution for this. Before that, You can read this blog post which is really helpful if you want to understand more about ionic native and images.
https://ionicframework.com/blog/storing-photos-with-the-cordova-camera-and-file-plugins/
the solution was to just wrap the webview converted src with dom sanitizer, like so,
const resolvedImg = this.webview.convertFileSrc(data);
this.user.photos.push(<string>this.sanitizer.bypassSecurityTrustUrl(resolvedImg));
Make sure to import the dom sanitizer.
import {DomSanitizer} from "#angular/platform-browser";
...
constructor(private sanitizer: DomSanitizer){
...
}
My engironment is titanim 6.0.1.GA
It doesn't show the label on Android, while iOS show the label correctly.
var descriptionView = Ti.UI.createView({
height:'100%',width:'100%'
children:[Ti.UI.createLabel({
wordWrap :true,top:0,
color:'black',
text:"my label",
})]
});
It works well both on Android/iOS
var descriptionView = Ti.UI.createView({
height:'100%',width:'100%'
});
var label = Ti.UI.createLabel({
wordWrap :true,top:0,
color:'black',
text:"my label",
});
descriptionView.add(label)
I just wonder using children is bad behaivor for andorid?
However it sometimes very useful to simplify the code.
Is there anyone who uses children successfully for Android??
According to the titanium API 'Children' property is a read only property and it should not be used to set data. It's considered to be good luck as it's working with IOS but with Android we need to be specific with the code.
I would never suggest you to use this coding style to simplify the code, rather you could use the following to simplify and also memory effective way :
var descriptionView = Ti.UI.createView({
height:'100%',width:'100%'
});
descriptionView.add(Ti.UI.createLabel({
wordWrap :true,top:0,
color:'black',
text:"my label",
}));
Good luck,
Cheers
We are using google's places-autocomplete plugin on our website.
Of late we have received several complaints from our website visitors that this plugin isn't working in the Android version of Firefox. It works fine in the desktop version of Firefox however.
The problem can be simply observed by
Going to the places-autocomplete example here
Trying to enter a zip code in the "Enter a location" search input
You will observe the following 2 issues -
Google Auto-complete should show suggestions as you start typing the
zip code. But it doesn't until one types a space or , after the 5 digit zip code.
When the suggestions do show up (after typing space or ,), you can't choose the first suggestion. As you tap on it, the cursor moves back to the search input. You can however choose the second or third suggestion correctly.
Problem #2 is extremely annoying and frustrating for the user. We've had received several complaints about this.
I have confirmed this on Firefox version 36.0.2 on a Samsung S4 running Android 4.4.2.
How can this be resolved?
A work around for the second issue is to give the first autocomplete suggestion a top margin so the user can click it. Its not pretty but its functional.
css
.FirefoxAndroid .pac-container .pac-item:first-child {
margin-top: 20px;
}
js
<script>
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var is_android = navigator.userAgent.toLowerCase().indexOf('android') > -1;
if(is_firefox && is_android){
$('html').addClass('FirefoxAndroid');
}
</script>
I encountered the same issue today - the website I am working on is working perfectly on every web browser, the auto-complete as well except on FF mobile.
After trying 3-4 solutions the one that worked for me was to declare the var place at the top of my code.
I have something like that
var autocomplete;
var place;
var input = document.getElementById('location');
var options = {
componentRestrictions: {'country':'be'},
types: ['(regions)'] // (cities)
};
autocomplete = new google.maps.places.Autocomplete(input,options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
place = autocomplete.getPlace();
...
}
It was not working only on FF mobile because I wasn't declaring place at the top.
Maybe it will help someone in the future who knows
I have an image view and try to load remote image but it's can not show up.
I'm already search and try any suggestion on this forum but not work. I'm using SDK 3.2.2 on Mac OS X Maverick
My code is like here, and it's running good on iOS.
var iconImage = Ti.UI.createImageView({
width:40,
height:40,
left:5,
hires:true,
defaultImage:'/images/default.jpg',
image:urltoimage
});
sample image
this is a bug or something wrong with my code?any suggestion how to do remote image? Please help..
Use this
exports.LoadRemoteImage = function (obj,url) {
var xhr = Titanium.Network.createHTTPClient();
xhr.onload = function()
{
Ti.API.info('image data='+this.responseData);
obj.image=this.responseData;
};
// open the client
xhr.open('GET',url);
// send the data
xhr.send();
};
save on new file and named "ImageLoader.js"
I'm forget where I found that code, but I'm used that to handle any image from internet.
usage:
var ImageLoader = require('ImageLoader');
var imageView = Ti.UI.createImageView({
width:100,
height:100
})
ImageLoader.LoadRemoteImage(imageView,"http://i1314.photobucket.com/albums/t567/vademahendra/sightseeing_zpsd91fa049.png?t=1401680320");
I hope this can help you
I've run application with this code:
var urltoimage = 'http://i1314.photobucket.com/albums/t567/vademahendra/sightseeing_zpsd91fa049.png?t=1401680320';
var win = Ti.UI.createWindow();
var iconImage = Ti.UI.createImageView({
width: 40,
height: 40,
left: 5,
hires: true,
defaultImage: '/images/default.jpg',
image: urltoimage
});
win.add(iconImage);
win.open();
All worked properly, so the issue has to be on your device or simulator.
Check network connection and if airplane mode is enabled.
Does it show up on the device and just not on the emulator, or does it not show up at all?
Sometimes Android can be temperamental about remote images. CDNs usually work really well which is probably why daniula's code worked. Things to try are:
Change the pixel dimensions of your remote image to be smaller - test
Change the image file size of course using different compressions - test
Try different file types
Try using the same image url daniula used to see narrow it down to the image or the code: if the images shows up, then it's a problem with the serving of the images; if the image does not show, it may be an issue with your code.
I have an iOS/Android app built on cordova 2.6 and jqm 1.3. I need to open a link to an external website after the user clicks on a button. The code I am using is:
var ref = window.open('http://google.com','_self','location=yes');
ref.addEventListener('loadstart',function(event) {
console.log('load started');
});
ref.addEventListener('loadstop',function(event) {
console.log('load stopped');
});
ref.addEventListener('loaderror',function(event) {
console.log('load error = ' + JSON.stringify(event));
});
On iOS everything performs like I would expect. A new browser window opens with the google website loaded. But I cannot get anything to to load in Android. When I click on the button, nothing happens. I have put in console statements before and after the window.open, so I know the code is at least being executed.
My config.xml should be wide open for white listed sites:
<access origin=".*"/>;
I have tested on a Nexus 7 (android 4.2) and an android 2.2 emulator with the same results on both.
Does anyone know why window.open would not be firing correctly on android?
It looked like it was a problem with 2.6 loading plugins on Android. I upgraded to 2.7 and everything started to work.
Perhaps it's a solution to use the ChildBrowser plugin? This gives you a bit more control over the operation itself, while still preserving platform compatibility between iOS and Android.
In most cases, I use something like the following snippet to use the childbrowser to display an external page.
function openBrowser(url) {
// determine if the childbrowser plugin is available
var useChildBrowser = ('plugins' in window && window.plugins.childBrowser);
if (useChildBrowser) {
popup = window.plugins.childBrowser;
popup.showWebPage(url, { showLocationBar: false, showAddress: false });
} else {
popup = window.open(url, 'Share', "['width=600px', 'height=400px', 'resizable=0', 'fullscreen=yes']");
}
}
Note that this falls back to using window.open if the ChildBrowser plugin isn't available, so you won't break anything else with this. Could be worth a shot, perhaps?