Im thinking about way to detect a element index when this element is inside of some other element.
So red box is my div, black box is centered absolute in center of this div. 1,2,3 are the list element. How to detect on scroll when list element is inside of black div?
Related
I need to use position:fixed; for top div so the animation happens then I want to show other content and elements under it .
Right now the hello divs are over the container which I want them to be under the blue container .
This is the Codesandbox link
It looks the body is the blue container, so you can't put anything outside of that, but you could style another element as the blue container. z-index can be used to control what appears above/below other positioned elements.
I have a div container1 that contains different elements like other divs or svgs.
These elements can scroll up and down container1
But now there is an area of container1 where these elements should not be visible, while container1 itself is still normally visible. I have to mask them somehow with an invisible element!
In the following explanatory image you can see:
container1 : red area
elements within container1 : black
area where container1 is visible but the elements aren't : orange rectangle
It is important though, that the parts of the elements, for example of an svg, that aren't behind that area, are still visible!
Example
Is there some way to mask a specific area?
If the elements behind your "orange rectangle" are hidden it's because the "orange rectangle" have a background. The HTML elements (like span, div, p, etc) cannot hide elements behind them unless those elements have a background.
If the orange rectangle have a background, the elements behind it will be hidden, but you can bring the elements behind the rectangle to front with z-index property.
I've divs overlayed on google maps which have 2 views
1) normal view
2) enlarged view on hover
normal view is shown at:
(unable to attach image inline )
https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xfa1/t31.0-8/11411745_872499649497061_676791784342303480_o.jpg
When I hover on element1 it enlarges its view and I've set its z-index to high
but another element which is hidden behind it gets mouseOver event even when its hidden behind the hover element and having lower z-index.
It occurs on basis of rendering of elements i.e. occurs for some divs and not for others (order in which divs are rendered).
Hovering on first element shows enlarged view but when mouse curser reaches close to 2nd element hover of 1st goes out.
Please note as per the stacking order of the CSS
-first the context is printed
-then the element with position and negative z-index are printed
-then element without position are printed
-after that the element with 0 or auto z-index are printed
-the all element with postive z-index and position are printed
Now let's say an element is having negative z-index but its parent has positive z-index, then in that case the element will rendered above all those element which have z-index 0 or auto or does not have position or have z-index less that its parent
this is becase if any element has parent with position then its context changes from root to the parent and then it parent z-index defines its rendering stack
See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index and http://www.w3.org/TR/CSS21/zindex.html
This is an odd one.
Let's say I have some text in a container with -webkit-overflow-scrolling:touch applied to it, and a span element with a background color within the content but outside of the viewport.
If you then press a button to remove the span element and replace the contents with the text inside, and then scroll the container so that the span element that was once there is in the viewport, the background color is retained. The span element itself is gone, but the DOM is not visually updated.
jsFiddle (view it on iOS) - http://jsfiddle.net/charlescarver/rdZq4/4/
Now, there are two solutions that I have found that I do not like, but update the container visually:
Remove the -webkit-overflow-scrolling:touch
Add the following code to change an aspect of the CSS, then back:
This method uses .scroll():
$(".text").scroll(function () {
$(".text").css("color", "blue");
setTimeout(function () {
$(".text").css("color", "#000");
}, 1)
});
Problem with this, the residual background color is there until the scrolling stops, which still leaves the artifact.
I am having a small box (div) inside a another div A. I want to drag it from div A to div B. the problem is my div A is overflow:scroll and because of that the box goes behind div A and scrollbar appears. There is no overflow property on div B.
I have initialized box to be draggable and div B to be droppable using jquery ui libraries.
Screenshot : http://i53.tinypic.com/9ieko7.png
I want to get rid of box hiding beneath divA and instead should be droppable on divB.
Thanks a lot !!