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.
Related
On Android 4.1, Opera Mini 33 doesn't support css flex layout. It does use the old 2009 flex standard (display: -webkit-box) except of box-lines: multiple;
I can not break a flex line, nothing is working:
box-lines: multiple;
-webkit-box-lines: multiple;
flex-wrap: wrap;
-webkit-flex-flow: row;
-webkit-flex-flow: wrap;
On other Android (7) it respects new flex syntax, with flex-wrap: wrap; Caniuse.com showes that Opera Mini supports flex, but it clearly doesn't.
Have someone faced this issue? Switching between data saving modes seems to be an option, the flex works ideally on mode "Extreme" but on all the other 3 modes it doesn't. I've reinstalled the Opera, even wiped out the system - no change.
How can I break the flex line in Opera Mini on Android 4.1?
This is my actuall code:
<div class="test">
<div></div>
<div></div>
<div></div>
</div>
.test {
display: -webkit-flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 300px;
margin: 100px auto;
width: 600px;
-webkit-flex-flow: row;
-webkit-flex-flow: wrap;
}
.test > div {
width: 100px;
flex-grow: 1;
background: pink;
height: 200px;
}
.test > div:nth-child(2) {
background: yellow;
}
.test > div:last-of-type {
background: blue;
width: 100%;
}
No one seems to know the answer so I share my solution.
Partial solution could be detecting by JS if browser supports flex-wrap and then add a class to the body and make separate styles for that.
This is the only way to do the detection, because Opera Mini in it's useragent includes "Opera Mini" only on "Extreme" mode data saving, any oher case Opera Mini showes as Opera Mobile (but actuall Opera Mobile works perfectly with the newest flex).
This simple code is enough to detect flex-wrap support:
var d = document.documentElement.style
if (!('flexWrap' in d) && !('WebkitFlexWrap' in d) && !('msFlexWrap' in d)){
document.getElementsByTagName('body')[0].className+=' not-full-flex-support'
}
It is taken from this answer: https://stackoverflow.com/a/27047981/2796533
I have a very basic WebActivity that serves up a page that has the styling of
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Next, edit add some HTML around your embed code.
HTML
<div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/xxxxxx" frameborder="0" allowfullscreen</iframe</div>
If I view this page with the browser on the device, the page loads and the video plays just fine.
However if I use a webview programmed into my app, and load the page,clicking on the like, I get a message on the youtube video window (after the loading spinner) of "An error occurred. Please try again later (Playback ID: xxxxxx) Learn More"
of which learn more does not display anything useful. Idea's on how to go about seeing what is going on? The Android Studio logcat is not displaying any issues?
so it turns out that there are a few more params needed to play embeded iframe videos from YouTube.
Had to add the following to the end of the url string
src="https://www.youtube.com/embed/xxxxxxxxx?version=3&enablejsapi=1"
I have create a demo for it. You may visit my github link
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.
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
In the Android default browser, I can't get :active or :hover to work at all. I know :hover and :active aren't recommended for use on mobile, but considering they work consistently everywhere except the default Android browser, I figured I'd try it. This code works fine on iOS and Windows Phone, but not on Android, and I can't figure out why.
CSS:
* {
font-family: Arial, sans-serif;
font-size: 14px;
}
#clickBox {
background: #CCC;
padding: 10px;
text-align: center;
width: 100px;
}
#hiddenBox {
background: #BBB;
height: 0;
overflow: hidden;
text-align: center;
transition: height 0.5s;
width: 120px;
}
#clickBox:active ~ #hiddenBox, #clickBox ~ #hiddenBox:active, #clickBox:hover ~ #hiddenBox, #clickBox ~ #hiddenBox:hover {
height: 50px;
}
HTML:
<section id="clickBox" aria-haspopup="true">
Click here!
</section>
<section id="hiddenBox">
This appears!
</section>
JS Fiddle: http://jsfiddle.net/gDRK2/1/
I figured this out. For some reason, Android was firing the :hover event only when the user rotated the phone. I have no idea why that would be, but it is.
So, this is how I fixed it:
if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
$(document).ready(function() {
$("nav").children("a").click(function(e) {
e.preventDefault();
$(this).next("ul").css("transform","rotate(90deg)");
$(this).next("ul").css("transform","rotate(0deg)");
});
});
};
Basically, I rotate the thing I want to appear on hover, then immediately rotate it back. It causes the :hover to work as expected. It makes literally no sense to me, but it works.
If anyone has any questions about implementing this, please let me know.