Develop Reference

Css Transition does not work when is .myclass:not(.example) by clicking the button

I'd like to understand why some parameters work with transiton and some don't. I have a button that brings up a div. If I only use max-height as a parameter then the transition works fine. When I insert other parameters such as opacity, top, etc... These only work on entry and never on closing. What am I doing wrong ?
You can see here that when you click the button for the first time, the transition works, when you click it the second time. the outbound transition does not work. The element disappear instantly.
var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
var x = document.getElementById("mts_menu");
if (x.classList.toggle ("show")) {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Close</span>';
} else {
usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars">Open</i>';
}
}
/*Icon Button Toggle Menu*/
.user_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 100%;
background: #282c33!important;
font-weight: 500!important;
font-size: 13px!important;
}
.icn_button {
margin: 0;
}
.icn_button:before, .icn_button:after {
margin: 0;
color: #fff;
}
.txt_button {
margin-left: 10px;
color: #fff;
}
/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px
color: #fff;
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: #fff;
}
/* User Menu For header website */
.mts_menu_container {
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
.mts_dropdown_box {
position: absolute;
margin-top: 17px;
}
.padds {
padding: 20px;
}
.mts_dropdown_content {
background-color: #fff;
min-width: 160px;
width: 280px;
border-radius: 3px;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 999;
position:relative;
}
.mts_dropdown_content.show {
max-height: 100vh;
opacity: 1;
top: 0;
transition: max-height 0.2s ease-in;
transition: opacity 0.2s ease-in;
transition: top 0.2s ease-in;
}
.mts_dropdown_content:not(.show) {
max-height: 0;
opacity: 0;
top: -40px;
transition: top 0.2s ease-out;
transition: max-height 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button onclick="userMenu()" class="user_menu_button">
<i class="icn_button fa-solid fa-bars"></i>
<span class="txt_button">Account</span>
</button>
<div class="mts_menu_container">
<div class="mts_dropdown_box">
<div id="mts_menu" class="mts_dropdown_content">
<div class="padds">
<span> Content, Content, Content, Content, Content, Content, Content, Content, </span>
<span> Content, Content, Content, Content, Content, Content, Content, Content, </span>
</div>
</div>
</div>
</div>

By setting multiple times "transition", you're overriding the previous one.
If you want multiple transitions, set it once with all your transitions separated with a comma:
transition: top 0.2s ease-out, max-height 0.2s ease-out, opacity 0.2s ease-out;
Or use "all":
transition: all 0.2s ease-out;
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

CSS Transition not working in opposite direction of style change?

I am using transition on a paragraph to slowly make it visible when some one hovers over h1 . I am successful in doing that but the transition only works one way. When my pointer leaves the field the paragraph suddenly disappears. I don't want that I want it to transition back to hidden state.
HTML :
<div class="row11">
<h1 id="html" class="h11">HTML5</h1>
<p id="html1" class="p1"> I have strong understanding of HTML5 which makes my base strong. I have been working with HTML from the last 12 Years</p>
</div>
CSS :
.row11{
width: 100%;
height: 50vh;
background: url("../images/html.jpeg") no-repeat center center fixed;
font-family: 'Julius Sans One', sans-serif;
display:flex;
align-items: center;
justify-content: center;
}
#html{
color: #fff;
padding: 10px;
background-color: #000;
width: 40%;
margin: 0 auto;
text-align: center;
margin-bottom: 5px;
}
#html1{
color: white;
background-color: rgba(182,60,56,0.9);
padding: 5%;
position: absolute;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 0s, opacity 2s ease-out;
-moz-transition: visibility 0s, opacity 2s ease-out;
-o-transition: visibility 0s, opacity 2s ease-out;
transition: visibility 0s, opacity 2s ease-out;
}
JS :
var headhtml = document.getElementsByClassName("h11");
var parahtml = document.getElementsByClassName("p1");
headhtml[0].addEventListener('mouseover' , () => {
parahtml[0].style.visibility = "visible" ;
parahtml[0].style.opacity = "1" ;
});
parahtml[0].addEventListener('mouseout' , () => {
parahtml[0].style.visibility = "hidden" ;
parahtml[0].style.opacity = "0" ;
});

