Develop Reference

google static map API url is not working in android

We are using static google map url in our ionic application which is working fine in IOS and not working in android. We appended the API key along with the URL and the URL is working in desktop browser and on iOS device. But it is not working on android device and shown blank (white) space.
I have the following code below
home.scss
testmap-image {
.mapcontainer {
position: relative;
img-loader {
width: 100%;
height: 100px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
ion-spinner {
height: 100px;
}
}
}
}
home.html
<div class="map-container">
<img-loader *ngIf="getUrl"
[src]="getUrl"
width="100%"
height="100px"
backgroundSize="cover"
backgroundPosition="center"
>
</img-loader>
</div>
In the above code, I am getting correct URL from getUrl() method.
The URL is :
https://maps.googleapis.com/maps/api/staticmap?center=,22, market street, mumbai,India&zoom=15&size=650x150&key=xxxxxxxxxxxxxxxxxxxx
Can you please let me know what could be the issue and why it is not working on android device?
Regards

Force youtube player to play in hd720 quality

I'm trying to play youtube video on my android app using Youtube Player API for Android but the problem is getting that the video quality of the video is not so good and there is not an option for force setting it to HD. So I tried to play video using Youtube Iframe API in android Webview but also there I'm facing the same problem with video quality.
Iframe Code :
<div class="videowrapper">
<iframe id=\"player\" width=\"720\" height=\"1280\" frameborder=\"0\" allow=\"encrypted-media\" src=\"https://www.youtube.com/embed/uFExenM7-dY?vq=hd720&enablejsapi=1&controls=0&iv_load_policy=3&modestbranding=0&rel=0&showinfo=0\"></iframe>\n"
</div>
.videowrapper {
float: none;
clear: both;
background:#eeeeee;
width: 100%;
}
.videowrapper iframe {
position: absolute;
width: 100%;
height: 100%;
}
How to make Youtube video to always play in HD quality?

Try attaching the vq=VIDEO_QUALITY to a youtube video url like
https://www.youtube.com/watch?v=nzliFQ-36kg&vq=720
To make this work using embed, follow the answer in this SO post.
<object width="1280" height="720"><param name="movie" value="//www.youtube.com/v/VIDEO_ID?hl=en_US&version=3&rel=0&vq=hd720"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
Testing on JSFiddle.
Don't forget to change VIDEO_ID to valid one when testing this.

Wavesurfer not working with ionic 2 android

I am trying to use the WaveSurfer javascript library in my Ionic 2 application.
I put the min.js below my www folder, then i import it in the index.html, and i declared the WaveSurfer variable in my .ts file.
initContainer() {
this.wavesurfer = WaveSurfer.create({
container: document.getElementById("container"),
waveColor: 'violet',
progressColor: 'purple'
});
this.wavesurfer.load(this.filePath + this.directoryName + "/" + this.audioFileName);
}
I initialize the container.
<div id="container"><wave style="display: block; position: relative; -webkit-user-select: none; height: 128px; width: 100%; overflow-x: auto; overflow-y: hidden;"><wave style="position: absolute; z-index: 2; left: 0px; top: 0px; bottom: 0px; overflow: hidden; width: 0px; display: none; box-sizing: border-box; border-right-style: solid; border-right-width: 1px; border-right-color: rgb(51, 51, 51);"><canvas style="position: absolute; left: 0px; top: 0px; bottom: 0px;"></canvas></wave><canvas style="position: absolute; z-index: 1; left: 0px; top: 0px; bottom: 0px;"></canvas></wave></div>
The container what has been created, so i think the import is working well.
play() {
this.wavesurfer.play();
}
After i push the play button, nothing happens, and the container is empty.
So the question is, can i use this library to visualize my audio on Android?
Or I just made a mistake somewhere?
(By the way, i tried my "own" audio files, which have been recorded with cordova-audio-input (i tried with cordova-media-plugin too), moreover default rightones. All of them show empty container, and they do not start.)
Any help would be appreciated.

