I've been trying to find some information about this, but I cant find some good information.
I want to make a div, that says "Contact Us" and when you click on the div, a layer shows up smoothy with input types.
I know that I can make some quick javascript to change from display:none to display:block, but how can I do it smooth?
for an example (just a quick example, the actual one will be better)
<div id="contact-us" onClick="showContactUs()">
<div id="contact-us-content" style="display: block;">
Name - <input type="text" name="name">
Email- <input type="text" name="email">
</div>
</div>
And then javascript is
function showContactUs(){
var r = document.getElementById("contact-us-content");
r.style.display = "block";
}
If any of you have any tips, or a link I can check I would appreciate it.
I am not that good with jquery, but can absolutely try some if you think its better.
There is no way to make the appearing smooth by setting display: block. You can, however, transition opacity. I suggest adding a class by javascript and solving the rest by css.
Check it out here: https://jsfiddle.net/3wLrfk3d/
$(document).on('click', '#contact-us', show_contact_form)
function show_contact_form () {
$('#contact-us-content').addClass('shown')
}
css:
#contact-us-content {
opacity: 0;
transition: opacity .5s ease;
&.shown {
opacity: 1;
}
}
My example uses jquery and sass, I am sure you will be able to rewrite it to vanilla and css.
I usually transition the opacity, but that will mean the element will be there even if it's invisible, taking up space and blocking mouse events. I solve this by having two classes, one to fade the element and one to hide it completely when it's done fading out:
$(function() {
var $box = $('.box');
$('.toggle').on('click', function() {
if (!($box).hasClass('visible')) {
$box.addClass('transitioning');
setTimeout(function() {
$box.addClass('visible');
}, 1)
} else {
$box.removeClass('visible');
setTimeout(function() {
$box.removeClass('transitioning');
}, 400)
}
})
})
body {
font-family: Helvetica, Arial, sans-serif;
}
.box {
background-color: #333;
color: white;
border: 5px solid white;
padding: 50px 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);
text-align: center;
transition: opacity .4s ease-in-out;
display: none;
opacity: 0;
}
.transitioning {
display: block;
}
.visible {
opacity: 1;
}
.toggle {
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">Toggle Box</button>
<div class="box">
<h1>Hi there</h1>
</div>
Note: this is a quick and dirty example, it kinda freaks out if you spam clicks on the toggle button, I'll leave that up to you.
Related
I am creating an AutoComplete component but I am having a problem because I want the suggestions to animate into existence by sliding down. I am using the transform: translateY CSS in order to have it be performant on mobile.
So basically what I need to have happen is for the suggestions to hide behind the textbox, and to slide down and appear when the user begins typing. This only slightly works because the suggestions list is taller than the textbox. As a result, it can't fully hide behind textbox as it clips out of the top.
I have created a working example that demonstrates the problem at this link, and also have reproduced the code here (try typing into the textbox):
document.querySelector(".autocomplete").oninput = e => {
let value = e.target.value;
if (value.length > 0) {
document.querySelector(".suggestions").classList.add("open");
} else {
document.querySelector(".suggestions").classList.remove("open");
}
}
.autocomplete {
border: 1px solid #ddd;
padding: 5px;
width: 500px;
background-color: yellow;
z-index: 1;
position: relative;
}
.suggestions {
border: 1px solid #ddd;
height: 125px;
width: 500px;
transform: translateY(-30px);
transition: .25s;
background-color: #eef;
}
.open {
transform: translateY(0);
}
<p>Some text and a paragraph preceding the autocomplete</p>
<div>
<input class="autocomplete" />
<div class="suggestions">apple, banana, carrot, dog</div>
</div>
I would like to make the transform: translateY(-30px); instead to be transform: translateY(-130px);, but then it clips before the textbox. I want it to hide behind the textbox instead. Also, I don't think I can use scale here because I don't want it to look bad and distorted while animating in.
Depending on the state of the application, I may have different elements preceding this, so while a bandage solution of "put something before it" might work, it seems sloppy and not very scalable.
Is there any way to do this?
you can add a placeholder="type here" for your input and then in your css sheet add
input:not(:placeholder-shown)+div {
display: block;
}
.autocomplete {
display: none;
}
working pen:
https://codepen.io/yael-screenovate/pen/KKVxrrj
I have a huge problem with controlling css animations, I want them to start when the element is visible on the screen.
Precisely I'm making a site that has overall height like 8000 px, and the element that has an animation is far down, so to see this element I need to scroll the page down to it. The problem is that animation starts when page finish it's loading, so every time I scroll down to this element, the animation is already ending.
I've been looking for solution on stack-overflow, youtube and so on, but unfortunetly I have failed, every solution that I found and tried implementing didin't worked so I am close to give up on this...
How to make this animation run when the element gets visible?
Can someone help me with writing proper code in javascript?
A small digression, I am making my very first site, unfortunetly I haven't had any serious lessons of coding in html, css nor javascript/jquery in school or at university, so please forgive me some non-optimal class or id's names and solutions that are not proffesional. :P
Fortunetly html and css was easy to learn so I didn't have such problems like this, but javascript seems to be hard language :/
HTML element below:
<article id="pasek">
<div id="border_left" class="tekst"></div>
<div id="litery" class="tekst">
<p class="rok_założenia">2020</p>
<p class="tekst_rok_założenia">Rok założenia</p>
</div>
<div id="border_right" class="tekst"></div>
</article>
CSS code for article of id="pasek"
#pasek {
text-align: center;
background-color: #f4d03f;
}
p.rok_założenia {
font-size: 80px;
color: #154360;
padding-top: 40px;
padding-bottom: 5px;
}
p.tekst_rok_założenia {
font-size: 40px;
color: #154360;
padding-bottom: 40px;
}
div.tekst {
display: inline-block;
animation-name: fade-in;
animation-duration: 3s;
}
#keyframes fade-in {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#border_left {
border-right: 2px solid;
height: 120px;
border-right-color: white;
}
#border_right {
border-right: 2px solid;
height: 120px;
border-right-color: white;
}
#litery {
padding-left: 70px;
padding-right: 70px;
}
There is some article on CSS-Tricks how to do this with jQuery.
I modified a little your code example about IDs to make an article more flexible and I made live preview about it.
If you want to learn more about JavaScript check courses on udemy, freecodecamp, frontendmasters, pluralsight etc.
https://codesandbox.io/s/wizardly-noether-ed4pd
Javascript that I have tried:
Original:
<script>
$(document).ready(function(){
$('.dummy').viewportChecker({
callbackFunction: function(elem, action){
setTimeout(function(){
elem.html((action == "add") ? 'Callback with 500ms timeout: added class' : 'Callback with 500ms timeout: removed class');
},500);
},
scrollBox: ".scrollwrapper"
});
});
</script>
With my changes (classes names, id's)
<script>
$(document).ready(function(){
$('.tekst').viewportChecker({
callbackFunction: function(elem, action){
setTimeout(function(){
elem.html((action == "add") ? 'Callback with 500ms timeout: added class' : 'Callback with 500ms timeout: removed class');
},500);
},
scrollBox: "#pasek"
});
});
</script>
I've been also trying to implement those solutions:
https://jsbin.com/zuqexigepe/edit?html,output
http://jsfiddle.net/toby3105/749yxgdk/2/
I've got a setup where I'm using divs as buttons, and when they're clicked they add to ingredients to my burger.
JS:
<div id="ingredientBox">
<Ingredient
ref="ingredient"
v-for="item in currentIngredients"
v-on:increment="addToBurger(item)"
:item="item"
:lang="lang"
:ui-labels="uiLabels"
:key="item.ingredient_id">
</Ingredient>
</div>
With CSS:
.ingredient {
border: 1px solid #f5f5f28a;
padding: 0.8em;
width: 23vh;
height: 19vh;
background-color: green;
border-radius: 25px;
margin: 10px;
text-align: center;
}
I now want the div to react visually when clicked (maybe change color for like 0.2 seconds or something. I've looked around and only find info on how to change color permanently, is there a simple way of changing the color for just a brief moment?
You can use CSS keyframe animation to pull this off:
#keyframes animate-burger-button {
0% {
background: red;
}
50% {
background: yellow;
}
100% {
background: green;
}
}
#ingredientBox:active {
animation: animate-burger-button 0.8s forwards;
}
I would also add another note to try and use a button instead of a div, make accessibility a lot easier.
You could do something like
#ingredientBox:active {
color: red;
}
You could use setTimeout to add a class to the button and then remove it.
code:
buttonTrigger() {
element.classList.add('somesyle'); // add colour changing class to element
setTimeout(() => {
element.classList.remove('somestyle'); //remove the class after 0.2 seconds
}, 200)
}
EDIT
I was going to also suggest using CSS keyframes but #AlexanderKaran already suggested it. That is a good option too.
So I onClick I add a class to my container. When I select my button, I hide the content, add some transition to flip the container then display some info. Below is the code i'm using..
$('.btn-click').on('click', function() {
$('.content').toggleClass('hidden');
$('.card_container').delay('slow').toggleClass('class_active');
$('.info').toggleClass('display');
});
and the styles for the class are:
transform: rotateY(180deg);
transition: .7s ease-in-out;
background: black!important;
The issue is, the hide and show of .content class is too slow so I can see it before the .card_container has finished rotating. How can I delay the rotation. I tried .deley('slow') but didn't work?
I've added images below to show before & after,
Before:
After:
EDIT
So here's a fiddle for better understanding of my issue, sorry! https://jsfiddle.net/74vgvvhc/
As you can see, it a slight delay on the content (the text) when transitioning. I want the content to fade out, flip the card, then fade the other content in.
You can use fadeToggle with a delay
$('.container').on('click', function() {
$('.content').toggleClass('hide');
$('.container').toggleClass('card_active');
$('.info').delay(500).fadeToggle('display');
})
JsFiddle https://jsfiddle.net/kjarriho/74vgvvhc/7/
Hopefully this helps!
Just toggle the class '.info' to '.display' after a delay of 700 milliseconds as you have given the transition time 'transition: .7s ease-in-out;' for '.card_active' in css.
$('.container').on('click', function() {
$('.content').toggleClass('hide');
$('.container').toggleClass('card_active');
$('.info').delay(700).fadeToggle('display');
})
You can check the whole thing here https://jsfiddle.net/Rit_Design/eubrqnew/
You can toggle the info and card_active classes in a setTimeout after 700ms. This works, but isn't very elegant:
$('.container').on('click', function() {
$('.content').toggleClass('hide');
$('.container').toggleClass('card_active');
setTimeout(function() {
$('.info').toggleClass('display');
$('.container').toggleClass('card_active');
}, 700);
})
html,
body {
background: lime;
}
.container {
width: 150px;
height: 150px;
background: white;
border: 5px solid white;
}
.content {
display: block;
}
.info {
display: none;
}
.display {
display: block;
}
.hide {
display: none;
}
.card_active {
transform: rotateY(180deg);
transition: .7s ease-in-out;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<span class='content'>The content</span>
<span class='info'>The info</span>
</div>
I have noticed this 'issue' lately when trying some stuff.
Say I want to create a drop-down menu or an accordion.
This is my HTML:
<div class="wrapper" onclick="toggle()">
I want to be animated!
<div class="content">
Was I revealed in a timely fashion?
</div>
</div>
Stylesheets:
.wrapper {
background: red;
color: white;
height: auto;
padding: 12px;
transition: 2s height;
}
.content {
display: none;
}
.content.visible {
display: block;
}
JavaScript:
function toggle () {
var content = document.getElementsByClassName('content')[0];
var test = content.classList.contains('visible');
test ? content.classList.remove('visible') :
content.classList.add('visible');
}
I am trying to achieve a nice, smooth animation when we toggle the state of the content. Obviously this does not work. Anyone can explain to me why it does not work and how to fix it? Many thanks.
Link to the JSFiddle.
First things first, some CSS properties CANNOT be transitioned, display is one of them, additionally only discrete values can be transitioned, so height: auto cannot as well.
In your case the problem is with height: auto, while there are a few hacks for doing this, if you are just showing and hiding stuff, why not add, and use jQuery's toggle instead?
$(".content").toggle("slow");
jsFiddle
--EDIT (without jQuery)--
Because it's the auto that is giving us problems, we can use javascript to replace auto with a value in pixels and then use the css transition normally, if your content doesn't have a scroll, we can easily take that value from the scrollHeight property:
function toggle () {
var content = document.getElementsByClassName('content')[0];
var test = content.classList.contains('visible');
console.log(test);
if (test) {
content.classList.remove('visible')
content.style.height = "0px";
} else {
content.classList.add('visible');
content.style.height = content.scrollHeight + "px";
}
}
Css
.wrapper {
background: red;
color: white;
height: auto;
padding: 12px;
transition: 2s height;
}
.content {
height: 0px;
display: block;
transition: 2s height;
overflow: hidden;
} /* totally removed .content.visible */
jsFiddle