Try to set transition on mouseout:
parahtml[0].style.transition = "all 2s ease-out"
var headhtml = document.getElementsByClassName("h11");
var parahtml = document.getElementsByClassName("p1");
headhtml[0].addEventListener('mouseover' , () => {
parahtml[0].style.visibility = "visible" ;
parahtml[0].style.opacity = "1" ;
});
parahtml[0].addEventListener('mouseout' , () => {
parahtml[0].style.visibility = "hidden" ;
parahtml[0].style.opacity = "0" ;
parahtml[0].style.transition = "all 2s ease-out";
});
.row11{
width: 100%;
height: 50vh;
background: url("../images/html.jpeg") no-repeat center center fixed;
font-family: 'Julius Sans One', sans-serif;
display:flex;
align-items: center;
justify-content: center;
}
#html{
color: #fff;
padding: 10px;
background-color: #000;
width: 40%;
margin: 0 auto;
text-align: center;
margin-bottom: 5px;
}
#html1{
color: white;
background-color: rgba(182,60,56,0.9);
padding: 5%;
position: absolute;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 0s, opacity 2s ease-out;
-moz-transition: visibility 0s, opacity 2s ease-out;
-o-transition: visibility 0s, opacity 2s ease-out;
transition: visibility 0s, opacity 2s ease-out;
}
<div class="row11">
<h1 id="html" class="h11">HTML5</h1>
<p id="html1" class="p1"> I have strong understanding of HTML5 which makes my base strong. I have been working with HTML from the last 12 Years</p>
</div>

First, you can simply this using only CSS considering the + selector. You may then adjust the transition on the hover and normal state. Add a delay equal to the duration of opacity animation within the normal state and keep the initial one within the hover state:
.row11 {
width: 100%;
height: 50vh;
font-family: 'Julius Sans One', sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
#html {
color: #fff;
padding: 10px;
background-color: #000;
width: 40%;
margin: 0 auto;
text-align: center;
margin-bottom: 5px;
}
#html1 {
color: white;
background-color: red;
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s ease-out;
}
#html:hover + #html1 {
opacity: 1;
visibility: visible;
transition: visibility 0s, opacity 2s ease-out;
}
<div class="row11">
<h1 id="html" class="h11">HTML5</h1>
<p id="html1" class="p1"> I have strong understanding of HTML5 which makes my base strong. I have been working with HTML from the last 12 Years</p>
</div>

Your visibility transition is 0s so you need to set the visibility to hidden 2 seconds after the opacity on mouseout (that's how long the transition lasts) using setTimeout.
.row11{
width: 100%;
height: 50vh;
background: url("../images/html.jpeg") no-repeat center center fixed;
font-family: 'Julius Sans One', sans-serif;
display:flex;
align-items: center;
justify-content: center;
}
#html{
color: #fff;
padding: 10px;
background-color: #000;
width: 40%;
margin: 0 auto;
text-align: center;
margin-bottom: 5px;
}
#html1{
color: white;
background-color: rgba(182,60,56,0.9);
padding: 5%;
position: absolute;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 0s, opacity 2s ease-in-out;
-moz-transition: visibility 0s, opacity 2s ease-in-out;
-o-transition: visibility 0s, opacity 2s ease-in-out;
transition: visibility 0s, opacity 2s ease-in-out;
}
<div class="row11">
<h1 id="html" class="h11">HTML5</h1>
<p id="html1" class="p1"> I have strong understanding of HTML5 which makes my base strong. I have been working with HTML for the last 12 Years</p>
</div>
<script>
var headhtml = document.getElementsByClassName("h11");
var parahtml = document.getElementsByClassName("p1");
var intvl;
headhtml[0].addEventListener('mouseover' , () => {
if(intvl){
clearTimeout(intvl);
intvl = null;
}
parahtml[0].style.visibility = "visible" ;
parahtml[0].style.opacity = "1" ;
});
parahtml[0].addEventListener('mouseout' , () => {
parahtml[0].style.opacity = "0" ;
intvl = setTimeout(function(){
parahtml[0].style.visibility = "hidden" ;
}, 2000);
});
</script>

jQuery - .css() not working?