I managed to solve my problem. Instead of using path, i create a base64 URL from the audio, with cordova file plugin (readAsDataURL()), and now it's working properly.
However the ready event does not work to me,
wavesurfer.on('ready', function () {
this.wavesurfer.play();
});
I just use it without the ready event, because i use it in a function, when the wavesurfer object has to be ready yet,
this.wavesurfer.play();
Now it is working, and it is epic (although it is a little bit slow, when i tried it with a one minute audio, so if i record an eight hour audio that will hurt, but that is already an another problem).
Edit:
I have to fix myself, because the on-ready event is working, only i have to bind the global variable to the event somehow.

Site footer is shaky on my mobile device

My website http://galnova.com/ has just been given a responsive upgrade. It is fine on browsers but when I look at it on my samsung device the page wont scroll and it shakes like crazy. I could not find any error in the footer class or the structure itself but I am curious to why this is happening.
<footer>
<div class="wrap">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png" /></a><br />This work by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.galnova.com" property="cc:attributionName" rel="cc:attributionURL">Keith Jeter</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License</a>.<!--<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://www.galnova.com" rel="dct:source">http://www.galnova.com</a>.-->
<p class="pull-right">Back to top</p>
<p>© 2015 Galaxy Supernova · <!--Privacy · Terms--></p>
</div>
</footer>

Try adding a defined height to your footer and report back with any effects.
Like so:
#media (max-width: 767px)
footer {
border-radius: 0!important;
border: none!important;
margin: 0!important;
height: 400px;
}
EDIT: Disregard the above; the problem is coming from the Pirobox overlay plugin. From a CSS perspective, a quick fix I noticed is to add overflow: hidden to the .piro_html class in the Pirobox stylesheet you reference, like so:
.piro_html {
position: absolute;
top: 0;
left: 0;
padding: 0;
width: 500px;
height: 500px;
margin: 0;
display: block;
padding: 0;
z-index: 150001;
padding: 0;
overflow: hidden;
}
Doing this causes you to lose the little "X" closure box, but since you can tap anywhere on the exposed body copy to escape the lightbox, that seems to be an acceptable and clean solution. You could also look into playing with the jQuery code.
Let me know if this works for you.

Flexbox isn't working in android web browser in Android 4.4.2

There's this website I've been working on for a client of mine and I've been working on the mobile layout. I decided to use a flexbox layout for the overall website, but for some odd reason, the stock android web browser for 4.4.2 isn't loading any of my elements that are using flexbox. Chrome for Android loads all my elements using flexbox just fine. I can't be too sure of what's happening, but any help that can be given would be great. All my code is on "hoopactivation.x10.mx" if you use the developer tools. If need be, I can also post my code on here if neccesarry (Which will probably happen anyhow. I'm just not near my laptop right now).

I don’t have any specific code to post, but I’ve had some interesting issues with flexbox myself. I found the blog post at http://thatemil.com/blog/2013/11/03/sticky-footers-flexbox-and-ie10/ very useful with explaining what you need to do to support other browsers. I was using the "modern" standard of flexbox until I found out it wasn’t working on Android, and found that blog post, so hopefully it’ll help. For the record, here is my CSS for the sticky footer:
/*
Sticky Footer - Flexbox
*/
.flexboxtweener, .flexboxtweener>body {
height: 100%; /* IE 10 */
}
.flexbox {
body {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex; /* Safari */
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
main {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
}
/*
Sticky Footer - w/ JS, no flexbox
*/
html.js.no-flexbox {
position: relative;
min-height: 100%;
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
}
/*
Sticky Footer - no JS, no flexbox
*/
// x-small
html.no-js {
main {
margin-bottom: 508px;
}
footer {
height: 508px;
}
}
#media (min-width: #screen-md-min) {
.no-js main {
margin-bottom: 210px;
}
.no-js footer {
height: 210px;
}
}
That’s in LESS and using some Bootstrap mixins, but hopefully that helps!

on some Android, flexbox is not working on inline elements, which seems like the flowing elements are gone.
To solve this, you have to force the flowing item to display:block. I've tried this and it works, you can see the detail here.
http://browser.colla.me/show/flexbox_make_element_collapse_height_0