I'm attempting to use a form from codepen user Kyle Lavery sign up modal as a popup. I'm using <?php include"contact.html"; ?> in my index.html. My problem is that contact.html has overflow: hidden applied to the body which is conflicting with index.html. It's also possible that the styles applied to *, :before, :after are an issue but so far I can't tell. I tried putting a div around the entire form and it's parent divs and applying the styling from body to it but that cause the animation to shake slightly. Any suggestions on how to to apply this CSS while still keeping the animation smooth? My next thought is to use jQuery to only apply this CSS when the popup opens onclick. View the snippet full-screen to see the animation properly.
$(".close, .nope").on('click', function () {
$('.modal').addClass('hidden');
$('.open').addClass('active');
})
$(".open").on('click', function () {
$(this).removeClass('active');
$('.modal').removeClass('hidden');
})
*, :before, :after {
box-sizing: border-box;
margin: 0;
-webkit-transition: 0.4s;
transition: 0.4s;
}
body {
overflow: hidden;
}
.popup {
color: #FFF;
font-family: Roboto;
}
.modal {
height: 450px;
width: 650px;
margin: auto;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: .4s, box-shadow .3s .4s;
transition: .4s, box-shadow .3s .4s;
}
.modal.hidden {
box-shadow: none;
-webkit-transition: .4s, box-shadow 0s;
transition: .4s, box-shadow 0s;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.modal.hidden .form {
top: 100%;
}
.modal.hidden .invite {
top: -100%;
}
.modal.hidden .invite .close {
height: 0;
width: 0;
top: 0;
right: 0;
}
.form, .invite {
background: rgba(71, 71, 71, 0.8);
width: 50%;
height: 100%;
padding: 25px;
position: absolute;
top: 0;
left: 0;
}
input {
background: rgba(255, 255, 255, 0.15);
width: 100%;
padding: 8px;
margin: 15px 0;
border: none;
border-radius: 3px;
outline: none;
color: #FFF;
font-size: 20px;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 500px #7a7a7a inset;
-webkit-text-fill-color: #FFF;
}
label {
font: 500 14px Roboto;
color: #ffb66e;
}
button {
background: -webkit-linear-gradient(135deg, #f04527, #ffb66e);
background: linear-gradient(-45deg, #f04527, #ffb66e);
padding: 10px 20px;
border: none;
border-radius: 21px;
outline: none;
overflow: hidden;
position: absolute;
bottom: 30px;
left: 50%;
color: #FFF;
font-size: 18px;
cursor: pointer;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
button:hover:before {
left: 110%;
-webkit-transition: .3s;
transition: .3s;
}
button:before {
content: '';
background: rgba(255, 255, 255, 0.3);
height: 100%;
width: 65px;
position: absolute;
top: 0;
left: -100%;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
-webkit-transition: 0s;
transition: 0s;
}
.invite {
background: -webkit-linear-gradient(135deg, #f04527, #ffb66e);
background: linear-gradient(-45deg, #f04527, #ffb66e);
left: 50%;
}
h2 {
font: 30px Roboto;
text-transform: uppercase;
}
.close {
background: #474747;
height: 30px;
width: 30px;
border: 3px solid #FFF;
border-radius: 50%;
position: absolute;
top: -15px;
right: -15px;
cursor: pointer;
-webkit-transition: .4s .3s;
transition: .4s .3s;
}
.close:before, .close:after {
content: '';
background: #FFF;
height: 80%;
width: 3px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-ms-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
.close:after {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.open {
color: black;
height: 45px;
width: 150px;
padding: 10px 20px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.open.active {
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Daily UI #001 - Sign Up Modal</title>
<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/contact.css">
</head>
<body>
<div class="popup">
<a class="open active" title="open modal" href="#">Open Modal</a>
<div class="modal hidden">
<div class="form">
<form>
<label for="first-name" required="required">First Name</label>
<input id="first-name" type="text" />
<label for="last-name" required="required">Last Name</label>
<input id="last-name" type="text" />
<label for="email" required="required">Email Address</label>
<input id="email" type="email" />
<label for="message">Message</label>
<input id="message" type="text" />
<button type="button">Send</button>
</form>
</div>
<div class="invite">
<h2>Thank you for your interest. I look forward to speaking with you soon.</h2>
<div title="close" class="close"></div>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/contact.js"></script>
</body>
</html>
Related
I'm developing a new Pop Up-style ad for the site here of the company that I'm working on. But I'm in a different situation where I need instead of running the modal JUST when checked box, but that it always run when the page starts, I've tried too many ways, not successfully, because when I can get it to just show up (which is my goal), the close button no longer works.
I'm sending my code in ATTACHMENT, it's pretty clean, and it's only 25 lines, could you please explain this to me?
Thanks!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>TESTE MODAL</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheets/style.css" />
</head>
<body>
<!--
<script type="text/javascript">
$(document).ready(function()
{
$("#modal_chaves").modal("show");
});
</script>
-->
<label id="" class="" for="modal_chaves">Clique aqui</label>
<input type="checkbox" id="modal_chaves" />
<div id="modal_chaves" class="modal">
<div id="modal_chaves" class="modal-content">
<img src="assets/images/chaves-fotos-raras-4.jpg" />
</div>
<label class="modal-close" for="modal_chaves"></label>
</div>
</body>
</html>
CSS:
label{
margin:0; padding:0; border:0; background:transparent;
/*vertical-align: baseline;*/
}
/* init modal */
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
opacity: 0;
visibility: hidden;
-webkit-transition: all 999s 999s inherit;
transition: all 999s 999s inherit;
}
.modal-content {
padding: 10px;
max-width: 600px;
min-width: 360px;
max-height: 85%;
overflow: auto;
position: absolute;
top: 5%;
left: 50%;
z-index: 2;
opacity: 0;
border-radius: 3px;
background: transparent;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
-webkit-transition: all 999s inherit;
transition: all 999s inherit;
}
.modal-content img {
display: block;
width: 100%;
margin: 10px 0 0;
}
.modal-content p {
padding-top: 10px;
text-align: justify;
}
.modal-close {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
.modal-close:after {
content: "X";
float: right;
margin: 5px 5px 0 0;
width: 30px;
height: 30px;
position: relative;
z-index: 3;
text-align: center;
line-height: 30px;
cursor: pointer !important;
background-color: rgba(255,255,255,0.8);
border-radius: 20px;
box-shadow: 0 0 3px #000;
}
input[id*="modal_"] {
position: fixed;
left: -9999px;
top: 50%;
opacity: 0;
}
input[id*="modal_"]:checked + div.modal {
opacity: 1;
visibility: visible;
-webkit-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
input[id*="modal_"]:checked + div.modal .modal-content {
opacity: 1;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
-webkit-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
#media screen and (max-width: 767px) {
.modal-content {
padding: 10px 5%;
min-width: 88%;
}
}
I'm fairly new to front-end dev so please spare me...Anyway, for this codepen project I'm trying to get the animation where a stack of pancakes falls to the plate to activate when you click the button. It should be just an empty plate until the button is clicked.
Not sure why my JS code isn't working but if I target the pancake or stack class, the visuals still remain static.
HTML:
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<button onclick="onclick()">Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>
CSS (snippet):
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
JS:
$(function() {
$('button').onclick(function() {
$('.pancake').addClass('slideIn');
});
})
There are a bunch of things are not right, I've fixed them and marked them with FIX
$(function() {
$('button').click(function() {
// FIX: you forgot the dot
$('.pancake').addClass('slideIn');
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
* {
outline: none;
/*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */
}
body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
background: #FDF6D0;
display: flex;
align-items: center;
text-align: center;
}
.container{
position: absolute;
margin-top: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
/*pancakes falling*/
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
/* FIX: Pause the animation on start */
animation-play-state: paused;
}
/* FIX: Resume the animation when this class is added */
.slideIn {
animation-play-state: running;
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.p2 {
z-index: 2;
top: -7%;
left: 18%;
}
.p3 {
z-index: 3;
top: -14%;
left: 18%;
}
.p4 {
z-index: 4;
top: -21%;
left: 18%;
}
.p5 {
z-index: 5;
top: -28%;
left: 18%;
}
.p6 {
z-index: 6;
top: -35%;
left: 18%;
}
/*BUTTER*/
.shadow {
position: absolute;
z-index: 8;
top: -7%;
left: 42%;
height: 30%;
width: 15%;
margin: auto;
background: #FFDE68;
border-radius: 1px;
box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.top-b {
position: absolute;
z-index: 9;
top: -10%;
left: 45%;
height: 25%;
width: 10%;
margin: auto;
background: #FFEFB5;
border-radius: 1px;
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.shine{
position: absolute;
z-index: 10;
top: -4%;
left: 49%;
height: 7%;
width: 4%;
margin: auto;
background: #FFF;
border-radius: 1px;
transform: rotate(45deg);
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<!-- FIX: You forgot to import the jquery in CodePen! -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<!-- FIX: You don't need to bind function here since you've already done it in js.-->
<button>Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>
the class identifier is wrong it should be $(".pancake")
$(function() {
$('button').onclick(function() {
$('.pancake').addClass('slideIn');
});
})
javascript
You need to add the class identifier . in $(".pancake")
$(function() {
$('button').click(function() {
$('.pancake').addClass('slideIn');
});
})
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
* {
outline: none;
/*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */
}
body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
background: #FDF6D0;
display: flex;
align-items: center;
text-align: center;
}
.container{
position: absolute;
margin-top: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
/*pancakes falling*/
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.p2 {
z-index: 2;
top: -7%;
left: 18%;
}
.p3 {
z-index: 3;
top: -14%;
left: 18%;
}
.p4 {
z-index: 4;
top: -21%;
left: 18%;
}
.p5 {
z-index: 5;
top: -28%;
left: 18%;
}
.p6 {
z-index: 6;
top: -35%;
left: 18%;
}
/*BUTTER*/
.shadow {
position: absolute;
z-index: 8;
top: -7%;
left: 42%;
height: 30%;
width: 15%;
margin: auto;
background: #FFDE68;
border-radius: 1px;
box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.top-b {
position: absolute;
z-index: 9;
top: -10%;
left: 45%;
height: 25%;
width: 10%;
margin: auto;
background: #FFEFB5;
border-radius: 1px;
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.shine{
position: absolute;
z-index: 10;
top: -4%;
left: 49%;
height: 7%;
width: 4%;
margin: auto;
background: #FFF;
border-radius: 1px;
transform: rotate(45deg);
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<button>Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>
Use following js (i remove animation from css .pancake class and add transform: translateY(-1000px); to it)
function onClick() {
[...document.querySelectorAll('.pancake')]
.map(x=> x.classList.add('slideIn'));
}
function onClick() {
[...document.querySelectorAll('.pancake')].map(x=> x.classList.add('slideIn'));
}
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
* {
outline: none;
/*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */
}
body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
background: #FDF6D0;
display: flex;
align-items: center;
text-align: center;
}
.container{
position: absolute;
margin-top: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
/*pancakes falling*/
transform: translateY(-1000px);
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.p2 {
z-index: 2;
top: -7%;
left: 18%;
}
.p3 {
z-index: 3;
top: -14%;
left: 18%;
}
.p4 {
z-index: 4;
top: -21%;
left: 18%;
}
.p5 {
z-index: 5;
top: -28%;
left: 18%;
}
.p6 {
z-index: 6;
top: -35%;
left: 18%;
}
/*BUTTER*/
.shadow {
position: absolute;
z-index: 8;
top: -7%;
left: 42%;
height: 30%;
width: 15%;
margin: auto;
background: #FFDE68;
border-radius: 1px;
box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.top-b {
position: absolute;
z-index: 9;
top: -10%;
left: 45%;
height: 25%;
width: 10%;
margin: auto;
background: #FFEFB5;
border-radius: 1px;
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.shine{
position: absolute;
z-index: 10;
top: -4%;
left: 49%;
height: 7%;
width: 4%;
margin: auto;
background: #FFF;
border-radius: 1px;
transform: rotate(45deg);
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<button onclick="onClick()">Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>
I'm building a slider and I want to avoid jQuery.
So I'm trying to convert some jQuery code to vanilla JavaScript.
Here's the jQuery:
setInterval(function() {
var $curr = $('#slider1 input[type=radio]:checked');
var $next = $curr.next('input');
if(!$next.length) $next = $('#slider1 input[type=radio]').first();
$next.prop('checked', true);
}, 2000);
My code is below, but it's not working.
What's going wrong?
setInterval(() => {
let $curr = document.querySelectorAll('#slider1 input[type=radio]:checked'),
$next = $curr.nextSibling;
if (!$next.length) {
$next = document.querySelectorAll('#slider1 input[type=radio]').firstChild;
}
$next.setAttribute('checked', true);
}, 3000);
.csslider {
-moz-perspective: 1300px;
-ms-perspective: 1300px;
-webkit-perspective: 1300px;
perspective: 1300px;
display: inline-block;
text-align: left;
position: relative;
margin-bottom: 22px;
}
.csslider>input {
display: none;
}
.csslider>input:nth-of-type(10):checked~ul li:first-of-type {
margin-left: -900%;
}
.csslider>input:nth-of-type(9):checked~ul li:first-of-type {
margin-left: -800%;
}
.csslider>input:nth-of-type(8):checked~ul li:first-of-type {
margin-left: -700%;
}
.csslider>input:nth-of-type(7):checked~ul li:first-of-type {
margin-left: -600%;
}
.csslider>input:nth-of-type(6):checked~ul li:first-of-type {
margin-left: -500%;
}
.csslider>input:nth-of-type(5):checked~ul li:first-of-type {
margin-left: -400%;
}
.csslider>input:nth-of-type(4):checked~ul li:first-of-type {
margin-left: -300%;
}
.csslider>input:nth-of-type(3):checked~ul li:first-of-type {
margin-left: -200%;
}
.csslider>input:nth-of-type(2):checked~ul li:first-of-type {
margin-left: -100%;
}
.csslider>input:nth-of-type(1):checked~ul li:first-of-type {
margin-left: 0%;
}
.csslider>ul {
position: relative;
width: 820px;
height: 420px;
z-index: 1;
font-size: 0;
line-height: 0;
background-color: #3A3A3A;
border: 10px solid #3A3A3A;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.csslider>ul>li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
}
.csslider>ul>li.scrollable {
overflow-y: scroll;
}
.csslider>.navigation {
position: absolute;
bottom: -8px;
left: 50%;
z-index: 10;
margin-bottom: -10px;
font-size: 0;
line-height: 0;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider>.navigation>div {
margin-left: -100%;
}
.csslider>.navigation label {
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 50%;
margin: 0 4px;
padding: 4px;
background: #3A3A3A;
}
.csslider>.navigation label:hover:after {
opacity: 1;
}
.csslider>.navigation label:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -6px;
background: #71ad37;
border-radius: 50%;
padding: 6px;
opacity: 0;
}
.csslider>.arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider.inside .navigation {
bottom: 10px;
margin-bottom: 10px;
}
.csslider.inside .navigation label {
border: 1px solid #7e7e7e;
}
.csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after,
.csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after,
.csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after,
.csslider>input:nth-of-type(4):checked~.navigation label:nth-of-type(4):after,
.csslider>input:nth-of-type(5):checked~.navigation label:nth-of-type(5):after,
.csslider>input:nth-of-type(6):checked~.navigation label:nth-of-type(6):after,
.csslider>input:nth-of-type(7):checked~.navigation label:nth-of-type(7):after,
.csslider>input:nth-of-type(8):checked~.navigation label:nth-of-type(8):after,
.csslider>input:nth-of-type(9):checked~.navigation label:nth-of-type(9):after,
.csslider>input:nth-of-type(10):checked~.navigation label:nth-of-type(10):after,
.csslider>input:nth-of-type(11):checked~.navigation label:nth-of-type(11):after {
opacity: 1;
}
.csslider>.arrows {
position: absolute;
left: -31px;
top: 50%;
width: 100%;
height: 26px;
padding: 0 31px;
z-index: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.csslider>.arrows label {
display: none;
position: absolute;
top: -50%;
padding: 13px;
box-shadow: inset 2px -2px 0 1px #3A3A3A;
cursor: pointer;
-moz-transition: box-shadow 0.15s, margin 0.15s;
-o-transition: box-shadow 0.15s, margin 0.15s;
-webkit-transition: box-shadow 0.15s, margin 0.15s;
transition: box-shadow 0.15s, margin 0.15s;
}
.csslider>.arrows label:hover {
box-shadow: inset 3px -3px 0 2px #71ad37;
margin: 0 0px;
}
.csslider>.arrows label:before {
content: '';
position: absolute;
top: -100%;
left: -100%;
height: 300%;
width: 300%;
}
.csslider.infinity>input:first-of-type:checked~.arrows label.goto-last,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) {
display: block;
left: 0;
right: auto;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.csslider.infinity>input:last-of-type:checked~.arrows label.goto-first,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) {
display: block;
right: 0;
left: auto;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
/*#region MODULES */
/*#endregion */
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 2px;
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: rgba(74, 168, 0, 0.6);
}
ul,
ol {
padding-left: 40px;
}
html,
body {
height: 100%;
overflow-x: hidden;
text-align: center;
font: 400 100% 'Raleway', 'Lato';
background-color: #282828;
color: #CCC;
}
body {
padding-bottom: 60px;
}
h1 {
font-weight: 700;
font-size: 310%;
}
h2 {
font-weight: 400;
font-size: 120%;
color: #71AD37;
}
#slider1 {
margin: 20px;
font-family: 'Lato';
}
#slider1>ul>li:nth-of-type(3) {
background: red;
}
#slider1>input:nth-of-type(3):checked~ul #bg {
width: 80%;
padding: 22px;
-moz-transition: 0.5s 0.5s;
-o-transition: 0.5s 0.5s;
-webkit-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
#slider1>input:nth-of-type(3):checked~ul #bg div {
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
-webkit-transform: translate(0);
transform: translate(0);
-moz-transition: 0.5s 0.9s;
-o-transition: 0.5s 0.9s;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
#slider1>input:nth-of-type(6):checked~ul #dex-sign {
-moz-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.5s steps(85) forwards;
animation: sign-anim 3.5s 0.5s steps(85) forwards;
}
#bg {
color: #000;
padding: 22px 0;
position: absolute;
left: 0;
top: 16%;
height: 20%;
width: 0;
z-index: 10;
overflow: hidden;
}
#bg:before {
content: '';
position: absolute;
left: -1px;
top: 1px;
height: 100%;
width: 100%;
z-index: -1;
background: green;
-webkit-filter: blur(7px);
}
#bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 20;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
#bg div {
-moz-transform: translate(120%);
-ms-transform: translate(120%);
-o-transform: translate(120%);
-webkit-transform: translate(120%);
transform: translate(120%);
}
.scrollable p {
padding: 30px;
text-align: justify;
line-height: 140%;
font-size: 120%;
}
#center {
text-align: center;
margin-top: 25%;
}
#center a {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
}
/*___________________________________ LINK ___________________________________ */
a.nice-link {
position: relative;
color: #71ad37;
}
h1 a.nice-link:after {
border-bottom: 1px solid #a5ff0e;
}
a.nice-link:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #a5ff0e;
min-height: 100%;
width: 0;
max-width: 100%;
background: #3A3A3A;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
a.nice-link:hover {
color: #71ad37;
}
a.nice-link:hover:after {
width: 100%;
}
/*___________________________________ SIGN ___________________________________ */
#dex-sign {
width: 255px;
height: 84px;
position: absolute;
left: 33%;
top: 45%;
opacity: 0.7;
background: white 0 0 no-repeat;
}
#dex-sign:hover {
opacity: 1;
-webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg);
}
#-webkit-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#-moz-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
<div class="csslider infinity" id="slider1">
<input type="radio" name="slides" checked="checked" id="slides_1" />
<input type="radio" name="slides" id="slides_2" />
<input type="radio" name="slides" id="slides_3" />
<input type="radio" name="slides" id="slides_4" />
<input type="radio" name="slides" id="slides_5" />
<input type="radio" name="slides" id="slides_6" />
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
<li>Slide 5</li>
<li>Slide 6</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
<label class="goto-first" for="slides_1"></label>
<label class="goto-last" for="slides_6"></label>
</div>
<div class="navigation">
<div>
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
</div>
</div>
</div>
View on Codepen.
Edit
I came up with this solution:
setInterval(function() {
var currentID = document.querySelector('input[name="slides"]:checked').id;
var idNoArr = currentID.split('');
var intIdNo = parseInt(idNoArr[1]);
var nextIdNo = intIdNo + 1;
var NextId = idNoArr[0] + '' + nextIdNo;
var NextInput = document.getElementById(NextId);
if (!NextInput) {
NextId = idNoArr[0] + '_1';
}
document.getElementById(NextId).checked = true;
}, 1000);
There are several issues, including:
nextSibling isn't limited to inputs, and may even select white space between elements.
Elements don't have a length property.
Setting an attribute only sets the default state, not the current state.
I recommend selecting a list of all the inputs with querySelectorAll and then cycling through them using an index. To cycle the index within the appropriate bounds, I'm using the remainder of the current index divided by the total number of inputs.
Edit:
I see that your jQuery code determines which input is checked before changing the slide. This allows the automatic rotation to pick up where the user left off after they manually select a slide. I've modified my code accordingly.
You might also consider some functionality to stop or delay the automatic rotation if the user manually selects a slide. When someone clicks to a specific slide, I often choose to delay the automatic rotation for a few seconds or even have it stop completely. Just an idea.
Here's a working example:
// select node list of all inputs
var allInputs = document.querySelectorAll('#slider1 input[type=radio]');
// function to determine index of "checked" input in the list
function getCheckedIndex(list) {
for (let i = 0; i < list.length; i++) {
if (list[i].checked) {
return i;
}
}
}
// start the interval
setInterval(() => {
// determine index of "checked" input
let index = getCheckedIndex(allInputs);
// determine the next index
index = (index + 1) % allInputs.length;
// set the "checked" property
allInputs[index].checked = true;
}, 1000);
.csslider {
-moz-perspective: 1300px;
-ms-perspective: 1300px;
-webkit-perspective: 1300px;
perspective: 1300px;
display: inline-block;
text-align: left;
position: relative;
margin-bottom: 22px;
}
.csslider>input {
display: none;
}
.csslider>input:nth-of-type(10):checked~ul li:first-of-type {
margin-left: -900%;
}
.csslider>input:nth-of-type(9):checked~ul li:first-of-type {
margin-left: -800%;
}
.csslider>input:nth-of-type(8):checked~ul li:first-of-type {
margin-left: -700%;
}
.csslider>input:nth-of-type(7):checked~ul li:first-of-type {
margin-left: -600%;
}
.csslider>input:nth-of-type(6):checked~ul li:first-of-type {
margin-left: -500%;
}
.csslider>input:nth-of-type(5):checked~ul li:first-of-type {
margin-left: -400%;
}
.csslider>input:nth-of-type(4):checked~ul li:first-of-type {
margin-left: -300%;
}
.csslider>input:nth-of-type(3):checked~ul li:first-of-type {
margin-left: -200%;
}
.csslider>input:nth-of-type(2):checked~ul li:first-of-type {
margin-left: -100%;
}
.csslider>input:nth-of-type(1):checked~ul li:first-of-type {
margin-left: 0%;
}
.csslider>ul {
position: relative;
width: 820px;
height: 420px;
z-index: 1;
font-size: 0;
line-height: 0;
background-color: #3A3A3A;
border: 10px solid #3A3A3A;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.csslider>ul>li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
}
.csslider>ul>li.scrollable {
overflow-y: scroll;
}
.csslider>.navigation {
position: absolute;
bottom: -8px;
left: 50%;
z-index: 10;
margin-bottom: -10px;
font-size: 0;
line-height: 0;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider>.navigation>div {
margin-left: -100%;
}
.csslider>.navigation label {
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 50%;
margin: 0 4px;
padding: 4px;
background: #3A3A3A;
}
.csslider>.navigation label:hover:after {
opacity: 1;
}
.csslider>.navigation label:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -6px;
background: #71ad37;
border-radius: 50%;
padding: 6px;
opacity: 0;
}
.csslider>.arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider.inside .navigation {
bottom: 10px;
margin-bottom: 10px;
}
.csslider.inside .navigation label {
border: 1px solid #7e7e7e;
}
.csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after,
.csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after,
.csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after,
.csslider>input:nth-of-type(4):checked~.navigation label:nth-of-type(4):after,
.csslider>input:nth-of-type(5):checked~.navigation label:nth-of-type(5):after,
.csslider>input:nth-of-type(6):checked~.navigation label:nth-of-type(6):after,
.csslider>input:nth-of-type(7):checked~.navigation label:nth-of-type(7):after,
.csslider>input:nth-of-type(8):checked~.navigation label:nth-of-type(8):after,
.csslider>input:nth-of-type(9):checked~.navigation label:nth-of-type(9):after,
.csslider>input:nth-of-type(10):checked~.navigation label:nth-of-type(10):after,
.csslider>input:nth-of-type(11):checked~.navigation label:nth-of-type(11):after {
opacity: 1;
}
.csslider>.arrows {
position: absolute;
left: -31px;
top: 50%;
width: 100%;
height: 26px;
padding: 0 31px;
z-index: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.csslider>.arrows label {
display: none;
position: absolute;
top: -50%;
padding: 13px;
box-shadow: inset 2px -2px 0 1px #3A3A3A;
cursor: pointer;
-moz-transition: box-shadow 0.15s, margin 0.15s;
-o-transition: box-shadow 0.15s, margin 0.15s;
-webkit-transition: box-shadow 0.15s, margin 0.15s;
transition: box-shadow 0.15s, margin 0.15s;
}
.csslider>.arrows label:hover {
box-shadow: inset 3px -3px 0 2px #71ad37;
margin: 0 0px;
}
.csslider>.arrows label:before {
content: '';
position: absolute;
top: -100%;
left: -100%;
height: 300%;
width: 300%;
}
.csslider.infinity>input:first-of-type:checked~.arrows label.goto-last,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) {
display: block;
left: 0;
right: auto;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.csslider.infinity>input:last-of-type:checked~.arrows label.goto-first,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) {
display: block;
right: 0;
left: auto;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 2px;
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: rgba(74, 168, 0, 0.6);
}
ul,
ol {
padding-left: 40px;
}
html,
body {
height: 100%;
overflow-x: hidden;
text-align: center;
font: 400 100% 'Raleway', 'Lato';
background-color: #282828;
color: #CCC;
}
body {
padding-bottom: 60px;
}
h1 {
font-weight: 700;
font-size: 310%;
}
h2 {
font-weight: 400;
font-size: 120%;
color: #71AD37;
}
#slider1 {
margin: 20px;
font-family: 'Lato';
}
#slider1>ul>li:nth-of-type(3) {
background: red;
}
#slider1>input:nth-of-type(3):checked~ul #bg {
width: 80%;
padding: 22px;
-moz-transition: 0.5s 0.5s;
-o-transition: 0.5s 0.5s;
-webkit-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
#slider1>input:nth-of-type(3):checked~ul #bg div {
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
-webkit-transform: translate(0);
transform: translate(0);
-moz-transition: 0.5s 0.9s;
-o-transition: 0.5s 0.9s;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
#slider1>input:nth-of-type(6):checked~ul #dex-sign {
-moz-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.5s steps(85) forwards;
animation: sign-anim 3.5s 0.5s steps(85) forwards;
}
#bg {
color: #000;
padding: 22px 0;
position: absolute;
left: 0;
top: 16%;
height: 20%;
width: 0;
z-index: 10;
overflow: hidden;
}
#bg:before {
content: '';
position: absolute;
left: -1px;
top: 1px;
height: 100%;
width: 100%;
z-index: -1;
background: green;
-webkit-filter: blur(7px);
}
#bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 20;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
#bg div {
-moz-transform: translate(120%);
-ms-transform: translate(120%);
-o-transform: translate(120%);
-webkit-transform: translate(120%);
transform: translate(120%);
}
.scrollable p {
padding: 30px;
text-align: justify;
line-height: 140%;
font-size: 120%;
}
#center {
text-align: center;
margin-top: 25%;
}
#center a {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
}
/*___________________________________ LINK ___________________________________ */
a.nice-link {
position: relative;
color: #71ad37;
}
h1 a.nice-link:after {
border-bottom: 1px solid #a5ff0e;
}
a.nice-link:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #a5ff0e;
min-height: 100%;
width: 0;
max-width: 100%;
background: #3A3A3A;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
a.nice-link:hover {
color: #71ad37;
}
a.nice-link:hover:after {
width: 100%;
}
/*___________________________________ SIGN ___________________________________ */
#dex-sign {
width: 255px;
height: 84px;
position: absolute;
left: 33%;
top: 45%;
opacity: 0.7;
background: white 0 0 no-repeat;
}
#dex-sign:hover {
opacity: 1;
-webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg);
}
#-webkit-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#-moz-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
<div class="csslider infinity" id="slider1">
<input type="radio" name="slides" id="slides_1">
<input type="radio" name="slides" id="slides_2">
<input type="radio" name="slides" id="slides_3" checked>
<input type="radio" name="slides" id="slides_4">
<input type="radio" name="slides" id="slides_5">
<input type="radio" name="slides" id="slides_6">
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
<li>Slide 5</li>
<li>Slide 6</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
<label class="goto-first" for="slides_1"></label>
<label class="goto-last" for="slides_6"></label>
</div>
<div class="navigation">
<div>
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
</div>
</div>
</div>
I'm trying to get my circle loader running. But didn't found how to get the animation running when clicking the Try it button.
Any ideas?
<div class="chart-skills">
<div class="liElem" id="eins"></div>
</div>
<div class="chart-skills" id="bottom">
<div class="liElem" id="zwei"></div>
</div>
<button onclick="myFunction()">Try it</button>
Here the code: https://jsfiddle.net/pzc41skn/
Here is how you can achieve an animation on clicking of the button:
function myFunction() {
$('.liElem').remove();
$(".chart-skills").html('<div class="liElem" id="eins"></div>');
}
body {
font: normal 16px/1.5 'Roboto', sans-serif;
padding: 130px 0 0 0;
background: #f1f1f1;
}
/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-skills {
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.chart-skills *,
.chart-skills::before {
box-sizing: border-box;
}
/* CHART-SKILLS STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-skills {
position: relative;
width: 350px;
height: 175px;
overflow: hidden;
}
.chart-skills::before,
.chart-skills::after {
position: absolute;
}
.chart-skills::before {
content: '';
width: inherit;
height: inherit;
border: 45px solid rgba(211, 211, 211, .3);
border-bottom: none;
border-top-left-radius: 175px;
border-top-right-radius: 175px;
}
.chart-skills::after {
content: '';
left: 50%;
bottom: 10px;
transform: translateX(-50%);
font-size: 1.1rem;
font-weight: bold;
color: cadetblue;
}
.chart-skills .liElem {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: inherit;
border: 45px solid;
border-top: none;
border-bottom-left-radius: 175px;
border-bottom-right-radius: 175px;
transform-origin: 50% 0;
transform-style: preserve-3d;
backface-visibility: hidden;
animation-fill-mode: forwards;
animation-duration: .4s;
animation-timing-function: linear;
}
.chart-skills #eins {
z-index: 4;
border-color: green;
animation-name: rotate-one;
animation-delay: .4s;
}
.chart-skills #zwei {
z-index: 4;
border-color: green;
animation-name: rotate-one;
animation-delay: .8s;
}
#keyframes rotate-one {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
/**
* 32% => 57.6deg
* 57.6 + 21.6 => 79.2deg
*/
}
}
#bottom {
transform: scale(-1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart-skills">
<div class="liElem" id="eins"></div>
</div>
<div class="chart-skills" id="bottom">
<div class="liElem" id="zwei"></div>
</div>
<button onclick="myFunction()">Try it</button>
I'm using Navigation using a plugin called Hamburgler and it works fantastic on desktop. However, on mobile, the navigation appears, but it can't be clicked.
The coding for the site I'm trying to edit is a bit janky, my apologies.
Navigation coding:
JS
<script type="text/javascript">
// HAMBURGLERv2
function togglescroll() {
$('body').on('touchstart', function(e) {
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
});
}
$(document).ready(function() {
togglescroll()
$(".icon").click(function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$("body").toggleClass("noscroll");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
// PUSH ESC KEY TO EXIT
$(document).keydown(function(e) {
if (e.keyCode == 27) {
$(".mobilenav").fadeOut(500);
$(".top-menu").removeClass("top-animate");
$("body").removeClass("noscroll");
$(".mid-menu").removeClass("mid-animate");
$(".bottom-menu").removeClass("bottom-animate");
}
});
</script>
HTML
<a href="javascript:void(0)" class="icon">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</a>
<div class="mobilenav">
<div class="insidenav">
2016 Salary Guide
2015 Salary Guide
2014 Salary Guide
</div>
</div>
CSS
#navigation {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
background-color: #fff;
z-index: 994;
}
.top-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 999 !important;
}
.mid-animate {
opacity: 0;
z-index: 999 !important;
}
.bottom-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
z-index: 999 !important;
}
.top-menu {
top: 5px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.mid-menu {
top: 13px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.bottom-menu {
top: 21px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.menui {
background: #000;
transition: 0.6s ease;
transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
margin-top: 10px;
position: absolute;
z-index: 999 !important;
}
.icon {
z-index: 999 !important;
display: block;
padding: 9px;
height: 32px;
width: 32px;
position: fixed;
right: 30px;
top: 15px;
}
.mobilenav {
font-family: inherit;
top: 0;
left: 0;
z-index: 995 !important;
display: none;
position: fixed;
width: 100%;
height: 100%;
background: #FFF;
opacity: 0.98;
}
.insidenav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
width: 100%;
max-width: 300px;
}
a.inside {
z-index: 2147483647;
display: block;
width: 300px;
height: 70px;
background-color: #dd152e;
color: #FFF;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
text-align: center;
line-height: 70px;
text-transform: uppercase;
-webkit-transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-ms-transition: background .5s ease-in-out;
-o-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
margin-bottom: 50px;
text-decoration: none;
}
a.inside:hover {
background-color: #c21228;
}
Here's the site itself:
http://salaryguide.diamondbacklab.com
Sorry, I know it's a lot of code to look at. Any help would be super appreciated!
You need to remove these lines from JavaScript:
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
to make it work. Because preventDefault() also prevents standard browser behaviour.