Exclaimer, this is mostly snippet code, cause I didn't know how else to explain this. Please don't hate :3
The jQuery code is supposed to set the "max-height" property for "#dd.show". So can someone tell me why this doesn't work:
$("#btn").on("click", function() {
$("#dd").toggleClass("show");
});
var dv = document.getElementById("dd");
var item = dv.getElementsByTagName("A");
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px");
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
}
#dd.show:hover {
border-radius: 15px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
This is how it's supposed to look like. The only thing i changed was removing the .css JQuery and added "max-height" manually:
$("#btn").on("click", function() {
$("#dd").toggleClass("show");
});
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
top: 10px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
max-height: 225px;
}
#dd.show:hover {
border-radius: 37.5px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>

jQuery works fine, you problem lies here: $("#dd.show"). At the point where you execute that code the selector #dd.show won't find anything as there exists no element like that. (You only add the show class on button click)
You will have to add that css when pressing the button. Also note that $.css adds in-line css. (like <div style="max-height:100px;"></div>)

at the time that this line executes:
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px")
you don't know for a fact that the div with id dd also has the show class. Since the show class is dynamically toggled, I'm guessing that this element
<div id="dd">...</div>
doesn't have the show class when your jquery code is running. That means that $("#dd.show") isn't returning anything which explains why your css method isn't working.
This is precisely the kind of thing that you should use plain css for if possible. If you can get the behavior you want by simply specifying
#dd.show {
max-height: 225px;
}
then I'd just do that.
If you want to test this to see if I'm right, then add the following line right before you try to set the max-height property with jQuery.
console.log($("#dd").hasClass('show'));

I found a solution to the sliding problem. I added an IF statement to check if the "show" class is active. If it is then toggle it and set "max-height" to 0px. If no, then toggle it and set "max-height" to the other long value :) Thanks for all the help guys. You helped me towards the finishline :3
Here is the final code for people that might come in later to see the solution :3
$("#btn").on("click", function() {
if(!$("#dd").hasClass("show")) {
$("#dd").toggleClass("show");
$("#dd.show").css("max-height", document.getElementById("dd").getElementsByTagName("A")[0].offsetHeight * document.getElementById("dd").getElementsByTagName("A").length + "px");
} else {
$("#dd").toggleClass("show");
$("#dd").css("max-height", "0px");
}
});
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
}
#dd.show:hover {
border-radius: 15px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>

presence of className preventing onClick handler being called

I have a simple React component:
class FilterCheckBox extends React.Component {
clickCheckBox(e) {
console.log('clicked on checkbox');
}
render(){
return (
<div>
<a className="filter-checkbox" onClick={this.clickCheckBox.bind(this)}>
<span>{this.props.area.key}</span>
<span>{this.props.area.doc_count}</span>
</a>
</div>
)
}
}
With the className specified as above, the onClick handler is never called. However if I remove the className declaration, the onClick works fine.
The styles added by the class are:
.filter-checkbox,
.filter-checkbox:link,
.filter-checkbox:visited,
.filter-checkbox:focus {
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
-webkit-transition: color 0.5s ease;
transition: color 0.5s ease;
color: #546e7a;
text-transform: uppercase;
text-decoration: none;
font: normal normal 700 0.875em/1.2em "Oxygen", sans-serif;
/*14px*/
outline: none;
position: relative;
display: block;
margin-bottom: 10px;
}
/* line 330, ../scss/partials/_reusables.scss */
.filter-checkbox:before,
.filter-checkbox:link:before,
.filter-checkbox:visited:before,
.filter-checkbox:focus:before {
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-webkit-transition: all 0.8s ease;
transition: all 0.8s ease;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
content: '';
background: #ffffff;
border: 1px solid #cfd8dc;
color: #007cba;
clear: none;
cursor: pointer;
display: inline-block;
height: 15px;
line-height: 0;
width: 15px;
outline: none;
vertical-align: middle;
margin: -3px 10px 0 0;
}
/* line 347, ../scss/partials/_reusables.scss */
.filter-checkbox:after,
.filter-checkbox:link:after,
.filter-checkbox:visited:after,
.filter-checkbox:focus:after {
display: none;
content: '\f00c';
color: #ffffff;
font: normal normal 400 11px/11px FontAwesome;
position: absolute;
top: 2px;
left: 2px;
}
/* line 356, ../scss/partials/_reusables.scss */
.filter-checkbox:hover,
.filter-checkbox:link:hover,
.filter-checkbox:visited:hover,
.filter-checkbox:focus:hover {
color: #50d583;
text-decoration: none;
}
/* line 361, ../scss/partials/_reusables.scss */
.filter-checkbox.active:before,
.filter-checkbox:link.active:before,
.filter-checkbox:visited.active:before,
.filter-checkbox:focus.active:before {
border: 1px solid #50d583;
background: #50d583;
}
/* line 365, ../scss/partials/_reusables.scss */
.filter-checkbox.active:after,
.filter-checkbox:link.active:after,
.filter-checkbox:visited.active:after,
.filter-checkbox:focus.active:after {
display: block;
}
I can't see anything here that would stop the event from being propagated so there must be something I just don't understand properly..?

