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.
Related
I'm trying to add dotted line between the current element and previous element when draggable hovers over element as in image. Note the RED dot (manually added in image) placeholder before the yellow color element. It is in middle of two.
I tried border-left and border-image and border-image-slice discussed here - https://stackoverflow.com/a/48399330/1881995, but these are giving feeling of left border, I need to place it slightly more over mid.
Could you please suggest CSS or other ways to achieve this?
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.
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?
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.
Hi all. I'd like to be able to highlight a div inside a container DIV that has overflow:hidden set (changing this is not an option). I'm using the CSS 'outline' and 'box-shadow' properties to do this. The issue is that when the DIV is the full size of the outer div, you can't see that it's selected as the outline is (unsurprisingly) clipped to the outer div. Also, if the inner div is against one of the edges the issue occurs.
The attached images shows the layout of the divs, red is the outer div, purple the 'outline' and black the DIV I want to highlight - in that example the purple highlight to the left is clipped.
So the question is, is there a way (JavaScript & jQuery are fine) of overlaying the black div with another div such that (a) the overlay div isn't clipped to the outer div, and (b) when the black div moves or is resized, the overlay moves/resizes with it?
EDIT: It looks like this simply isn't possible in HTML/CSS in the way I described.
Set theblack div to "positon:relative". Then put the outline into that div, and set it with "position:absolute". With top,left,with and height you can put it "around" the black div.
Edit:
Sry, the black div has to be position absolute, too. Working example see here:
http://jsfiddle.net/t94FV/
Maybe you can use margins with percentages.
The trick is in only parent cover div with relative position. No position:relative children of overflow:hidden div. Only parent!
<div class="trick-container" style="position:relative">
<div class="overflow-hidden" style="overflow:hidden">
<div class="no-relative-position-1">
<div class="no-relative-position-2">
<div class="no-relative-position-N">
<div class="position-absolute" style="position:absolute"></div>
</div>
</div>
</div>
</div>
</div>