Easy question for a lot of you but I'm still learning. I'm trying to get better at toggling between active and inactive states of simple objects.
I have a square div:
<div id = "square"></div>
With the following css to, onclick, make the div extend
#square
{
height: 50px;
width: 60px;
border: 1px solid red;
transition: height 2s ease;
}
#square:active
{
height: 100px;
}
And the following javascript to set up the click event:
var square = document.getElementById("square").addEventListener("click", function()
{
this.classList.toggle("active");
}, false);
But nothing seems to happen when I click. I'm including JS in this because I'm also new to learning JS as well, and I'm trying to get used to simple logic principles.
Here is the fiddle: https://jsfiddle.net/theodore_steiner/fsk6y50k/4/
Any help would be wonderful
The way that you used the class selector is wrong,
#square.active{
height: 100px;
}
It should precede with a dot not a colon
DEMO
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.
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 want an interactive experience for my users.. AND I want to remain responsiveness. I try to learn the web by making a card game.
What I have is things to click on, which are supposed to be appearing somewhere else on the page. (Im using jQuery so far)
The (simplified) use-case is:
var card = $('[card=X]').remove();
$('.board').append(card);
Now I want to add some animation to it.
I am failing in choosing an appropriate framework.
In the ones that I tried I couldn't time the removal, or the animation was gone, when I tried to call the removal, in a callback. Which was horrible, because the removal either fired before the callback or not at all. Or there was nothing left to be reattached..
So it should be more then just 'blur' or 'fade'.
So I want to detach a thing with an animation, place it somewhere else, and make it 'appear' there with an animation.
As a superb bonus, those animations would have an orientation, so that the 'from' and 'where to' are visible appearing to the end user. (Like an arrow or a line drawn between those 2 locations.)
(Sry for not being more specific, but asking that question for all the frameworks/ libs out there appears not that appealing..)
edit:
Nick pointed me in the right direction. My issue was the boilerplate code. I adjusted the code he provided. (added fade in animation + have the things 'reappearing' with event handler)
..thus I marked his answer as correct. (even that it wasn't, he didn't append the original thing, instead he created a new one.)
$('.cards ').on('click', '[card-id]', function() {
$(this).fadeOut(1000, function() {
var old = $(this).remove();
$('.cards').append(old);
old.fadeIn();
});
for(var i = 0; i < 6; i++) {
$('.cards').append('<div class="card" card-id="'+i+'"></div>');
}
$('[card-id]').click(function() {
$(this).fadeOut(2000, function() {
$(this).remove();
$('.cards').append('<div class="card" card-id="'+$(this).attr('card-id')+'"></div>');
});
});
.card {
position: relative;
display: inline-block;
width: 120px;
height: 180px;
background-color: #F4F4F4;
border: 1px solid #E8E8E8;
border-radius:5px;
margin: 15px;
cursor: pointer;
}
.card:after {
content: attr(card-id);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: 700;
font-family: courier, serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cards"></div>
Consider using .animate() from Jquery. There is a lot you can do with it.
Take a look at the API: http://api.jquery.com/animate/
I'm building a responsive page that, when viewed on mobile, includes some popular behaviors.
I have an element that includes text and a link. The text portion needs to cover 100% of the width of the viewport and when clicked/tapped the link should push the text content left and reveal the link.
Fiddle: http://jsfiddle.net/Flignats/0n0fwm20/
HTML:
<div id="container">
<div id="block-one">
I'm a bunch of informational text.
</div>
<div id="block-two">
I'm a link!
</div>
</div>
CSS:
#container {
width: 100%;
height: 100px;
}
#block-one {
float: left;
width: 75%;
height: 100px;
background-color: #626366;
}
#block-two {
float: left;
width: 25%;
height: 100px;
background-color: #969696;
}
#block-two a {
color: blue;
}
How can I have block-one span the full width of the screen, block-two hidden off the screen, and, on click, animate (the margin?) block-two into view with block-one pushed to the left?
My apologies if I missed a clear example on site, most other questions were more complex.
I'd prefer not to build a jquery mobile page, though the push and reveal panels would accomplish this action. I'm also using Angular if nganimate is preferred over javascript.
Here is pure css solution: http://jsfiddle.net/3wcfggmf/
I've used trick with label and checkbox:checked to recognize if element is clicked or not.
input:checked + #block-one {
width: 75%;
}
If I didn't understand you correctly please let me know and I'll modify this PURE css solution for you :)
I forked your fiddle here with a working example: http://jsfiddle.net/90gm224q/
Added CSS to yours:
#container * { transition: width .4s; }
#container.clicked #block-one { width:25%; }
#container.clicked #block-two { width:75%; }
The JS:
var container = document.getElementById('container'),
link = document.getElementById('block-two').getElementsByTagName('a')[0];
link.onclick = function() {
container.className = 'clicked';
return false;
}
Assuming I understood your question correctly, you can play with the CSS values for width to achieve your desired effect.
You could accomplish this via CSS transistions and a JavaScript class toggle.
Demo - http://jsfiddle.net/Leh5t9t6/
In my demo, clicking #block-one toggles a class which fires the CSS transision. I included a pure JavaScript and jQuery version in the demo (you mentioned you'd prefer not use jQuery).
I also edited the styles slightly to accommodate the off-screen link.
Pure Javascript
var element = document.getElementById('block-one');
element.addEventListener('click', function () {
this.classList.toggle('reveal');
}, false);
jQuery
$('#block-one').on('click', function(){
$(this).toggleClass('reveal');
});
I am trying to get an information tag to slide out from behind a circular picture. In order to do this I used a block and circle to create the information field and stuck it behind the image.
The problem I am running into is getting it to slide out smoothly. Since there are two div's, the square slides out and then the circle, causing it to look choppy.
I would like to get it to toggle in and out as if it were one object.
$(document).ready(function(){
$('.employeeBlock').hide();
$('.employeeDot').hide();
$('.employee').click(function(){
$('.employeeDot').toggle('slide');
$('.employeeBlock').toggle('slide');
});
I have tried it with the employeeDot inside the employeeBlock which is in the employee div
as well as both the employeeDot and the employeeBlock seperate and in the employee div.
Both methods give similar results
Thanks
EDIT: Thanks for the replies, it's running smoother, but not quite perfect. I think I need to create one item that is shaped like a bullet, and toggle that in and out. Any ideas on how to do that?
The closest I can get is a pill shape, which leaves some of the area uncovered
EDIT: Here is my html:
<body>
<div class = 'employee'>
<div class = 'employeeDot'></div>
<div class = 'employeeBlock'></div>
<img class = 'pic' src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQfMDb1Qtu7gTDZTfnFR2XcPqrfkn27zeWASTBfczi-GGQAIKG_"/>
</div>
</body>
</html>
And my CSS:
.pic {
height: 150px;
width: 150px;
border-radius: 75px;
position: absolute;
}
>.employeeBlock {
background-color:maroon;
height: 150px;
width: 150px;
position: absolute;
left: 75px;
float: left;
}
>.employeeDot {
background-color: maroon;
height: 150px;
width: 250px;
border-radius: 150px;
position: absolute;
float: left;
left: 75px;
}
You can specify any number of selectors to combine into a single result:
$('.employeeDot, .employeeBlock').toggle('slide');
Multiple Selector
.toggle(); is deprecated, use .slideToggle(); instead.
Slide down:
$(document).ready(function(){
$('.employeeDot','.employeeBlock').hide();
$('.employee').on("click", function(){
$('.employeeDot, .employeeBlock').slideToggle('fast');
});
});
Slide from side:
$(document).ready(function(){
$('.employeeDot','.employeeBlock').hide();
$('.employee').on("click", function(){
$('.employeeDot, .employeeBlock').animate({width: 'toggle'});
});
});
The rest of the answers have covered everything, but to get the element to shape like a bullet use:
border-radius: 10px 10px 0 0;
But match the size and sides to your likings.
try this.
$(document).ready(function(){
$('.employeeBlock,.employeeDot').hide();
$('.employee').click(function(){
$('.employeeDot, .employeeBlock').toggle('slide');});