I made this application with a button ("descrição") to open a "gray background" with one text box and two buttons:
"salvar" (save button) and "cancelar" (cancel button), you can only save and close it if you type something inside the box or click on "cancelar", for the first time it works perfectly, but when you start again it doesn't open the buttons or the text box, and it stays on the "gray background".
I'm still new to HTML, CSS, and JS.
$('#headerR').on('click', function() {
$('#overlay, #overlay-back').fadeIn(500);
$(".text-hidden").toggleClass("text");
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
});
function validation() {
if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
alert("Preencha a Descrição!");
} else {
$(function() {
$("#save").click(function() {
$(".text-hidden").toggleClass("text");
$('#overlay, #overlay-back').fadeOut(500);
});
});
}
}
html, body {
width: 100%;
height: 100%;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none;
}
#overlay {
position: absolute;
top: 10;
left: 50;
width: 100%;
height: 100%;
z-index: 10;
display: none;
}
.text-hidden {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .7s ease;
width: 0px;
height: 0px;
top: 50%;
left: 50%;
}
.saving {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
right: 8%;
background: Green;
color: white;
}
.canceling {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
left: 5%;
background: Red;
color: white;
}
.text {
transform: scaleX(1);
width: 300px;
height: 150px;
position: absolute;
top: 20%;
left: 37%;
}
.myButton {
transform: scaleX(1);
width: 80px;
height: 80px;
}
<p>
<button id="headerR" type="button">Descrição</button>
</p>
<div id="overlay-back"></div>
<div id="overlay">
<span><script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
type="text/javascript">
</script>
<textarea id="desc" type="textarea" class="text-hidden">
</textarea> <button id="save" class="saving" onclick=
"validation();"><span><span>Salvar</span> <button id="cancel"
class="canceling" onclick=
"validation();">Cancelar</button></span></button></span>
</div>
If you wanna only fix this bug, try this:
$('#headerR').on('click', function() {
$('#overlay, #overlay-back').fadeIn(500);
$(".text-hidden").toggleClass("text");
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
});
function validation() {
if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
alert("Preencha a Descrição!");
} else {
$(function() {
$(".text-hidden").toggleClass("text");
$('#overlay, #overlay-back').fadeOut(500);
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
});
}
}
html, body {
width: 100%;
height: 100%;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none;
}
#overlay {
position: absolute;
top: 10;
left: 50;
width: 100%;
height: 100%;
z-index: 10;
display: none;
}
.text-hidden {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .7s ease;
width: 0px;
height: 0px;
top: 50%;
left: 50%;
}
.saving {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
right: 8%;
background: Green;
color: white;
}
.canceling {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
left: 5%;
background: Red;
color: white;
}
.text {
transform: scaleX(1);
width: 300px;
height: 150px;
position: absolute;
top: 20%;
left: 37%;
}
.myButton {
transform: scaleX(1);
width: 80px;
height: 80px;
}
<p>
<button id="headerR" type="button">Descrição</button>
</p>
<div id="overlay-back"></div>
<div id="overlay">
<span><script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
type="text/javascript">
</script>
<textarea id="desc" type="textarea" class="text-hidden">
</textarea> <button id="save" class="saving" onclick=
"validation();"><span><span>Salvar</span> <button id="cancel"
class="canceling" onclick=
"validation();">Cancelar</button></span></button></span>
</div>
you need to change your JavaScript code as this Fiddle
$('#headerR').on('click', function() {
$('#overlay').fadeIn(500);
$('#overlay-back').fadeIn(500);
});
$(function() {
$("#save").click(function() {
$('#overlay').fadeOut(500);
$('#overlay-back').fadeOut(500);
});
});
function validation() {
if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
alert("Preencha a Descrição!");
}
}
html,
body {
width: 100%;
height: 100%;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none;
}
#overlay {
position: absolute;
top: 10;
left: 50;
width: 100%;
height: 100%;
z-index: 10;
display: none;
}
.text-hidden {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .7s ease;
width: 0px;
height: 0px;
top: 50%;
left: 50%;
}
.saving {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
right: 8%;
background: Green;
color: white;
}
.canceling {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
left: 5%;
background: Red;
color: white;
}
.text {
transform: scaleX(1);
width: 300px;
height: 150px;
position: absolute;
top: 20%;
left: 37%;
}
.myButton {
transform: scaleX(1);
width: 80px;
height: 80px;
}
<p>
<button id="headerR" type="button">Descrição</button>
</p>
<div id="overlay-back"></div>
<div id="overlay"> <span><script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
type="text/javascript">
</script>
<textarea id="desc" type="textarea" class="text">
</textarea> <button id="save" class="saving myButton" onclick=
"validation();"><span><span>Salvar</span>
<button id="cancel" class="canceling myButton" onclick="validation();">Cancelar</button>
</span>
</button>
</span>
</div>
Related
I have a loading element that I want to display on the click of a certain button. I have tried various methods including updating the visibility and display, as well as adding a "show" classList to the div onclick (current code). Nothing has worked so far and I am desperate. I would really appreciate any help. Thanks :)
document.getElementById('text-generate-button').onclick = () => {
parent.postMessage({
pluginMessage: {
type: 'placeholder-frame'
}
}, '*')
const loader = document.getElementById('loader');
loader.classList.add("show")
}
.loader {
opacity: 0;
background: #ffffff;
/* background: radial-gradient(#222, #000); */
bottom: 0;
left: 0;
right: 0;
top: 0;
/* z-index: 99999; */
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
}
.loader.show {
background: #ffffff;
/* background: radial-gradient(#222, #000); */
bottom: 0;
left: 0;
right: 0;
top: 0;
/* z-index: 99999; */
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
}
.loader-inner {
bottom: 0;
height: auto;
left: 0;
margin: auto;
position: relative;
right: 0;
top: 0;
width: 100px;
padding: 8px;
}
.loader-line-wrap {
animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
box-sizing: border-box;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
width: 100px;
}
.loader-line {
border: 4px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap:nth-child(1) {
animation-delay: -50ms;
}
.loader-line-wrap:nth-child(2) {
animation-delay: -100ms;
}
.loader-line-wrap:nth-child(3) {
animation-delay: -150ms;
}
.loader-line-wrap:nth-child(4) {
animation-delay: -200ms;
}
.loader-line-wrap:nth-child(5) {
animation-delay: -250ms;
}
.loader-line-wrap:nth-child(1) .loader-line {
border-color: #EB6A6F;
height: 90px;
width: 90px;
top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
border-color: #F6BA48;
height: 76px;
width: 76px;
top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
border-color: #B5D643;
height: 62px;
width: 62px;
top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
border-color: #50CFD4;
height: 48px;
width: 48px;
top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
border-color: #9665D4;
height: 34px;
width: 34px;
top: 35px;
}
#keyframes spin {
0%,
15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div class="footer">
<div class="loader">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>
I didn't dig deep whether there is a better way
but one thing you can do is in your HTML set
<div class="loader" id="loader>
and in your JS
loader.classList.toggle("loader")
here is running version : https://jsbin.com/boromarugo/edit?html,css,js,output
there should be cleaner way but you get the idea
I'm using a code snippet from a website for a circular progress bar, but now I am stuck. I can't solve how to stop progress bar at particular point (let's say 73% or 90%). How can I achieve that?
const numb = document.querySelector(".numb");
let counter = 0;
setInterval(() => {
if (counter == 100) {
clearInterval();
} else {
counter += 1;
numb.textContent = counter + "%";
}
}, 80);
.circular {
height: 150px;
width: 150px;
position: relative;
}
.circular .inner,
.circular .outer,
.circular .circle {
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .inner {
top: 36%;
left: 37%;
height: 117px;
width: 117px;
margin: -40px 0 0 -40px;
background-color: #ffffff;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .circle {
z-index: 1;
box-shadow: none;
}
.circular .numb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.circular .bar {
position: absolute;
height: 100%;
width: 100%;
background: #F2F5F5;
-webkit-border-radius: 100%;
clip: rect(0px, 150px, 150px, 75px);
}
.circle .bar .progress {
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 75px, 150px, 0px);
}
.circle .bar .progress,
.dot span {
background: #4158d0;
}
.circle .left .progress {
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100% {
transform: rotate(180deg);
}
}
.circle .right {
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress {
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100% {
transform: rotate(180deg);
}
}
.circle .dot {
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 16px;
height: 16px;
border-radius: 100%;
}
#keyframes dot {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<div class="circular">
<div class="inner"></div>
<div class="outer"></div>
<div class="numb">
0%
</div>
<div class="circle">
<div class="dot">
<span></span>
</div>
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
Maybe you could say if(counter == 73) { animation.pause() }
const numb = document.querySelector(".numb");
let counter = 0;
setInterval(()=>{
if(counter == 73){
clearInterval();
}else{
counter+=1;
numb.textContent = counter + "%";
}
}, 80);
.circular{
height: 150px;
width: 150px;
position: relative;
}
.circular .inner, .circular .outer, .circular .circle{
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
}
.circular .inner{
top: 36%;
left: 37%;
height: 117px;
width: 117px;
margin: -40px 0 0 -40px;
background-color: #ffffff;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.circular .circle{
z-index: 1;
box-shadow: none;
}
.circular .numb{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #F2F5F5;
-webkit-border-radius: 100%;
clip: rect(0px, 150px, 150px, 75px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 75px, 150px, 0px);
}
.circle .bar .progress, .dot span{
background: #4158d0;
}
.circle .left .progress{
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100%{
transform: rotate(180deg);
}
}
.circle .right{
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress{
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100%{
transform: rotate(80deg);
}
}
.circle .dot{
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 16px;
height: 16px;
border-radius: 100%;
}
#keyframes dot{
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<div class="circular">
<div class="inner"></div>
<div class="outer"></div>
<div class="numb">
0%
</div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
So I have this hamburger menu on the right side of the navbar which when clicked should pop open overlay and be full screen black and un-scrollable(just the overlay) but right now when it's clicked is scrollable and not full screen black, I don't know what went wrong, any help would be really appreciated, thanx!
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.5);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
background-color: black;
color: white;
height: 100%;
width: 100%;
position: fixed;
transition: opacity 0.2s ease-in-out;
z-index: 1001;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
}
.menu-overlay.open {
opacity: 1;
visibility: visible;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
Home
About
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
See adjustments to the CSS inline below, but here are the major points:
The overlay should not be using Flexbox. If you want the layout within the overlay to use Flexbox, then set that up on the elements it contains.
The element itself should not be in the HTML as a child of the main content if you are going to size it using percents, because then it will only be as big as the parent. Instead, use vh and vw (Viewport Height and Viewport Width) units.
Set the top and left CSS properties to position the overlay at the top-left of the screen.
Don't use visibility to hide the overlay, use display:none and then display:block to bring it back.
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
display:block;
z-index: 1001;
background-color: black;
color: white;
}
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.5);
}
.menu.open .menu-circle {
transform: scale(60);
}
<div class="menu-overlay">
Home
About
</div>
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Thanks to #Scott Marcus for fixing the layout but the overflow was still not working so I added a toggle-class in js, It works just fine but lemme know otherwise if it contains any DOM errors. Cheers!
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.no-scroll{
overflow: hidden;
}
Hello I'm trying to simulate flip countdown timer But when I wrote the code I discovered that there was a difference between:
#keyframes zindex {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
and:
#keyframes zindex {
0% {
z-index: 2;
}
100% {
z-index: 4;
}
}
That when I remove 5% the problem will occurred so I'd like to know why this problem ocurres.
Here my code:
body {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
}
.wrap {
width: 50px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0px 0px -25px;
}
ul#initial {
list-style-type: none;
width: 100%;
height: 100%;
padding: 0px;
position: relative;
}
ul#initial li {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
}
.first {
z-index: 3;
}
.second {
-webkit-animation: zindex 1s 1s linear both;
}
#keyframes zindex {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
.flipthis {
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
background: #bbb;
transform-origin: 50% 100%;
color: #fff;
animation: flipthis 1s linear;
}
.flipthis-down {
height: 50px;
width: 50px;
background: #0034ff;
color: #fff;
overflow: hidden;
position: absolute;
top: auto;
left: 0;
bottom: 0;
}
.digit {
height: 200%;
font-size: 80px;
position: absolute;
width: 50px;
text-align: center;
text-shadow:0px 1px 2px rgba(224,224,224,0.87);
}
.flipthis-down .digit {
bottom: 0;
}
#-webkit-keyframes flipthis {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-90deg);
}
}
.flipthis2 {
height: 50px;
width: 50px;
background: #00ff82;
color: #fff;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.flipthis2-down {
height: 50px;
width: 50px;
background: #00f760;
color: #fff;
-webkit-transform-origin: 50% 0%;
overflow: hidden;
position: absolute;
top: auto;
left: 0;
bottom: 0;
animation: flipthis-down 1s 1s linear;
}
.flipthis2-down .digit {
bottom: 0;
}
#-webkit-keyframes flipthis-down {
0% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
a.derp {
-webkit-perspective: 2000px;
display: block;
width: 50px;
height: 100px;
}
<div class="wrap">
<ul id="initial">
<li class="first">
<a class="derp">
<div class="flipthis">
<div class="digit">1</div>
</div>
<div class="flipthis-down">
<div class="digit">1</div>
</div>
</a>
</li>
<li class="second">
<a class="derp">
<div class="flipthis2">
<div class="digit">2</div>
</div>
<div class="flipthis2-down">
<div class="digit">2</div>
</div>
</a>
</li>
</ul>
</div>
The first example reaches the final value of '4' after only 5% of the animation is done, the second example increases the z-index linearly over the specified animation duration.
Adding multiple '%' values tells your browser at what point in time what value should be reached, so your first animation is basically already finished after 5% of the time has passed.
Hi i want to put this code in my website, but when i try to click on the menu button in Firefox it pops up then the background changes from the normal color to white (or is gone).
http://jsfiddle.net/Xroad/3pn2pkt6/19/
$('.toggle-menu').click(function (e) {
e.preventDefault();
$('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu');
$('.circle').toggleClass('Opacity');
$('#overlay-menu').delay(5000).toggleClass('Opacity');
$('.circle').toggleClass('open');
});
html, body {
height: 100%;
}
body {
background: #fffdee;
}
.circle {
position: fixed;
top: -50%;
left: -50%;
height: 50%;
width: 50%;
border-radius: 50%;
background: #98694d;
opacity: 0;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 1;
}
.open {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#overlay-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
color: black;
opacity: 0;
z-index: 4;
}
h4.toggle-menu {
position: fixed;
top: 20px;
right: 70px;
color: black;
cursor: pointer;
z-index: 5;
}
.Opacity {
opacity: 1 !important;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle"></div>
<nav id="home-menu" class="menu">
<h4 class="toggle-menu">Menu</h4>
</nav>
<div id="overlay-menu"><p>MY CONTENT</p></div>
This works: (small change in the .open-class (added the opacity to it)), and removal of one line in the JS. Tested in Firefox and Chrome
$('.toggle-menu').click(function (e) {
e.preventDefault();
$('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu');
//$('.circle').toggleClass('Opacity');
$('#overlay-menu').delay(5000).toggleClass('Opacity');
$('.circle').toggleClass('open');
});
html, body {
height: 100%;
}
body {
background: #fffdee;
}
.circle {
position: fixed;
top: -50%;
left: -50%;
height: 50%;
width: 50%;
border-radius: 50%;
background: #98694d;
opacity: 0;
-webkit-transition-duration: 0.5s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 1;
}
.open {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
opacity: 1;
}
#overlay-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
color: black;
opacity: 0;
z-index: 4;
}
h4.toggle-menu {
position: fixed;
top: 20px;
right: 70px;
color: black;
cursor: pointer;
z-index: 5;
}
.Opacity {
opacity: 1 !important;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle"></div>
<nav id="home-menu" class="menu">
<h4 class="toggle-menu">Menu</h4>
</nav>
<div id="overlay-menu"><p>MY CONTENT</p></div>