I want to make the body of my website have a low opacity but keep a popup at the default opacity of 1 so that it stands out.
How can I do this? I've tried specifying that the popup has opacity: 1 !important; but it doesn't take effect.
Here is a jsfiddle with my attempt: https://jsfiddle.net/80351/0xo10tjc/
Please note that I know how to achieve this by setting the opacity of an outer div instead of body at 0.2 but I really want to know if this is possible to do when changing body.
You can set html and body to have 100% height and apply background-color to a div
html,
body {
height: 100%;
}
body{
margin: 0;
padding: 0;
}
.overlay {
background-color: yellow;
opacity: 0.2;
width: 100%;
height: 100%;
}
https://jsfiddle.net/0xo10tjc/4/
Related
$('#div-1').click(function() {
if ($('#div-2').hasClass('shown')) {
$(this).css('left', 0);
$('#div-2').removeClass('shown');
} else {
// $('#div-2').css('width', 'auto');
$('#div-2').addClass('shown');
$(this).css('left', $('#div-2').width());
}
})
#div-1 {
background-color: red;
position: absolute;
width: 25%;
min-height: 100vh;
transition: 0.5s;
left: 0;
top: 0;
z-index: 1;
}
#div-2 {
background-color: blue;
position: absolute;
max-width: 0;
min-height: 100vh;
transition: 0.5s;
left: 0;
top: 0;
overflow: hidden;
}
.shown {
min-width: 25% !important;
max-width: 500px !important;
transition: 0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div-1"></div>
<div id="div-2">
<p>I want all this text to show up and it could be any length...</p>
</div>
I have two divs and one starts out hidden (with 0 width, not hidden display). When you click on the other div, I need the hidden div to slide out and push the click div out of the way as far as it needs to be pushed. The hidden div contains text that could be of variable length. In essence, I want to change the hidden div's width from 0 to auto and shift the click div over to the right by this new amount. I know you can't animate auto so I have been using the max-width trick shown here.
My problem is that the click div seems to slide out to the hidden div's new min-width but not to its actual width. Here is a fiddle of the problem: https://jsfiddle.net/tjfhzvd9/1/. Click on the red box in that fiddle to see why this is not working. I want that div to slide as far as it needs to but no farther.
I also tried doing this with Jquery.animate() but that did not work either. Your help is appreciated.
Here is a pure css solution:
HTML:
<div id="container">
<div id="div-2">
<p>I want all this text to show up ...</p>
</div>
<div id="div-1"></div>
</div>
CSS:
#container {
display: flex;
flex-direction: row;
}
#div-1 {
background-color: red;
width: 25%;
min-height: 100vh;
}
#div-2 {
background-color: blue;
width: auto;
max-width: 0;
transition: max-width 1s ease;
overflow: hidden;
}
.shown {
max-width: 75% !important;
}
JS:
$('#div-1').click(function() {
$('#div-2').toggleClass('shown');
})
CSS solution works fine but you may notice an undesirable text rendering effect. This happens because a paragraph constantly adapts it's width to the parent container's width during animation cycle. We should set a fixed width on the paragraph before running the main animation cycle:
var div2MaxWidth = 0;
// Get div2 max width
$('#div-2').css({
transitionDuration: '0s',
maxWidth: '75%', // <=== 100% - red.width
position: 'absolute',
visibility: 'hidden'
});
div2MaxWidth = $('#div-2').width();
$('#div-2').css({
maxWidth: '0',
position: 'static',
visibility: 'visible'
});
// Set fixed width to the paragraph inside div2 and restore transition's duration
$('#div-2 > p').width(div2MaxWidth + 'px');
$('#div-2').css('transitionDuration', '1s');
$('#div-1').click(function() {
$('#div-2').toggleClass('shown');
})
I am using Bootstrap 4 on my project, and modified the modal style in order to make it fullscreen like you can see it on this css code:
.modal.show {
display:flex!important;
flex-direction:column;
justify-content:center;
align-content:center;
align-items: flex-start;
}
.modal-body {
padding: 0;
margin: 0;
}
.close {
color: #aaa;
position: absolute;
/* background: blue !important; */
border: 0;
top: 0;
z-index: 99999;
right: 3%;
float: none;
opacity: 1;
font-size: 40px;
font-weight: 400;
}
.modal-backdrop.modal-backdrop-transparent {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
opacity: .9;
filter: alpha(opacity=90);
}
.modal-backdrop.modal-backdrop-fullscreen {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
opacity: .97;
filter: alpha(opacity=97);
}
.modal-fullscreen {
background: #fff;
min-width: 100%;
margin: 0;
}
#media (min-width: 768px) {
.modal-fullscreen .modal-dialog {
width: 750px;
}
}
#media (min-width: 992px) {
.modal-fullscreen .modal-dialog {
width: 970px;
}
}
#media (min-width: 1200px) {
.modal-fullscreen .modal-dialog {
width: 100%;
}
}
.modal-dialog {
position:fixed;
padding: 0;
max-width: 100%;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
overflow:auto;
}
When I tried to scroll down the vertical scrollbar of the browser, it won't ! I can use mouse scroll wheel but not by clicking on it directly !
Are you able to detect the problem ? It's for sure the fixed position but it is needed to make it fullscreen.
Here a jsfiddle to see a live demo of the problem:
https://jsfiddle.net/odbjcpt2/1/
I don't want to use position FLEX instead of FIXED since it won't solve the problem on my project, even if in the example given it will works (modal keep ading padding-right to body ... it is fixed using FIXED).
Thank you
In your JSFiddle, the problem appears to be with the div that contains the Lorem Ipsum text. It has pointer-events: auto; inherited from .modal-content class and if you remove that it ends up with pointer-events: none; inherited from modal-dialog class. If you take both those away, the problem goes away.
EDIT
I believe the root of the issue is that you're setting your .modal-dialog class to have fixed position and overflow auto.
Below is from bootstrap doc
Modals use position: fixed, which can sometimes be a bit particular
about its rendering. Whenever possible, place your modal HTML in a
top-level position to avoid potential interference from other
elements. You’ll likely run into issues when nesting a .modal within
another fixed element.
After playing around, if I edit your CSS in your JSFiddle example and in the .modal-dialog class I just remove position:fixed; and overflow:auto;, the problem goes away.
EDIT AGAIN
I just noticed you actually have .modal-dialog defined in your CSS twice, the first time with flex position and second time with fixed. Sounds like that was maybe a copy/paste mistake. Anyhow, still the same root cause I think, because your .modal-dialog div is fixed and it's inside your .modal div, and bootstrap doc says don't put another fixed inside a .modal
How can I change my code to allow it to change image when I hover my mouse over the current image?
The image I wish to change sits in the body of my webpage:
<body>
<!-- Here's myImage!-->
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">
and I would like this image for example, to change to a new image, anotherImage.jpgwhen you hover over myImage.jpg. I attempted to find help elsewhere but was unsuccessful.
You can use javascript's onmouseover event, but it's considered best to use CSS where possible.
Here is a demo of one possible solution: (Edit on Codepen)
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin-left: 50px;
}
.container:hover img:nth-of-type(2) {
opacity: 1;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
transition: opacity 1s ease-in-out 0s;
}
.container img:nth-of-type(1) {
opacity: 1;
}
.container img:nth-of-type(2) {
opacity: 0;
}
<div class="container">
<img src="https://placeimg.com/600/400/animals" />
<img src="https://placeimg.com/600/400/people" />
</div>
Basically, the way in which this works is that the two images are made the same size through CSS, and placed on top of each other (that's what the absolute positioning is for). When the user is not hovering over it, the second image will have an opacity of 0 (the nth-of-type(2) selector selects the second element of that type), so it is not visible, and the first one has an opacity of 1, so it is visible. When the user hovers over it, the second one is given an opacity of 1, so it becomes fully visible, and since they are both the same size and on top of each other, the first one is covered by the second. This means that the image changes when you hover over it.
Another advantage to this is that, as you can see in the demo, it is fully animateable! Other solutions, such as using display: none or background images cannot be used with CSS transitions, as they are not animateable properties, but opacity is animatable, so you can create transitions such as this! Good luck!
If you didn't understand my explanation of how this works, feel free to ask for clarification!
If you can add both images into a <span> tag or so, you could do this:
span img:last-child {
display: none;
}
span:hover img:first-child {
display: none;
}
span:hover img:last-child {
display: inline-block;
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
<img src="http://lorempixel.com/300/150/sports/2">
</span>
Or, use a pseudo element for the second image.
span:hover img {
display: none;
}
span:hover:after {
content: url("http://lorempixel.com/300/150/sports/2");
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
</span>
See this jsFiddle for an example of some basic fade in/out effects.
In your CSS make the first class contain the first image. Then the second class will be the class name + hover. EX. .CLASSNAME:hover {}
#NAME {
background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
}
#NAME:hover {
background-image: url('LibraryHoverTrans.png');
}
I need to have an absolute div that is a child of only body fill the entire document area (window + any scroll area)
-- width: 100% only fills the viewable screen
I prefer a CSS only solution but pure javascript is ok. I tried without success setting:
opaque.style.minHeight = Math.max(document.body.offsetHeight, document.body.scrollHeight);
I made a jsFiddle of the code below. If you scroll down the output, you will see that the opaque div stops at whatever height the output window was when it was rendered.
In case you are wondering... it is to make an opaque overlay of all content in the div behind it (think slideshow). My only other solution is to disable scrolling, but this is problematic.
Thanks for any help.
<div class="page-container"></div>
<div id="opaque"></div>
body {
width:100%;
}
.page-container {
position: relative;
max-width:978px;
width: 100%;
min-height:2500px;
margin:0 auto -50px auto;
border:solid #999;
border-width:2px;
background: lightblue;
}
#opaque {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: grey;
filter: alpha(opacity=70);
opacity: 0.7;
}
Can use
#opaque {
position: fixed;
top: 0;
left: 0;
right:0;
bottom:0;
}
remove width:100% from body due to creates horizontal scrollbar
Depending on use case it is often common to add class to body when using such an overlay that sets body overflow to hidden
DEMO
You can put a position: relative on your body so that the body will be used as a reference point by the child element in terms of height (as opposed to the document object).
Using javascript to set one elements height equal to anothers
var o = document.getElementById('opaque');
var p = document.querySelector('.page-container');
o.style.height = window.getComputedStyle(p).getPropertyValue("height");
FIDDLE
I have a div with position fixed (my dialog) which i give a higher z-index to takeover my page when a certain action is performed. Am trying to hide my scrollbar by doing overflow:hidden;without affecting the width of the page when the div takes over the page. Any suggestion how this would be performed??
html, body {
background: #FFFFFF;
font-family: "Avenir Medium";
height: 100%;
transition: overflow 0.37s easein-out
}
.div-dialog{
display: none;
opacity: 0;
position: fixed;
width: 0;
left: 0;
top: 0;
z-index: 0;
overflow: hidden;
background: white;
-webkit-transition: opacity 0.30s ease-in-out;
transition: opacity 0.30s easein-out;
}
Jfiddle trying to replicate my result.The implementation am trying to realize is that of myspace when you click the search icon at the top left
Was finally able to fix my problem, by doing the following
html,body{
height: 100%;
overflow: hidden;
}
body{
overflow: auto;
}
By doing this all my content stays within the body, so when an element has a position of fixed, it covers the scrollbar and its not affected by any change to its overflow,overflow:hidden or overflow:auto