Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am using an 'onclick' to view a picture and text. I now want to fade the background.
document.body.style.opacity = 0.1;
The page isn't fading or changing. So what am I doing wrong?
The full JS file is:
function changeImage()
thanks
opacity on body tag will change whole page style.
You probably want to change only background image or color.
1. color
You need rgb format for color 0,0,0, and just add alpha to make it rgba.
document.body.style.backgroundColor = "rgba(0,0,0,.1);"
2. image
You need pseudo element to change opacity without affecting body tag.
body {
position: relative;
}
body:after {
content: "";
background: url(image.jpg);
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Here is fiddle
UPDATE
If you just need an overlay when your image is enlarged,
than you should use overlay element, like every lightbox plugin.
Style overlay
CSS
body {
position: relative;
}
#overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,.7); //choose opacity
z-index: -1; // set z-index smaller than image and text
}
JS
if () {
//Create element and append it to body.
var page = document.body;
var overlay = document.createElement('div');
overlay.id = "overlay";
page.appendChild(overlay);
} else {
//Remove element
var overlay = document.getElementById("overlay");
overlay.parentNode.removeChild(overlay);
}
I'm guessing that what you really want is for the whole background to darken, you can do this by just adding a few simple lines to your css:
html {
background-color: black;
}
body {
background-color: white; /*<< or whatever it was previously,
but it has to have a color*/
}
And now it does work: http://jsfiddle.net/ru3pdqc7/1/
You may wish to add margin: 0; to your body, to prevent the black sides of the html from being shown, as demonstrated here.
Or, instead of css, 100% js:
document.getElementsByTagName("html")[0].style.backgroundColor = "black";
document.body.style.backgroundColor = "white";
document.body.style.margin = 0;
in a fiddle
Animations are added within fiddle, just to show you how you can fade it in and out. Really, it's all based on that simple idea.
NOTE: to avoid having your pop-out fade as well, you need to set its opacity to 1 at every stage of your animation.
Related
How do I enlarge a div while scrolling from a size of 20% width and height in the center to 100% width and height?
I'm currently trying at my first website and I'm almost there. All that is missing is animations and improvements in CSS. One of my ideas is that you have a div with a background inside and while scrolling the picture gets bigger up to the whole viewpoint. I would be very grateful if someone could help me.
You can use transform scale to do it.
CSS part will set the element to take 100% of width and height (i use viewport units), and set it position to fixed (so you will see what happen when you scroll).
Since we gonna change it's scale while scroll, set it initial scale to be 20% of it's original size.
JS part will listen to scroll event and scale the div that it won't be less then 20% but also won't be larger then 100%.
Play with the numbers on the condition to get what you need:
const demoDiv = document.querySelector("#demo");
window.addEventListener('scroll', function() {
if (pageYOffset*0.0001 > 1 || pageYOffset*0.0001 < 0.2) { return; }
else { demo.setAttribute('style', 'transform: scale('+pageYOffset*0.0001+');'); }
});
body {height: 40000px; margin: 0; padding: 0;}
p {position: fixed; top: 0; left: 0; font-size: 40px;}
#demo {
text-align: center;
font-size: 10vw;
position: fixed; top: 0; left: 0;
width: 100vw;
height: 100vh;
background-color: black;
color: white;
transform: scale(0.2); /* since you ask for 20% */
}
<p style="">Scroll to see it grow.</p>
<div id="demo">My minumum width and height are 20% and i will stop grow when i get to 100%</div>
Firstly, Congratulations on your first website. Good luck on your coding journey.
You can do it by using CSS & JavaScript. There is many way, but I'm writing one here. I hope it will be some good.
Let us call the div with an CSS ID animatedDiv.
<div id="animatedDiv"></div>
Now, lets style it with CSS
#animatedDiv
{
margin-top: 200px;
background: #dc143c;
min-height: 350px;
min-width: 20%;
position: absolute;
}
Here, I gave the div a background color, Absolute type of position, and margin-top of 200px. You can change it according to your needs. I used min-height and min-width property because these value will not be any fixed value, they will change on scroll.
Now, lets write some JavaScript
var aDiv = document.getElementById("animatedDiv");
function changeWidth()
{
var scrollVal = window.pageYOffset;
var scrollSlow = (scrollVal / 4);
//Changing CSS Width
aDiv.style.width = Math.min(Math.max(scrollSlow, 20), 100) + "%";
}
window.addEventListener('scroll', function()
{
requestAnimationFrame(changeWidth);
}, false);
Here, on a user define function, I catch the div with it's ID and assign into aDiv variable. Then I catch the page offset on Y axis (How much pixel the page was scrolled) and store it into a variable scrollVal, Next I divide the value by four (you can use 5, 10 20). It will slow the changing effect.
I've use Math methods (min and max) to assign a value between 20 to 100%.
To make the function work on scroll, window.addEventListener is used, and the window.requestAnimationFrame() method will tell the browser that we wish to perform it as an animation.
I hope it will be some help to you. I don't know did I explain well the process to you or not. English is not my mother language, so please don't mind if I made any grammatically mistake.
Wish you all the best.
I've dynamically created some divs with random color who are scattered over the page randomly. I want to use css to give them a condition that says that if the div is located above let's say 600px on the screen - his size will change. I know the "if" statement for css is #media but I didn't figure how to use it right in this situation. Can you help me?
Example of a div (they all have the same class - "frog")
<div id="frog" class="fas fa-ad" style="width: 66px; height: 66px;
background-color: rgb(87, 58, 55); position: absolute; left: 312px; top:
93px; display: block;"></div>
You can't do that with CSS only. The only way you can have dynamic styling based on what happens in the windows in CSS is to use media queries. However, the docs precise that you can only detect window-level data, like the device width, or whether the page is displayed on a screen or on a printed paper, etc.
You'll have to change your style with JS. This is often a bad way to have dynamic styling, because the only way to do so is to 'probe' the DOM (using for example setInterval). Luckily your case is an exception - since you update your divs position with JS, you can check directly after that the position of your divs, and update your styles accordingly!
Example using the very useful getBoundingClientRect:
// select the frog element
let frog = document.getElementById('frog');
let count = 0;
setInterval(() => {
// update the frog position
frog.style.top = `${count}px`;
count = (count+2)%200;
// check if the frog is after 100px from the top of the window
if (frog.getBoundingClientRect().top>100) {
frog.className = 'over-100';
} else {
frog.className = '';
}
}, 1000/30);
#frog {
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: green;
}
#frog.over-100 {
background-color: olive;
}
<div id="frog"></div>
I have a working sidebar menu that opens up when clicked. However, the background overlay doesn't work efficiently as the website has many elements. Here's the JS that does the work of adding background color to opacity of 0.4
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("mainbody").style.marginRight = "0";
jQuery("body").addClass("mySidenav_intro");
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
When clicked; the body of the pages change to
<body id="mainbody" class="mySidenav_intro" style="margin-right: 0px; background-color: rgba(0, 0, 0, 0.4);">
However, it changes only the background color of the website. I want to create an overlay of sort like a modal does when it opens. How should I achieve this?
Rather than change the background colour of the body, what you want is an element that will sit on top with some opacity, for instance using the approach here.
At its simplest, you could have a div with class overlay, use JS to trigger an enabled class on it, and use CSS:
.overlay {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background-color: rgba(0,0,0,0.9);
}
.overlay.enabled {
display: initial;
}
By default this will cover everything, to keep it from covering your sidebar just make sure it has a z-index higher than the overlay (i.e. 2).
I'm looking to append divs from the bottom. At a certain point, the vertical scroll should kick in so you can view divs that were appended earlier on. I'm trying to replicate a typical chat application and how messages come from the bottom. Here's the codepen...
http://codepen.io/jareko999/pen/yaQmgk
Before I put the code, I'll explain a couple of workarounds I've tried thus far. The pen currently has the container absolutely positioned with a bottom of 0. The problem, which is a pain, is that once the height goes beyond the height of the viewport, it won't scroll. This is the problem with the absolute positioning workaround.
Another workaround I've tried is doing a height of 100vh and display of flex with justify-content flex-end so the columns start at the bottom. The problem with this is that the scroll will always start from the top. I believe the solution is a scroll function that I've created to scroll to the bottom every time a new div is added. Would this be the best method? The key here is that I want to be able to scroll up to the older divs but have the newer divs start from the bottom. Think of a typical chat application like slack or messages or similar.
HTML
<button onclick="myFunction()">Hey here's a box</button>
<div id="container">
</div>
CSS
body {
margin: 0;
width: 100%;
}
button {
position: fixed;
z-index: 10;
}
#container {
position: absolute;
bottom: 0;
width: 100%;
}
#box {
width: 100%;
background: tomato;
opacity: 0;
height: 100px;
transition: .2s;
}
#box:last-child {
opacity: 1;
height: 0;
animation: .2s height linear forwards;
}
#keyframes height {
to {
height: 100px;
}
}
#box:nth-last-child(2) {
opacity: .8;
}
#box:nth-last-child(3) {
opacity: .6;
}
#box:nth-last-child(4) {
opacity: .4;
}
#box:nth-last-child(5) {
opacity: .2;
}
JS
function myFunction() {
var box = document.createElement("div");
box.setAttribute("id", "box");
var container = document.getElementById('container');
container.appendChild(box);
// window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
}
Is there a better solution than the function I've created to scroll to the bottom? Much appreciated.
Ok, so after messing around with some JS, I figured it out. I love when that happens...
Here's the codepen...
http://codepen.io/jareko999/pen/yaQmgk
I created a setInterval function for scrolling to the bottom.
var myVar = setInterval(function(){
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
}, .1);
However, since this interval runs every .1 seconds, I need to kill it in order to scroll around the divs above (like old chat messages), but I want the animation (of the new div coming in) to finish. So, I created a setTimeout function to kill the setInterval function at 200 ms.
setTimeout(function(){
clearInterval(myVar);
}, 200);
I am trying to make a simple Overlay module that would enable me to put overlay on a custom DOM element. The problem is that css for the overlay div specifies position:absolute. But element on which the overlay should be applied can have position:static in which case the overlay is applied incorrectly. How to overcome this issue? I have come up with this but I am not sure if it is good.
//js
if ($(elem).css('position') == 'static') {
$(elem).css('position', 'relative');
}
$('<div></div>').prependTo(elem).addClass('overlay').css('z-index', 100);
// css
div.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.75;
filter: alpha(opacity=75);
}
The suggestion of Thomas Andersen works. A slight disadvantage is a bit higher complexity and that position of the overlay is not pinned to the position of the element. Another approach could be to do it like this:
div.overlay {
position: absolute;
background: #000;
opacity: 0.75;
filter: alpha(opacity=75);
}
var width = $(elem).width();
var height = $(elem).height();
$('<div></div>')
.width(width)
.height(height)
.prependTo(elem)
.addClass('overlay')
.css('z-index', 100)
Here I am setting position:absolute without specifying top/left which should cause the overlay to be taken out of the flow while keeping its offset. Uncommon usage, I guess, but I believe I can rely on this.
The original solution I have proposed is a real hack and caused me some problems already.