When a button is clicked i create a DIV and make it like a pop-up window, but i want the background around this box to be 'shadowed' and that it's not possible to click on the links and inputfields there.
How can you make this with javascript?
Directly inside the <body> create a <div> and give it an id. In your <style> tag, give it the following style attributes (you can add more if you want):
position: fixed;
z-index: 3;
width: 100%;
height: 100%;
background-color: rgba(0,0,0.5);
Raise its z-index as you see fit (make sure the pop-up has a higher z-index, though). You can also adjust the opacity of its color by changing the 4th value of the rgba() object, ranging from 1 (opaque) to 0 (transparent). If it doesn't occupy the entire page, make sure the <body> and <html> tags don't have style attributes giving them margins, padding, or borders.
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What is the point of CSS collapsing margins?
(1 answer)
How to disable margin-collapsing?
(12 answers)
Closed 3 years ago.
I've never read anything to suggest that the overflow property of an element would have the strange effect on element positioning that I'm seeing here:
https://codepen.io/kshetline/pen/ZEzLVxN
Toggle the toggle button in the example, and watch how somehow the background of a <div> mysteriously slides upward, covering previous content, while its contents stays in the same screen-relative place (meaning the content is moving lower relative to its parent's background).
The example is a very simplified version of something I'm trying to do with an Angular component that's meant to scale its <ng-content> — but the example is only CSS and HTML with a tiny touch of JavaScript, no Angular, since I'm trying to isolate the relevant variables.
The content of an HTML element can be scaled down using transform: scale( less-than-1 scaling factor ), but even though the content of the element is rendered smaller, by default the element's pixel dimensions remain the same, with the content (unless otherwise specified) shrinking toward the center of the element, and blank space left around that content that leaves the element at its original unscaled dimensions..
You need to compute negative margins that match the degree of scaling in order for the element itself to be considered smaller. I've done that, but I've found that unless the container for the scaled element has CSS overflow set to hidden, some weird positioning can occur, as if the extra blank space required that's supposed to be removed by the negative margins is still having some partial, hard-to-explain effect on the overall layout of other elements.
I'm seeing this behavior in Chrome, Firefox, Safari and Edge -- so I'm guessing it's "proper" CSS behavior, but it makes no sense to me, and I'm hoping someone can explain what's going on. I'd like to be able to keep overflow set to visible so that scaled content can still do things like show floating dropdown menus that don't get clipped at the boundaries of the element.
let hidden = true;
const inner = document.getElementById('inner')
function toggleOverflow() {
hidden = !hidden;
inner.style.overflow = hidden ? 'hidden' :
'visible'
}
html, body {
height: calc(100vh - 10em);
}
.page {
font: 32px Arial, Helvetica, sans-serif;
height: calc(100% - 1em);
}
.container {
background-color: #ACF;
height: 100%;
}
.outer-wrapper {
background-color: rgba(187, 255, 204, 0.5);
font-size: 2em;
margin: 0 1em;
position: relative;
}
.inner-wrapper {
overflow: hidden;
position: relative;
width: fit-content;
}
.ng-content {
margin: -18.75px 0;
transform: scale(0.5);
}
.container-text {
display: inline-block;
position: absolute;
bottom: 1em;
}
<div class="page">
<button onclick="toggleOverflow()">Toggle Overflow</button><br>
Content outside of the<br>
panel being scaled and its<br>
containing <div>, 32pt font<br>
<div class="container">
<!--Angular component start tag goes here -->
<div class="outer-wrapper">
<div id="inner" class="inner-wrapper">
<div class="ng-content">
50% scaled content goes here, 64pt font
</div>
</div>
</div>
<!-- Angular component end tag goes here -->
<span class="container-text">This is an absolutely positioned <span> in the same <div></span>
</div>
</div>
From CSS 2.2 spec
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
So adding overflow:hidden is stopping the margins from collapsing.
You have set a negative margin in your .ng-content. If overflow is set to hidden, it will hide the negative margin. Set the margin to a positive number and it will fix this jumping issue.
.ng-content { margin: 18.75px 0; }
If you are trying to change the height of the element up and down, try using max-height with overflow: hidden. When max height is set to 0, it will be hidden. When set to something like 500px, your content will show!
Follow-up...
I created a variant on my first code pen here:
https://codepen.io/kshetline/pen/WNeRmOo
In this case, I'm using transform-origin: top center when I scale, and putting all of the needed negative margin on at the bottom of the scaled element, rather than splitting it evenly between top and bottom. That eliminates the weird vertical position shifting.
overflow: hidden is still needed to hide the excess of background color from "leaking out" of its container, but in the (common) case where the background of the scaled element is transparent, there would be no visible effect from using overflow: visible instead, and no worries about clipped dropdown menus originating inside the scaled element.
Follow-up #2...
Here's the best solution, using padding: 0.05px to deal with the real issue that #Alochi helped me understand — stopping border collapse:
https://codepen.io/kshetline/pen/zYONgzV
This is my first question.
My code is here on codepen.
I've been tinkering with Bootstrap, CSS, and jQuery in this code in an attempt to place a full-width background image behind the last featurette(From Bootstrap demo) item on my page. I'm guessing the problem stems from the bootstrap container class, but I am hoping for a work around.
I've enclosed the featurette with a div tag, applied an ID of "background1" to it, then used CSS in my attempt to set position to absolute and left:0.
This gets me the position I want (except I'd also like the background image to be responsive as in Bootstrap img-responsive), but the childen? tags inherit the opacity and positioning.
I've tried z-index:-1 unsuccessfully. What also seems to be happening is that the low opacity has allowed the footer to creep up into my last featurette item as if opacity also messes with the z-index.
So my questions are:
How can I stretch a BG image across the back of the featurette or any other set of grouped items within DIV tags?
How can I make this BG image responsive with Bootstrap or apply the img-responsive class through CSS?
Happy New Year! Thanks for reading!
Don't wrap your content. Use <div id="background1"></div> right before the content, and this:
#background1 {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.3;
left: 0;
background-size: cover;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Kiyomizu-dera%2C_Kyoto%2C_November_2016_-01.jpg/800px-Kiyomizu-dera%2C_Kyoto%2C_November_2016_-01.jpg");
}
I have a div which has some stuff in it, and the user has the option of clicking an 'x' to say "This is not applicable to me", for example.
Rather than delete the div, I want to play a translucent div on top of it.
I started off with some complicated javascript to determine the size and location of my div in question, and create a new one on top of it. The script was giving a size and location which looked approximately right to my eye, but the overlap div was being put in the wrong spot.
Then I realised that there is (probably) a much simpler way to do this.
I put a div with class "blackout" inside the div I want to black out. The blackout css class has a visibility set to hidden, so javascript will set that to visible when needed.
The issue I'm having is that even with this method, I can't seem to get it to precisely fill the rectangle the parent div has.
I had
.blackout
{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: black;
opacity: 0.5;
filter: alpha(opacity = 50);
}
This filled up the whole screen rather than just the parent div.
What do I need to change to make it fill the parent div only?
This filled up the whole screen rather than just the parent div.
What do I need to change to make it fill the parent div only?
You need to add position: relative to the parent div.
That will set the parent div as the "containing block" for .blackout:
If the value of the position property is absolute, the containing
block is the nearest positioned ancestor—in other words, the nearest
ancestor whose position property has one of the values absolute,
fixed, or relative.
Read more here: http://reference.sitepoint.com/css/containingblock
Using "position:absolute" positions it in relation to the next "position:relative" div. If there isn't one set then it will use the body.
You need to make the parent div CSS contain "position:relative"
On the parent div's CSS:
overflow: hidden;
should work
Add position: relative to the parent div, overflow: hidden will only hide the outside of your parent's div
Change position: absolute; to position: relative;
Set the child <div> width and height to be 100% and remove useless markup.
http://jsfiddle.net/MvPHj/
I have a set of divs like so:
<div id="textArea">
<div id="text"></div>
</div>
CSS properties:
#textArea {
height: auto !important;
min-height: 2em;
overflow: hidden;
}
#text{
display: none;
}
I'm filling in the div with the id of "text" with error messages coming back from a POST request using jQuery. The size of the data coming back is not static, but my problem is that the div is not adjusting.
I am basically trying to mimic the Ruby on Rails default flash message that will push divs further down the page with a dynamically adjusted div.
I think you are simply doing too much - A div should automatically expand to fit the text content inside it, unless you have a specific rule saying otherwise. Do you have a rule that specifies a height for all divs? Is that why you have the height: auto !important here? Are you using a reset stylesheet? Something external to these rules is affecting your divs.
Hope that this points you the right way.
Div's should update height and width automatically unless otherwise told to. What is your jQuery code to update the div? What are you using to reveal the div to the browser (since it's currently set to display:none)? Have you tried using firebug to inspect the elements?
I have a design going on where I want to align the bottom of an intro paragraph with the bottom of the window, yet make it scroll with the rest of the page. So when the page opens, the visitor sees only the first paragraph (and a full screen background image, which is what I want to focus their attention on), but as they scroll they see the paragraph and the rest of the text. The height of the intro element can vary.
Right now I think I have to introduce some javascript to do this - meassure the height of the window, the height of the paragraph, and adjust top: or margin-top of the paragraph to the difference between the two values.
If there is a way to make a div have a height that corresponds exactly to the window height, and position the paragraph absolutely inside of this div, the let the rest of the text sit outside of the div, it could work... but I can't seem to make that happen with css. Any suggestions?
Try something like this:
<html>
<div id="wrap">
<p>Your first paragraph text here...</p>
</div>
<p id="absPos">The rest of your text here...</p>
</html>
And the CSS:
html, body, #wrap {
height: 100%;
}
#absPos {
bottom: 0;
left: 0;
position: absolute;
}