CSS opacity animation changes position? [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Does the CSS animation property when used to change opacity also change the position of an element? If so, what is going on in the DOM that makes that happen, and how can it be offset?
Context: I've added a Javascript EventListener to a set of images, which when clicked calls a function that initiates a CSS animation fading the clicked image. A timer is also set that removes a CSS class thereby returning the clicked image from opacity 0 to opacity 1. It all works fine except that the image reappears slightly off to the left and top from where I originally placed it and where I want it to be. The same unwanted effect happens on both Chrome and Safari.
Here's the CSS:
.hiddenanimal {
animation: animalfade 1s;
animation-fill-mode: forwards;
}
#keyframes animalfade {
from { opacity: 1;
} to { opacity: 0;
}
}

Simple answer: A CSS animation will only change values you tell it to. In your example:
#keyframes animalfade {
from {opacity: 1;} to {opacity: 0;}
}
The only thing that will change is the opacity.
If your element is moving then something else is happening and maybe not to the element with the animation.
You ask what is going on in the DOM. Technically: nothing. The CSS values are changing over time, not the DOM.
Having a better example would help others to be able to answer your question better. I have made assumptions and have no idea is my answer is even close to what you want to know. If you can update your question to include some HTML and JavaScript then I can modify my answer.

Related

How to dim display of a webpage [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I'm currently working on a chrome extension and want to dim the display/add a black transparent background over the existing website such as facebook, youtube, etc. How would this be done in CSS and implemented in JavaScript?
You would do this in CSS, more so than in javascript.
The big picture is that you would create a div that you would style like this:
<div id="overlay"></div>
<style>
#overlay{z-index:9999999;pointer-events:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.3);}
</style>
That would create an div that sits on top of your page content and makes the entire page more dim. (Note that the z-index value of your overlay must be set higher than the z-index values of every other element on the page. Every page is different. By default, the z-index of every element is zero - but most websites place some items above others, so the highest-used z-index could be almost anything.)
Note that the "a" at the end of rgba() is the opacity value - a value of 0.3 will allow most of what lies beneath to be visible, but colored by the first three values 0,0,0, which is black.
How would you do that just with javascript? Here is a short video that explains how create html and add it onto a page with javascript:
https://www.youtube.com/watch?v=VsXCK_2DJzA
There is just one problem: (SOLVED BELOW)
Because your overlay div is sitting on top of the page content, the user cannot interact with the page content anymore (cannot click in fields, cannot press buttons, etc). Due to the z-index (which is necessary to place your overlay on top of the other page content), the overlay now sits between the mouse cursor and the page content. Anywhere the user clicks, they are clicking on the overlay.
The solution, pointed out to me by David Bailey in the comments, is to use the css attribute pointer-events: none; on the overlay div. This tells CSS to ignore any clicks on that element (the overlay) and pass them through to the underlying components.
/* Note: this is NOT jQuery - look carefully. */
const $ = document.querySelector.bind(document);
$('#mybutt').addEventListener("click", function() {
alert("You clicked me");
});
$('#mybutt2').addEventListener("click", function() {
$('#mybutt2').innerText = 'Try clicking buttons NOW';
$('#olay').classList.add("noPtrEvts");
});
#olay{
pointer-events: none;
z-index:9999999;
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.3);
}
.noPtrEvts{
pointer-events: auto !important;
}
<div id="olay"></div>
<h1>An Example Webpage</h1>
<div><img src="http://placekitten.com/300/150" /></div>
<button id="mybutt">Click me First</button>
<button id="mybutt2">Remove pointer-events CSS</button>
There is no way to do this in JavaScript alone, unless you bring in a CSS script as this is still, I have edited your post's tags to bring in the correct experts to help.
You would do something like this:
body{
background-color: #302E2E;
}
In CSS, but you may need to look at the element classes and Id's to make it work universally on all platforms

JQuery/Javascript/CSS icon shrinking when de-hovered [closed]

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 7 years ago.
Improve this question
I have three social icons which grow when hovered (css element:hover) - I want them to shrink slowly to the initial size when user stops hovering them - how could I solve it with Javascript, CSS or jQuery?
You can use CSS alone to achieve this via the transition property, no Javascript required.
.icon {
font-size: 2em; // assuming the icons are font-based. Use height/width otherwise
transition: font-size 0.3s;
}
.icon:hover {
font-size: 4em;
}
Working example
Well, jQuery has a handy-dandy function set called .mouseenter() and .mouseleave() that I'm sure you've heard of :).
You obviously know how to get the elements to grow, so for them to shrink I would reverse what you've done and decrease the size after .mouseleave() Something like this, I think, would work:
$(document).ready(function(){
$('your_element_here').on('mouseleave', function(){
$(this).animate({height: '20px', width: '20px'}, 500);
});
});
Only you'd replace the '20px''s with whatever height and width you want the icon to shrink down to. I hope this helps and I would be glad to expand on this as much as you need so comment if you need anything else.