It turned out that this was caused by another script that was capturing the click event using jquery to target that specific class name.
Found through a process of elimination - first eliminating all scripts and restoring until the problem came back. Then inspecting the problem script until I found the offending line.
Thanks for your responses.

File upload not working, but fine in Codepen

I'm implementing this codepen I found for a file upload function. It works fine on codepen, however when I actually put it into my own html/css/js setup the file does not upload. I get no file name showing after a file has been selected.
Here is the code from codepen:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="file-upload">
<div class="file-select">
<div class="file-select-button" id="fileName">Choose File</div>
<div class="file-select-name" id="noFile">No file chosen...</div>
<input type="file" name="chooseFile" id="chooseFile">
</div>
</div>
CSS
body
{
background-color: black;
}
.file-upload
{
width: 400px;
display: block;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
text-align: center;
}
.file-upload .file-select
{
background: #FFFFFF;
border: 2px solid #dce4ec;
color: #34495e;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;
overflow: hidden;
position: relative;
text-align: left;
}
.file-upload .file-select .file-select-button
{
background: #dce4ec;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
.file-upload .file-select .file-select-name
{
display: inline-block;
line-height: 40px;
padding: 0 10px;
}
.file-upload .file-select:hover
{
border-color: #34495e;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.file-upload .file-select:hover .file-select-button
{
background: #34495e;
color: #FFFFFF;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.file-upload.active .file-select
{
border-color: #3fa46a;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.file-upload.active .file-select .file-select-button
{
background: #3fa46a;
color: #FFFFFF;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.file-upload .file-select input[type=file]
{
cursor: pointer;
filter: alpha(opacity=0);
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 100;
}
.file-upload .file-select.file-select-disabled
{
opacity: 0.65;
}
.file-upload .file-select.file-select-disabled:hover
{
background: #FFFFFF;
border: 2px solid #dce4ec;
color: #34495e;
cursor: default;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;
margin-top: 5px;
overflow: hidden;
position: relative;
text-align: left;
}
.file-upload .file-select.file-select-disabled:hover .file-select-button
{
background: #dce4ec;
color: #666666;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
.file-upload .file-select.file-select-disabled:hover .file-select-name
{
display: inline-block;
line-height: 40px;
padding: 0 10px;
}
JS
$('#chooseFile').bind('change', function () {
var filename = $("#chooseFile").val();
if (/^\s*$/.test(filename)) {
$(".file-upload").removeClass('active');
$("#noFile").text("No file chosen...");
}
else {
$(".file-upload").addClass('active');
$("#noFile").text(filename.replace("C:\\fakepath\\", ""));
}
});
I've pasted the exact same code into my html and tried linking the javascript in both head and body. Also tried putting jquery cdn in both head and body. No success.
Any help would be much appreciated. Thanks.
******UPDATE******
Thanks for the suggestions guys. I actually tried the it with the CSS turned off and it works fine, which tells me it's nothing to do with the JS. So follow up question, what is it about this CSS that's stopping it from displaying the uploaded file?

You can open up the JavaScript tools in your browser and set a breakpoint on this line:
if (/^\s*$/.test(filename)) {
Then when the code runs you can see what value 'filename' has and figure out why the regular expression fails, and what it should be. The regexp you have there looks like it is checking for "a string that starts and ends with 0 or more spaces", so maybe you'll need to check for "filename.length == 0" or "filename === undefined".
You can debug the code in your destination website, but also within Codepen. It's a little tricky but can inspect your code running inside the pen to get a value for comparison.
If you still need help, please write back with the value of "filename" from your debugger sessions.
Debugging JS in Chrome tutorial.

Maybe it don't works in your html site, because the javascript will be executed too early. Wrap your js code into:
$(document).ready(function() {
// Put code here
});

This worked for me
$(document).ready(function () {
$("#chooseFile").change(function () {
//your code here
});
});