I am developing a mobile web app, and I'm a bit confuse with something :
I have one div called UpperDiv with a z-index of 50 and under that div, there is an other one, called UnderDiv with z-index 0.
The problem is, when I "tap" on UpperDiv, it activates the :active pseudo-class on an element (where I clicked) of my UnderDiv. What should I do to disable this ?
----------------------------- EDITED --------------------------------
It finally works !!!!
I forgot to mention that I'm using a transition to open/close my UpperDiv.
So when opening I'm using :
$('#myDiv').css('-webkit-transform', 'translate3d(200px, 0px, 0px)').bind('webkitTransitionEnd', function(){
$('.underDiv').css('pointer-events', 'none');
});
And when I close :
$('#myDiv').css('-webkit-transform', 'translate3d(0px, 0px, 0px)').bind('webkitTransitionEnd', function(){
$('.underDiv').css('pointer-events', 'auto');
});
It works fine for me, if it can help someone else...
If this is on Android, it will be similar to this question
Is there a workaround for the Android browser bug with CSS-Position and clickable areas?
It is a bug in Android browser (and only there) that comes around when you change the DOM of the page along with some z-index stacking. The layers below will be target for mouse clicks even if something is stacked on top of it.
There are some workarounds on the above question which might work for you.
I read about using an empty flash movie with z-index 20 between the two divs.
Here's another question, which might have the answer
Android Webkit: Absolutely positioned elements don't respect z-index
on the issue page at google there is a workaround by some developer.
https://code.google.com/p/android/issues/detail?id=6721#c26
The problem is: If you change the CSS of an HTML element (e.g. display), the Android browser does not keep track of the UI changes the same way it would do it, if the DOM was changed. The change and the UI active areas are not synchronised correctly by only changing CSS. They would be by changing DOM.
So if you display the hight z-index layer with changes in the CSS, do change the DOM of that layer accordingly. This includes some gibberish in some data- attributes.
Comment https://code.google.com/p/android/issues/detail?id=6721#c55 may have a solutions, too
Related
Ionic Version: 1.x
Platform: all
I have an ionic app which uses an ionic popover. However, when the popover is active (open), I can no longer interact with things in the background, for example scroll down my list of items. I have tried looking for existing answers for this question, but did not see the question being asked.
The popover itself does not have to be bound to any active element on the page, since it currently has position:fixed and will always appear in the same position.
So basically the question is, is there a way to prevent the popover from preventing me interacting with everything in the background?
I found this codepen someone put up:
https://codepen.io/ionic/pen/GpCst
This may do the trick?
.popover-backdrop {
display:none;
}
I have found an answer, however, not sure if there is a better way to do this, perhaps an option that turns interacting with the background on and off, but for now the answer seems to be as follows:
Ensure the .popover-backdrop class is the same size and position (height and top margin in my case) as the actual fixed popover element. The default is height 100%.
Ensure that for the .popover-open class (applied to the body) you disable pointer-events: none;
Keep in mind that this will change the behaviour where if you click outside of the popover that it will close it by default. So in ionic, I will have to make sure that on the event where I leave the view that closes the popup if active.
I'm looking for a way to do an effect which is most likely a combination of things, the base of it would be something like this:
http://nikestadiums.com/
As you can see, when you scroll down, a div is actually sliding up. I am not sure there is such a plugin, and if there is, is it possible to resize and maybe re-position elements as you scroll down?
I've seen the post:
How to make div scroll down with a page once it reaches top of page?
and I know of sticky elements http://imakewebthings.github.com/jquery-waypoints/sticky-elements/
Is it even possible to do something like this? If yes, can you give me links/examples please?
And of course I need to make it super super smooth like the Nike one...ha
Here is a jsfiddle, but I can't get it to work right.
http://jsfiddle.net/3U2Gj/65/
Thanks.
I've modified your JSFiddle. I tested it in Chrome, Firefox, and IE7+.
http://jsfiddle.net/t0nyh0/aMXRq/3/
I've cleaned it up a bit and moved all your "states" into classes. On scroll, it simply uses JQuery to add and remove classes based on the scroll position.
Note that there is no animation, if you wish to animate it, you can use class transitions to animate. See more here: http://docs.jquery.com/UI/Effects/ClassTransitions.
In regards to entering full mode on keydown, you can again create an "expand" class and apply it upon keydown. You can then structure your CSS as follows:
.minState3.expand { }
and to show the button again
.minState3.expand button { display:block; }
Doing it this way allows you the flexibility to define how it looks based on the different states.
is it possible to have a visible html element but one which lacks presence on the page?
Let me give you an example of what I mean. Lets say I have a picture gallery and a light box. Usually lightboxes grey out the background so you can focus on the image. All i want is the greyed out overlay but i dont want it to be interactive. So if you were to click on it, you would click on the element behind it. So lets say I have a paragraph and in that paragraph i have a link and covering the paragraph is a overlay at 50% opacity, if i were to hover over the link, the link would react asif the overlay was not there.
I hope I have explained this well enough
AFAIK there is no easy way to do this and the only alternative would be to get the mouse coordinates and relay them somehow :/ is ther anyway what I want is possible?
Thanks
This can be done with pointer-events: none in certain browsers, but unfortunately not any version of IE.
It is not possible to have an overlay be transparent in the sense you want it to be. What you could try to do is the opposite; put the 'overlay' layer behind the rest of your page and then change the opacity of your entire page to 50%. Visually this will not make any difference, but it will remove the bubbly effect of JS clicking.
You can take an element out of the document flow with CSS but when that happens the element still receives click events as long as it is visible.
You could probably attach a click event to the overlay and then use the mouse coordinates with document.elementFromPoint or by manually looping through all the elements you want to be interactive and checking their coordinates on the page. The problem with this approach is that NoScript or a number of other products might detect this as ClickJacking, which it essentially is even though you are using it for a benign purpose.
I don't see why this isn't possible. opacity is about 5 css properties for cross-browser. I am not sure what exactly you mean by an overlay (same thing as a layer or z-index?) or are you talking about the possibility of using a css
for all p tags, then it's p:hover in css, but for a specific p tag, then you use an #id with :hover pseudo-class like this:
#myptag:hover {
background-color: #f3c9d5;
background-image:url(/images/mybgimg.jpg);
color:blue;
cursor:pointer;
}
for opacity, use a number in windows.index from 0 to 100:
//this function modifies the opacity of an element at a
//specific id like el1 or el2 using imageNumber as the index.
//you also specify an opacityInteger, which is an non-negative
//integer number in the range 0..100
//works on chrome, safari, ie, and firefox, all the major browsers.
function processimage(imageNumber, opacityInteger) {
var opacityFloat=opacityInteger/100.0;
//set image style, if we can - I hear it's readonly...
//filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0
document.getElementById("el"+imageNumber).style.filter="alpha(opacity="+opacityInteger+")";
document.getElementById("el"+imageNumber).style.mozOpacity=opacityFloat.toString();
document.getElementById("el"+imageNumber).style.opacity=opacityFloat.toString();
}
well, I just realized this is only marginally helpful. while it may get your toward your goal, you may still have to set a css z-index:1; on a layerto get an actual overlay. what I just gave you was an UNDERLAY or simply setting a given p tag's color or background image to another thing. I don't know if that's desirable to you or not. I have found overlays to be extremely difficult to manage, because the page layout engine treats all the layers as if they were the same layer tags-flow-wise and you have to use absolute positioning to force them to stick in a position you want them in. plus it messes up your main page using layers.
I posted previously (https://stackoverflow.com/questions/5737833/adjusting-horizontal-offset-for-an-image-gallery-in-mobile-safari) about using Javascript to find the x-offset of a viewport in Mobile Safari and then apply that as a px-based value to an element's inline CSS.
The post was a little long-winded and specific to that application, so I'll ask the real question here:
Is there a way to determine the viewport's x-offset in Mobile Safari, and then apply it to an element as an inline style?
This will be necessary, not just to place the image gallery overlay properly, but also to use named anchors throughout the site. It's my understanding that some JS trickery is required, as Mobile Safari doesn't support the usual methods of determining the x-offset of an object (or the viewport).
I'm not exactly sure if I understand your question but in javascript on mobile safari (asuming Iphone,Ipod,Ipad) using jquery I use the following lines to position div layers with z-index on top of each other. var left1 = jQuery("div#Layout_Border_div").offset().left;
var top1 = jQuery("div#Layout_Border_div").offset().top;
jQuery("div#LayoutPage_Backward").
css( { position: "absolute","left": (left1) + "px","top": (top1) + "px" } );
if you can give me some sample of code I can help more.
I managed to come up with an almost-solution: I added marginLeft: window.pageXOffset + "px", to all four references of the positioned wrapper divs in photoswipe.js.
So now, clicking a photo results in the photo viewer appearing inside the viewport, if it's been scrolled at all.
However, it's not ideal: I'm manually editing photoswipe.js source, first of all, and second of all, the gallery doesn't actually follow the user's scroll (so, when the user scrolls further to the right and clicks another image, the gallery appears where its first position was).
This is close to being fixed. How can I make the photo gallery follow the user's scroll dynamically, preferably without editing photoswipe.js source code?
Nasty little bug, this one.
As illustrated in Android ticket 6721, the Android browser seems to not respect z-index when absolutely positioned elements are laid over the top of <a> or <input> tags.
I am desperate for any sort of workaround. Has anybody conquered this one before?
Thanks in advance!
This problem is probably related to controls and their being special for the browser. While looking at your problem (in chromium) I found a related problem that when you press the tab key you will still be able to focus the input elements. You probably don't want this either (regardless of bleedthrough). The solution is surprisingly simple, you write your script to add the disabled attribute to all input/button/etc. elements that are overlayed. A disabled input will not be able to receive focus (by keyboard or otherwise), and clicking it should be impossible.
As this also disables silly keyboard circumnavigation it is not even a workaround, but a better design that also works with keyboard based navigation as expected.
To answer the question properly it's important to read the bug page. The problem is not about visibility of the input below, but its "clickability".
I can't test it, but these are possible workarounds:
0 Forget absolute positioning and just put two divs there and toggle visibility.
If this doesn't satisfy You...
1 try setting CSS position to absolute or relative for all a and input tags (Yup, this might force You to rewrite CSS to keep the layout, but isn't it worth it?)
2 make a <a>-tag container:
<div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
stuff here
</a></div>
This will need some more CSS to make the content look ok. But I expect something like this would solve the problem.
if 1 and 2 aren't helping try them both at once ;)
3 if it still happens You might want to check in details what happens when You click. Bind click and mousedown events to: link on top, container on top, input in the bottom and log them. If You get any of those events for the top link You can try and stop the bubbling at some moment or prevent the event on the input in the bottom.
This would be difficult, but I can help a bit. jQuery would be quite necessary.
Past fixes for this issue for IE include, but are probably not limited to the following list. These may help solve the problem in Android for you.
Put an iframe behind the absolute content. The iframe may obscure those elements for you
When you display your absolute content, hide all of the problem elements with JavaScript
Define the div's in the opposite order
Point number 1 is deemed the most reliable fix for IE, but may not be the nicest fix for you.
Add this to the CSS of every element that creates a problem:
-webkit-backface-visibility: hidden;
Simulate INPUT and A with DIVs.
[PSEUDO JQUERY CODE]
<div href="http://google.com" rel="a">Link</div>
<div class="field">
<div></div>
<input type="text" style="display: none" />
</div>
<script>
$('div[rel=a]).click(function() {
location.href = $(this).attr('href');
});
$('.field > div').click(function() {
$(this).hide();
$('.field > input').show();
});
$('.field > input').blur(function() {
$(this).hide();
$('.field > div').html($(this).val()).show();
});
</script>
IE has this same problem and the solution there is to make sure that every element that is involved in the positioning and even their containers have a z-index applied to them. Basically if you add a z-index to 1 element in the dom then IE gets understands its z position but doesn't understand its z position relative to what its next to and/or over.
container - z-index 0
child (on top container) - z-index 1
child 2 (above all) - z-index 999
Of course this is all based on stupid IE but its worth a try in android also.
Second Try :)
I am not familiar with the android browser at all, but I hope to maybe lead you down a path to solve your issue. Superfish is a javascript menu that has implemented a solution for z-index menu items when they drop down over select boxes in browsers. BgIframe is the js that they use to achieve this. Your answer may lie there, hopefully.
http://users.tpg.com.au/j_birch/plugins/superfish/#sample2
Put the under html in a div and set the display:none using javascript, so then the under content is gone, instead of being clickable and modal.
if you want to solve this problem, first of all you must add z-index to parent wrapper and clearly add z-index to your other elements, solution is that all elements will have a zero point for anderstanding z-index property correctly