What is the difference between display:none and setting the height and width equal to 0 of an HTML element? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
If we want to make an element disappeared from the page completely, we could use the CSS property value display:none
Alternatively we can effectively hide an element with visibility:hidden but that element would still take the space as if it were there which I don't want.
So, If I want to actually hide an element without using the display:none, I see an option of explicitly setting the width and height equal to 0 of the element.
What is the semantic difference between these two ?
An element with no height or width still has a margin and/or border and will still influence surrounding elements by its presence in the tree, e.g. with float and clear rules. Only an element with display: none is really truly not present.
display:none takes the element out of the page, so screen readers can't see it. if you want to completely remove the element from the dom you should use display: none otherwise this does the same thing.
.hidden {
visibility: hidden;
position: absolute;
top: -9999px;
left: -9999px;
}
The display property tells the browser how to show an element. Display:none means that the element will not appear on the page at all. There will be no space allocated it. it will be hidden. But if you give height and width as 0px; then in this case, the contents will appear and contents will overflow outside the div.

Why CSS class isn't applied (using JavaScript onload)? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm trying to add class after page is loaded so the transition in added class can change height and opacity of element, but I still can't get it working.
html file:
<head>
<script>
window.onload = function {
document.getElementById('home-id').className='home-class';
};
</script>
</head>
css file:
#home-id {
transition: opacity 1.5s ease-in-out 0s;
height: 0.0em;
opacity: 0.6;
}
html:hover #home-id {
transition: opacity 1.5s ease-in-out 0s;
opacity: 1;
}
.home-class {
transition: height 1s ease-in-out 0s, opacity 1.5s ease-in-out 0s;
height: 40em;
opacity: 1;
}
Could you please tell me what I'm doing wrong, thank you.
Edit: I just add that problem wasn't in missing "()", but in specificity.
You could use the classList:
// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );
alert(div.classList.contains("foo"));
div.classList.add("foo","bar"); //add multiple classes
It gives you more flexibility than using className property.
And your function for the onload method should be:
window.onload = function() {
document.getElementById('home-id').className='home-class';
};
You missed the () for function.
MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
I'd use jQuery for this. Simply link the latest version from http://www.code.jquery.com in your HTML file and use the following code:
$(document).ready(function() { //The following block of code will be executed when the page finishes to load.
$("#home-id").addClass("home-class"); //This line adds the class "home-class" to the element with the id "home-id"
});
If you're not familiar with jQuery I recommend checking out the codecademy jQuery course.(https://www.codecademy.com/learn/jquery) jQuery is very lightweight, extremely simple to use and learnable with ease.

.stop() breaks the fadein and the yellow box doesn't appear proper [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
If I most over the red box quickly and leave the cursor over the red box, it simply stops fading in and breaks the operation in half. If I don't use the .stop() function at all, jquery tries to finish the remaining operations (that I hovered and quit the box quickly before) Does anyone know what I should do here? Thanks.
http://jsfiddle.net/dkLhC/1
$(document).ready(function(){
$(".box1").mouseenter(function(){
$(".box2").stop().fadeIn();
});
$(".box1").mouseleave(function(){
$(".box2").stop().fadeOut();
});
});
JSFiddle
JQuery function fadeTo() also seems to work like css transitions, but transitions are undoubtedly better choice.
$(document).ready(function(){
$(".box1").mouseenter(function(){
$(".box2").stop().fadeTo(1000, 1);
});
$(".box1").mouseleave(function(){
$(".box2").stop().fadeTo(1000, 0);
});
});
This is not a direct answer to your problem, but an alternative solution. Instead of jQuery, you can use CSS transition to do the fade in and out
.box2
{
opacity: 0;
transition: opacity 2s;
}
.box1:hover + .box2 {
opacity: 1;
transition: opacity 2s;
}
See JSFiddle
Use .finish():
DEMO
$(document).ready(function(){
$(".box1").mouseenter(function(){
$(".box2").finish().fadeIn();
});
$(".box1").mouseleave(function(){
$(".box2").finish().fadeOut();
});
});
After some research I found that the correct answer is
true, false (for the parameters clearQueue, jumpToEnd)
http://jsfiddle.net/q6d57/11/
$(document).ready(function(){
$(".box1").mouseenter(function(){
$('.box2').stop(true, false).fadeIn(3000);
});
$(".box1").mouseleave(function(){
$('.box2').stop(true, false).fadeOut(3000);
});
});

Categories