Ive used absolute positioning and CSS3 animations so clicking a trigger div makes another animate to cover it. This is working fine except on my fairly old Android phone, when you click the div infront you can sometimes select an option input which is in the div behind it. Ive tried adding a z-index but the issues is still there. Thanks
I was hoping for a CSS solution but ive done it with jQuery. Below are functions that I call to disable / un disable the input so it cant be selected.
function disableInputs () {
$('select').prop("disabled", true);
//alert('disabled');
}
function unDisableInputs () {
$('select').prop("disabled", false);
//alert('un disabled');
}
Related
I want to show navigation arrows in amp carousel in mobile but by default it does not show arrows. I have tried .amp-carousel-button { display:""; } and many others but nothing seems to work.
You could also simply add the attribute controls to the <amp-carousel> tag, along with the other options you pass in.
Try this
.amp-carousel-button {
opacity: 1;
visibility: visible;
}
The amp-carousel navigation arrows are not visible all the time in mobile by default but on the desktop, arrows are always displayed unless only a single child is present (according to the official docs) https://www.ampproject.org/docs/reference/components/amp-carousel#controls-(optional). This is a bug which needs to be fixed. Nothing can be done about it right now
I'm new to ionic. I began designing and developing my app but I got to a problem very soon. I don't really know how iPhone works because I am only testing this on my android device.
In my app, I am using the starter tabs template with a header at top, tabs at bottom. In one of my nav-views, I have a fixed control area, a scrollable area, and a fixed narrow input area. Below is a simple description of my app layout:
The problem that I'm facing here is when I click on the input area for input, the android keyboard pops up, pushing my scroll area, input area, and tabs upwards so that my screen would look like the following:
This basically "jams" my app appearance. So I came to thinking how others have dealt with it. From googling I found that I could hide things when keyboard is active by giving "hide-on-keyboard-open" class to my divs but this would just display: none while still holding its width, height, and place.
My question is are there any ways to literally "remove" my elements when my keyboard is open and "restore" them when my keyboard is closed? I tried
window.addEventListener('native.keyboardshow', function(){
document.body.classList.add('keyboard-open');
});
if(angular.element(document.querySelector("body")).hasClass("keyboard-open")) {
angular.element(document.querySelector("div.tab-nav.tabs").remove());
}
to add keyboard-open class to my body element and delete my tabs (even though I think I should monitor the tabs' class changes for the remove() action for it to work, but I only found jQuery ways to do it and I believe that's against the rules of angularJS?) but it didn't work.
So, what are the common ways to deal with this? As I kept thinking about it, I believe just removing and restoring certain elements or, whether it's possible or not, having keyboard come on top of the body element (just like z-index differences) wouldn't really be a pretty experience.
Thanks in advance for help.
Well it's never too late to post an answer. I managed to solve this problem based on some of this answers.
My solution:
Index.html
Added a ng-class listening to the showTabs attribute.
<body ng-app="app" ng-cloak ng-class="{ 'is-keyboard-open': showTabs }">
style.css
Added the following snippet so the tabs are hidden in case of keyboard open
.is-keyboard-open .tabs{
display:none;
}
.is-keyboard-open .has-tabs{
bottom:0;
}
app.js
On app.js, in the app.run method, I added the window.eventListener to the native.keyboardshow and hide in order to target in real time whenever the keyboard fires or hides.
Note that I used isAndroid() because I only had this problem in android.
$rootScope.showTabs = true;
if(ionic.Platform.isAndroid()){
window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);
function keyboardShowHandler(e){
$rootScope.showTabs = true;
}
function keyboardHideHandler(e){
$rootScope.showTabs = false;
}
}
Now everything is working as it should.
Notes: I tried previously:
- add more z-index # .tabs
- target the .tabs via css only
- position: fixed + bottom:0 # tabs
- a lot of answers on ionic forums and stack overflow
This was the best solution I found.
PS: Upvoted this one because I gained some white hairs trying to solve it properly.
I resolved this by "removing" and "restoring" my contents as yurinondual suggests in this link from ionic forum.
The suggestion was via css manipulation:
.keyboard-open .tabs{
display:none;
}
.keyboard-open .has-tabs{
bottom:0;
}
body.keyboard-open .has-footer{
bottom: 0;
}
I have a responsive web page that I want to reorder with jquery when going from one size to a smaller one. Everything is great except when I reorder an element (a DIV, for example) that has an input in it, like the search form:
$( '#searchfrm' ).insertAfter( '#bodyfrm' );
If I do this, when I click the input, the keyboard appears for a second and then disappears. This happens only on Android, on iPhone it works perfectly.
If I comment the code line, the input works perfectly on Android but I don't want the search form on top, but on the bottom of the page on the responsive design.
How do I prevent this from happening? Thanks!
I found that the problem was when reordering the elements. The reordering process was being done all the time so, in Android, when the keyboard appeared, jquery was reordering again, making the keyboard disappear. The solution was adding a variable in jquery to prevent the reordering process all the time and do it only once when going from 1024 to 700, for example.
I had a similar issue but found it was due to the $(window).on("resize",function(){...}); and not the .insertAfter script used to reposition the element.
If the element you reposition has an input field and that input field is in focus ~ the default behavior of Android opening the keyboard actually resizes the browser causing the function to loop. - REFERENCE: (dealing-androids-constant-browser-resizing). Changing the function to trigger on (load) as opposed to (resize) did the trick for me. $(window).on("load",function(){...});
I'm having an issue with a responsive menu I've been working on for some of my designed sites. The jQuery part of it is made to show or hide the menu depending on window width (and hide/show a bar to toggle it).
In mobile browsers, the toggled-open menu will close again when you scroll -- but only if the address bar has been hidden or shown by scrolling down or up. This happens in Android and iOS.
I've definitely narrowed it down to the address bar's appearance and disappearance, because:
it only happens on mobile browsers.
the address bar doesn't disappear while the page is still loading (at least in Opera), and thus the menu doesn't close when I scroll under that condition.
the menu won't close if I scroll after the address bar has been hidden.
However, I don't know what to do to fix it; the address bar affects the height of the window/page, not the width, so I'm unsure of why the menu toggles when you scroll up/down.
This method is the simplest way for me to make a responsive menu with how things are set up currently.
Here's the relevant part of the code I'm using:
var winwidth = $(window).width();
$(window).resize(function() {
var newwinwidth = $(window).width();
if(winwidth = newwinwidth && newwinwidth <= 768) {
// if smaller or equal
$('.menu ul').hide();
} else {
// if larger
$('.menu ul').show();
}
}).resize();
Here's a live example of a site on which this happens: http://jessicacantlope.com
I've already tried a couple debounce methods to see if that would solve the problem (it doesn't; it just delays the action) and also scoured this website. I've included app-capable meta elements and a few other iOS-specific things.
I also looked into solutions that hide the address bar entirely, but they only work under certain conditions and rely on modifying system UI/UX, which is something I don't want to do. I just want to keep it simple.
Any help would be appreciated. I'm more of a designer than a developer, and I love elegant solutions.
EDIT, 2020: Five+ years later, after having implemented a solution that seemed to work for a while and then failed again, I started tinkering and realized that, for the way I had designed my mobile menu and website, and with some of the things I had tried since then, I had been mistakenly targeting the wrong selectors in my code! And I hadn't thought deeply enough about how to apply the first suggestion. It's not elegantly written so I won't post my final code, but I finally got things in working shape. Thanks, everyone!
I had the same issue when working on a responsive site of my own. I was unable to discover the root cause of the issue but I developed a work-around. The anchor which I use to display the menu had a "open" toggle class added to it. I essentially used the "window.onscroll" call to check whether or not the menu should be shown each time the user scrolls the page, "showing" the menu again after each scroll.
window.onscroll = function (e) {
var sidebar = $('#sidebar')
var menu = $('#sidebar > ul');
if(sidebar.hasClass('open'))
{
menu.show();
}
}
Hope this helps!
I had faced the same problem. But I fixed the solution. The problem is, while scrolling the page some times it triggers the resize event of window. When it will check the width of the window it is less than 768px. So the menu will be hidden. There are two solutions for this. First one, you can remove window resize function. Second one, inside the window resize function you should check whether the navigation is opened or closed. According to that you can customize the hide and show process. Which means, if navigation is closed and window width is greater than 768px you can show navigation.
I was also facing the same issue and no matter what I do with resize() function matching height or width of dom the function was still triggering on mobile device so i tried using $(window).on("orientationchange",function() and the problem got fixed.
I found a solution for the problem here javascript resize event on scroll - mobile
var cachedWidth = $(window).width();
$(window).resize(function(){
var newWidth = $(window).width();
if(newWidth !== cachedWidth){
//PUT YOUR RESIZE HERE
cachedWidth = newWidth;
}
});
When you have some clickable content like <a>, <input> or <area> and before this you have an absolutely positioned element with a bigger z-index, there is the wrong behavior of 'click-through'.
I click on the area where the clickable element is behind the front element. In other browsers there is the right behavior that the click does not go through the front element. But only in Android Browser you can click through the front element and activate the element behind. This is a known bug and you cannot avoid it. It's even in newer versions (I test on 2.3.3 in the official Android emulator).
There are some workarounds described in some forums but none of them worked for me.
I tried to put an <iframe> or an <a> between front and back
I tried to change the DOM so maybe the browsers state is refreshed
I tried to have the back elements be positioned as well
None worked
I'm especially having problems with the image map's area elements.
Has anyone had the same issue and managed to work around it?
I'm specifically interested in solutions which are tested against image maps.
I am wondering about a few things here. First, what is the purpose of having an overlaid image and using the image maps? I see you're including jQuery - can you use the hover event with jQuery to change the orientation of the images and do the swap? What about attaching to the click event for the image map, and checking to see if the lightbox is open. If it is, then return false;.
Just trying to think out loud. Sometimes another take on it can be helpful.
This is a quick blindfolded reply, so let me know if I should expand/fix it further. The general idea being a CSS class for both the hover and focus events that disables pointer interaction.
yourElementClass:focus, yourElementClass:hover {
pointer-events: none;
}
Actually I've managed to avoid it by moving the objects below to let them be not visible.
But in cases similar to yours the only workaround that actually works is to manage all the clicks in jquery (especially the ones on the background) and to bind/unbind the clicks events on needs.
there are also some things that could help on some version/mobiles (but do not solve the problem)
the above item has background:rgba(0,0,0,0.1);
you should put a gif or png as background of the above element (as well as the background color as point 1)
using thouchstart instead of click as bind event sometimes helps.
the actual version of android/browser are not affected with this bug (or at least it never happen to me) but it could be nice to know the affected versions. If someone has a list.