I am trying to replicate the css transition here.
Similar to the example, I have created:
<span onclick="document.getElementById('box').classList.toggle('grow');">Go</span>
<div class="box"></div>
.box {
width: 150px;
height: 150px;
background-color: red;
border: 1px solid #000;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.grow {
width: 350px;
}
https://jsfiddle.net/swrhho41/15/
However, this doesnt seem to work. The grow class isn't being added to the div.
Is there more JS that is needed?
box is not an id. It's a class.
Therefore, your document.getElementById selects nothing. Simply change it to,
document.getElementsByClassName('box')[0].classList.toggle('grow');
Here's the fiddle
The problem is your onclick code is looking for an id : getElementById
Yet your div has a class not an id, change it to
<div id="box"></div>
<span onclick="document.getElementById('box').classList.toggle('grow');">Go</span>
make sure to also update your css if you update it to id:
#box {
width: 150px;
/* etc */
Also if you want it to grow, make the width on the .grow !important.
Fiddle: https://jsfiddle.net/swrhho41/18/
Since 'box' is a className, you need to either set the element's ID to be "box":
<div id="box"></div>
Or update your selector to be:
document.querySelector('.box').classList.toggle('grow')
<div id="box" class="box">
</div>
you are retrieving the item by Id, so Id should be box
Related
In the example below, I want to change pad's color via JS to green, but also make it transition to yellow when it is active.
However, changing the color via JS like this: pad.style.background = 'green' will make the transition stop working. If I remove this line, the transition will work fine.
Why is that so and how can I fix this?
let pad = document.getElementsByClassName('pad')[0]
pad.style.background = 'green'
.pad{
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad:active {
background: yellow;
}
<!DOCTYPE HTML>
<body>
<div class="pad"></div>
</body>
The reason for not working is because pad.style.background will add an inline css style which has a priority over a css class
Solution:
use a class instead of inline style like in the code bellow:
let pad = document.getElementsByClassName('pad')[0]
pad.classList.add("green");
.pad {
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad.green {
background: green;
}
.pad:active {
background: yellow;
}
<div class="pad"></div>
It seems like JS is adding green to the :active state too.
Add !important to the active style in your css to make it more of a priority:
.pad:active {
background: yellow!important;
}
This is happening because you're overriding the existing style by applying the style via style attribute on the HTML element.
Instead you should create a new class and apply that using JavaScript, in that case the original styles won't be overidden and the transition would still work
Have your CSS as:
.pad {
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad:active {
background: yellow;
}
.pad-green {
background: green;
}
And then in your JavaScript, do this:
let pad = document.getElementsByClassName('pad')[0]
pad.classList.add('pad-green')
Hope that helps, let me know in the comments if there are any questions.
I have some dynamic user generated divs.
I'm trying to create a function so when the user hovers on one of the divs it highlights while the other divs get blurred.
Therefore I need to figure out how (if possible) I can change the hovered div with one style while changing all the others with another style.
The generated divs are simply spawn through php as a simple div looking like this:
<div class="usercontainer" id="usercontainer"> </div>
I have tried something like this to change the div the user hovers on. But I can't figure out how I at the same time can change all the others.
Do I need javascript for it? or can it be done with css alone?
.usercontainer:hover
{
background-color: red;
opacity: 1.0;
}
I am sharing with css approach only, though you can do it by adding a class at parent with javascript.
Disadvantage of this approach is you have to use !important to override child styles.
.children {
display: inline-block;
height: 100px;
width: 100px;
background-color: grey;
color: red;
font-size: 50px;
border: solid 1px yellow;
}
.parent:hover .children {
opacity: 0.2;
}
.children:hover {
opacity: 1 !important;
}
<div class="parent">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
</div>
First of all, no, I'm not going to use jQuery.
So, I have this project I'm working on, and I want to do a slide toggle element. Everything is nice and good until I press the button really fast. Then the borders dissapear and the element has reached its final height(500 px in this case).
Perhaps my explanation wasn't that accurate, but I'll give you the code.
var div = document.getElementById('div');
var btn = document.getElementById('button');
function clickFunction(){
if(div.style.height === "0px") {
div.style.height = "500px";
div.style.borderStyle = "solid";
} else {
div.style.height = "0px";
setTimeout(function(){div.style.borderStyle = "none";}, 500);
}
}
btn.onclick = clickFunction;
div#div {
transition: 500ms ease;
width: 100px;
height: 200px;
margin-top: 20px;
}
.container {
width: 120px;
background-color: red;
padding: 8px;
}
<button id="button">
Press me
</button>
<div class="container">
<div id="div" style="border-style: none; border-width: 2px; height: 0px;"></div>
</div>
I also tried using clearTimeout() but it wasn't working. Yes, I set setTimeout as a variable, but it doesn't do anything.
Any ideas? Cheers.
Your current code uses combinations of inline styles and an id selector in conjunction with the inline style being updated by JavaScript in an if/then as well as with a setTimeout() callback. All of these instructions, coupled with the speed at which the client can repaint the UI are all contributing to the problem.
By cleaning up the approach to toggling the styles and how the styles are applied in the first place, there is much less potential conflict in instructions and timing.
Remove all the static styles from the HTML and set up CSS classes for the normal and expanded states of the element. Then just use the element.classList.toggle() method to seamlessly toggle the use of the expanded class. No timers needed.
var div = document.getElementById('div');
var btn = document.getElementById('button');
btn.addEventListener("click", function(){
div.classList.toggle("expanded");
});
.container {
width: 120px;
background-color: red;
padding: 8px;
}
.normal {
transition: 500ms ease;
width: 100px;
margin-top: 20px;
border:0px solid black;
height: 0px;
}
.expanded {
height: 200px;
border:2px solid black;
}
<button id="button">Press me</button>
<div class="container">
<div id="div" class="normal"></div>
</div>
NOTE:
Be careful when setting up CSS selectors that are id based because they become very difficult to override later. I'm not saying never use them, but more often than not, CSS classes provided the most flexible solutions and help to avoid gobs and gobs of inline styles.
I have a situation where I need to apply Styles on a POPUP based on if "Opener window" of that POP has a style class defined on it.
<html>
<body class="myClass">
<input type="button" onClick="Open('xyz.html')"/>
</body>
</html>
Now on xyz.html I want to have a CSS selector which can toggle some style based on if parent.html has class="myClass".
Is it possible without Jquery?
If not: what alternatives I have for this including Jquery and Javascript?
Please note: parent.html is opening xyz.html they are both separate windows.
You don't need to use jQuery to check it. You can make use of simple CSS for it. Check the code below. Here, if container has the class my-class. The property of background-color will be applied to the popup. Otherwise, it won't. Check the code and try using the same with and without the my-class in the container.
$('button').on('click', function() {
$('.popup').toggleClass('active')
})
.popup {
padding: 10px;
border: 1px solid #ddd;
opacity: 0;
transition: all 0.8s ease;
}
.popup.active {
opacity: 1;
}
.container.my-class .popup {
background-color: red;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container my-class">
<button>Click</button>
<div class="popup"> HAI </div>
</div>
I found it a little difficult to word exactly what I was trying to ask, so I just made a fiddle instead. On my website I currently have a button that triggers a jQuery "drop" effect on a hidden div that has some text under it...like so:
<div id="toggle"></div>
<p>Some text under the div</p>
When the drop happens, my text shoots to the position it's supposed to be in rather than smoothly transitioning.
Code snippet:
$(document).click(function() {
$("#toggle").toggle("drop", {
direction: "up"
}, 600);
});
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<p>Some text under the div</p>
</body>
Fiddle: https://jsfiddle.net/42cdxz83/10/
Is there a way to make the text transition/slide smoothly instead of going instantly from one position to the next? Using .slideDown() on the text is awesome, but is obviously tripped up by my "drop" animation. Looking for any way I can stop the jumpy text.
Thanks!
I think your problem was due to the fact that you were toggling the <div>, which included the paragraph, and expecting both to work separately. Here's an updated JSFiddle with a result I think you'd like: https://jsfiddle.net/42cdxz83/15/
Problem:
When you use toggle, you are removing your #toggle element from the
DOM. That's why your <p> element jumps to the top.
Solution:
Instead of using toggle, you can use CSS transitions for this, along with the property transform.
Code snippet:
$(document).click(function() {
$("#toggle").addClass("drop");
$("#toggle + p").addClass("up");
});
#toggle {
width: 100px;
height: 100px;
background: #ccc;
transition: transform 600ms ease-out, opacity 200ms linear;
}
.drop {
opacity: 0;
transform: translateY(-100px);
}
#toggle + p {
transition: transform 600ms ease-out;
}
.up {
transform: translateY(-100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<p>Some text under the div</p>
</body>
Notes:
The transformation in the Y axis of your <p> element should be equal to the height of your #toggle element multiplied by -1. (negative value)