How do I manipulate an element I just added with jQuery?

How do I manipulate an element I just added with jQuery? - javascript

I have a screen that loads a new template using jQuery's .load() when the user clicks a button, to provide with more options, a transition. This happens on the fly and it implies adding new HTML to the page, which is not there when the script happens to be loaded:
(function($) {
$('.go').on("click", function() {
/* Poor man's reactivity. */
var shouldReact = false;
try {
$('.top-part').animate({
opacity: 0,
}, {
step: function() {
$(this).css('transform', 'translate3d(0,-20px,0)');
},
duration: 'slow'
}, 'swing');
$('.go').animate({
opacity: 1,
}, {
step: function() {
$(this).css({
'height': '100%',
'width': '100%',
'margin-top': '0',
'z-index': '0',
'background-color': '#0cff9b'
});
},
duration: 1500
}, 'swing');
$('.go-text').animate({
opacity: 0,
}, {
step: function() {
$(this).css('transition', 'all 1s ease-out');
}
});
shouldReact = true;
} catch (err) {
console.log(err.message);
shouldReact = false;
}
if (shouldReact == true) {
$(this).css({
'cursor': 'initial'
});
$(this).unbind("click");
$(this).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
$('.welcome_screen').css({
'background-color': '#0cff9b'
});
$('.bottom-part').remove();
render_screen__first_basic_settings();
});
} else {
console.log("Stop! No need to react.");
}
});
function genesis(screen_name, screen_selector, screen_contents, the_old) {
let handler = '.welcome_screen';
$(handler).prepend(screen_name);
$(screen_selector).load(ABSPATH + screen_contents);
$(the_old).remove();
}
/* Parts */
function render_screen__first_basic_settings() {
/*
Each render of a screen must have a genesis, the template which it builds from and a
cleanse / kill. We remove the old, to make space for the new.
*/
genesis('<div id="screen-1" style="z-index:2;"></div>',
'#screen-1',
'/js/setup_theme_templates/basic_settings.html',
'.top-part');
// This is where I should be able to access the template, but I can't.
}
})(jQuery);
/* Welcome Screen & Setup Experience */
.welcome_screen {
display: flex;
background-color: white;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
}
#keyframes fadeInFromBottom {
0% {
opacity: 0;
transform: translate3d(0, 10px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInFromTop {
0% {
opacity: 0;
transform: translate3d(0, -15px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes marginAdd {
from {
margin-bottom: 0;
}
to {
margin-bottom: 48px;
}
}
.welcome_screen .top-part {
will-change: margin;
display: flex;
z-index: 2;
transition: margin 0.5s ease, transform 0.35s ease;
animation: 0.8s ease 0s marginAdd;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.welcome_screen .bottom-part {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
position: absolute;
}
.welcome_screen .welcome-text {
display: inline-flex;
opacity: 0;
font-size: 72px;
animation: 1s ease 0s 1 fadeInFromTop;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.welcome_screen .more-text {
display: inline-flex;
opacity: 0;
font-size: 72px;
animation: 1s ease 0s 1 fadeInFromBottom;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.welcome_screen .bottom-part {
opacity: 0;
animation: 1s ease 0s 1 fadeInFromBottom;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.welcome_screen .go {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 600px;
width: 480px;
background-color: #fdff60;
text-transform: uppercase;
font-family: Helvetica;
letter-spacing: 2px;
font-size: 14px;
font-weight: 700;
margin-top: 220px;
transition: all 0.5s ease;
}
.welcome_screen .go .go-text {
position: absolute;
}
.welcome_screen .go:hover {
cursor: pointer;
width: 420px;
height: 620px;
}
.welcome_screen .close {
position: absolute;
top: 0;
left: 0;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
#screen .basic_title {
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="welcome_screen">
<div class="top-part">
<p class="welcome-text">Welcome!</p>
<p class="more-text"> Shall we set this up?</p>
</div>
<div class="bottom-part">
<div data-tilt data-tilt-speed="150" data-tilt-reset="false" data-tilt-max="10" data-tilt-perspective="250" class="go">
<p class="go-text">Let's Do It!</p>
</div>
</div>
</div>
The template I'm loading is:
<div id="basic-settings-template">
<style type="text/css">
#keyframes fadeInFromBottom {
0% {
opacity: 0;
transform: translate3d(0,10px,0);
}
100% {
opacity: 1;
transform: translate3d(0,0,0);
}
}
#basic-settings-template {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
animation: 1s ease 0s 1 fadeInFromBottom;
}
.title-box {
display: flex;
flex-direction: column;
align-items: center;
}
.title-box .small-title {
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0.2;
}
.title-box .big-cta {
font-size: 60px;
color: #1f1f1f;
margin-bottom: 48px;
}
.blog-name input {
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
font-family: Helvetica;
font-weight: 700;
width: 480px;
height: 48px;
padding: 24px;
border-radius: 3px;
color: rgba(0,0,0,0.5);
border: none;
transition: all 0.25s ease;
}
.blog-name input:focus {
outline: none;
-webkit-box-shadow: 0px 0px 136px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 136px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 136px 0px rgba(0,0,0,0.2);
}
</style>
<div class="title-box">
<p class="small-title">The Beginnings</p>
<h3 class="big-cta">What should we call your blog?</h3>
</div>
<form id="myForm" action="#" method="post">
<div class="blog-name">
<input type="text" name="name" id="name" value="" placeholder="Enter the name..." tabindex="1">
</div>
</form>
</div>
Unfortunately, trying to query $('#basic-settings-template') returns nothing, I believe this is because the script is running at the wrong time, but then it wouldn't explain why it would let me add the template itself, if the DOM is already finished packing.
How could I make this work and be able to work with the newly added HTML?

jQuery.load accepts a function as a parameter, function that will be run after the request completes.
Which means that you could do something like this:
$(screen_selector).load(ABSPATH + screen_contents, function(){
// #basic-settings-template was added to the DOM, you can manipulate it now.
$('#basic-settings-template').....
});

Related

Using JavaScript to do something after you scroll an amount of pixels doesn't work

I followed this tutorial here and edited it a little bit to change it to this:
<script lang="text/javascript">
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("header").style.display = "block";
} else {
document.getElementById("header").style.display = "none";
}
}
</script>
With the header HTML being:
<div style="display: none;" id="header">Header</div>
When I try this in my .html file it will not work and doesn't even say a log in the console if I ask it to. I created a new HTML file with no reference to my CSS file and that worked so I think it is something to do with that, I don't know what though. Here is my CSS:
* {
box-sizing: border-box;
}
body {
/*Want to change background image?*/
/*Upload a new one to the img folder.*/
/*Make sure you name it 'minecraft.jpg'*/
background: linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
url("../img/background.jpg") no-repeat center center fixed;
background-size: cover;
font-family: "Open Sans", Helvetica;
margin: 0;
position: relative;
}
#header {
background-color: #f1f1f1; /* Grey background */
padding: 50px 10px; /* Some padding */
color: black;
text-align: center; /* Centered text */
font-size: 90px; /* Big font size */
font-weight: bold;
position: fixed; /* Fixed position - sit on top of the page */
top: 0;
width: 100%; /* Full width */
transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}
html,
body {
width: 100vw;
height: 100vh;
overflow-x: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
scroll-behavior: smooth;
}
a {
text-decoration: none;
/* color: rgb(0, 0, 0); */
}
.a-contact {
text-decoration: underline !important;
color: black;
}
.a-contact:hover {
color: rgb(236, 149, 35);
transition: all 0.3s ease-in;
}
p {
margin: 0;
padding: 3px;
}
.container {
text-align: center;
}
.logo img {
width: 225px;
/* Change image size for mobile */
-webkit-animation-name: logo;
animation-name: logo;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
#-webkit-keyframes logo {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes logo {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.playercount {
display: inline-block;
margin: 20px 15px 0 15px;
padding: 2px 0;
background-color: rgba(15, 199, 209, 0.75);
font-size: 1em;
color: white;
text-align: center;
border-radius: 5px 0 5px 0;
line-height: 27px;
}
.playercount>p>span {
font-weight: bold;
padding: 1px 4px;
border-radius: 3px;
background: rgba(9, 150, 158, 0.7);
margin: 0 2px;
}
.extrapad {
padding: 0;
}
.ip {
cursor: pointer;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-preferred-size: 100px;
flex-basis: 100px;
padding: 18px 0 10px 0;
}
.item img {
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
margin-bottom: 7px;
}
.item img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.img {
width: 80%;
}
.title {
font-weight: bold;
font-size: 17px;
color: white;
}
.subtitle {
color: #cfcfcf;
font-size: 12px;
}
.title,
.subtitle {
margin: 0;
padding: 0;
}
#media(min-width: 400px) {
.logo img {
width: 280px;
/* Change image size for mid sized devices */
}
.playercount {
margin-top: 30px;
padding: 5px;
}
.playercount>p>span {
padding: 2px 7px;
}
}
#media(min-width: 1250px) {
.title {
font-size: 24px;
}
.subtitle {
font-size: 15px;
}
.logo img {
width: 470px;
/* Change image size for desktop */
}
.logo {
margin-bottom: 28px;
}
.img {
width: 100%;
}
.items {
padding: 30px 0 20px 0;
}
.playercount {
font-size: 1.22em;
padding: 10px;
}
.extrapad {
padding: 0 42.5px;
}
.playercount>p>span {
padding: 4px 7px;
}
}
#media(min-width: 1000px) {
.items {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.item:not(:first-child) {
margin-left: 90px;
}
}
.footer {
position: absolute;
color: white;
margin-left: 5px;
top: 98%;
left: 0;
position: fixed;
z-index: 1;
}
.background {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(0deg, rgb(255, 136, 0, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 110%;
height: 50%;
}
.background-white {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(0deg, rgba(255, 255, 255, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 220%;
height: 50%;
}
.background-opposite {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(rgb(255, 136, 0, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 200%;
height: 50%;
}
.background-white-opposite {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(rgba(255, 255, 255, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 310%;
height: 50%;
}
.inner {
background-color: rgba(255, 136, 0, 0.781);
height: 40%;
top: 160%;
width: 100%;
position: absolute;
}
.inner-white {
background-color: rgba(255, 255, 255, 0.781);
height: 40%;
top: 270%;
width: 100%;
position: absolute;
}
/* .inner-text {
text-align: center;
} */
.inner-text-head {
padding-top: 20px;
font-size: 55px;
text-align: center;
}
.inner-text-white-head {
padding-top: 20px;
font-size: 55px;
text-align: center;
}
.inner-text-white-h2 {
font-size: 35px;
text-align: center;
}
.contact-area {
padding: 20px;
border-radius: 5px;
background-color: rgb(255, 255, 255);
border-color: black;
border-style: dashed;
border-width: 5px;
width: 50% !important;
left: 25% !important;
position: relative;
z-index: 2;
}
.inner-text-p {
width: 75%;
left: 13%;
text-align: center;
position: relative;
font-size: 20px;
color: black;
}
.inner-white-text-p {
width: 75%;
left: 13%;
text-align: center;
position: relative;
font-size: 20px;
color: black;
}
.solved {
color: orange !important;
font-weight: bold;
}
.italic {
font-style: italic;
}
/* Scroll Down */
#s-scroll {
position: relative;
width: 24px;
height: 24px;
}
.chevroncontainer {
position: absolute;
/* margin-left: auto;
margin-right: auto; */
top: 30%;
/* right: 50%; */
/* left: 50%; */
/* top: 30%;
left: -30%; */
}
.chevron {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 0.2s ease-out infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
margin-left: -18px;
}
/* .chevroncontainer {
position: absolute;
bottom: 100px !important;
} */
.chevron:first-child {
animation: move 0.2s ease-out 0.2s infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}
.chevron:nth-child(2) {
animation: move 0.2s ease-out 0.2s infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}
/* CHEVRON CHANGED */
.changedchevron {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 2s ease-out infinite;
/* margin-left: -538px; */
margin-left: -678px;
}
.changedchevronNO {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 2s ease-out 1;
margin-left: -18px;
}
/* .changedchevron:first-child {
animation: move 2s ease-out 0.2s infinite;
}
.changedchevron:nth-child(2) {
animation: move 2s ease-out 0.2s infinite;
} */
.changedchevron:before,
.changedchevron:after {
content: ' ';
position: absolute;
top: 0;
height: 40%;
height: 40%;
width: 51%;
background: #fff;
}
.changedchevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.changedchevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
/* CHEVRON CHANGED END */
.chevron:before,
.chevron:after {
content: ' ';
position: absolute;
top: 0;
height: 100%;
height: 40%;
width: 51%;
background: #fff;
}
.chevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.chevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
#keyframes move {
25% {
opacity: 1;
}
33% {
opacity: 1;
transform: translateY(30px);
}
67% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
}
}
.text {
display: block;
margin-top: 75px;
margin-left: -30px;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 17px;
color: #fff !important;
text-transform: uppercase;
white-space: nowrap;
opacity: .25;
animation: pulse 2s linear alternate infinite;
/* margin-left: -60px !important; */
cursor: pointer !important;
/* margin-left: -1058px; */
margin-left: -1338px;
}
#keyframes pulse {
to {
opacity: 1;
}
}
I'm sorry if this doesn't make any sense, I can't wrap my head around this problem either! Please tell me if you need more information and I can provide it.
Thanks!

I noticed 2 things:
Rather than window you may want document.body - I'm sure you'd rather scroll body and not the entire window
Rather than .onscroll you may want .addEventListener - Attaching JavaScript Handlers to Scroll Events — a how-NOT-to
Check out this snippet where I made those changes. I also made sure scrolling within a div wouldn't affect scrolling on document.body
document.body.addEventListener('scroll', function() {
scrollFunction()
})
// When the user scrolls down 50px from the top of the document, resize the header's font size
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("header").style.display = "block";
} else {
document.getElementById("header").style.display = "none";
}
}
* {
box-sizing: border-box;
}
body {
/*Want to change background image?*/
/*Upload a new one to the img folder.*/
/*Make sure you name it 'minecraft.jpg'*/
background: linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
url("../img/background.jpg") no-repeat center center fixed;
background-size: cover;
font-family: "Open Sans", Helvetica;
margin: 0;
position: relative;
}
#header {
background-color: #f1f1f1; /* Grey background */
padding: 50px 10px; /* Some padding */
color: black;
text-align: center; /* Centered text */
font-size: 90px; /* Big font size */
font-weight: bold;
position: fixed; /* Fixed position - sit on top of the page */
top: 0;
width: 100%; /* Full width */
transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}
html,
body {
width: 100vw;
height: 100vh;
overflow-x: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
scroll-behavior: smooth;
}
a {
text-decoration: none;
/* color: rgb(0, 0, 0); */
}
.a-contact {
text-decoration: underline !important;
color: black;
}
.a-contact:hover {
color: rgb(236, 149, 35);
transition: all 0.3s ease-in;
}
p {
margin: 0;
padding: 3px;
}
.container {
text-align: center;
}
.logo img {
width: 225px;
/* Change image size for mobile */
-webkit-animation-name: logo;
animation-name: logo;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
#-webkit-keyframes logo {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes logo {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.07);
transform: scale(1.07);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.playercount {
display: inline-block;
margin: 20px 15px 0 15px;
padding: 2px 0;
background-color: rgba(15, 199, 209, 0.75);
font-size: 1em;
color: white;
text-align: center;
border-radius: 5px 0 5px 0;
line-height: 27px;
}
.playercount>p>span {
font-weight: bold;
padding: 1px 4px;
border-radius: 3px;
background: rgba(9, 150, 158, 0.7);
margin: 0 2px;
}
.extrapad {
padding: 0;
}
.ip {
cursor: pointer;
}
.items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-preferred-size: 100px;
flex-basis: 100px;
padding: 18px 0 10px 0;
}
.item img {
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
margin-bottom: 7px;
}
.item img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.img {
width: 80%;
}
.title {
font-weight: bold;
font-size: 17px;
color: white;
}
.subtitle {
color: #cfcfcf;
font-size: 12px;
}
.title,
.subtitle {
margin: 0;
padding: 0;
}
#media(min-width: 400px) {
.logo img {
width: 280px;
/* Change image size for mid sized devices */
}
.playercount {
margin-top: 30px;
padding: 5px;
}
.playercount>p>span {
padding: 2px 7px;
}
}
#media(min-width: 1250px) {
.title {
font-size: 24px;
}
.subtitle {
font-size: 15px;
}
.logo img {
width: 470px;
/* Change image size for desktop */
}
.logo {
margin-bottom: 28px;
}
.img {
width: 100%;
}
.items {
padding: 30px 0 20px 0;
}
.playercount {
font-size: 1.22em;
padding: 10px;
}
.extrapad {
padding: 0 42.5px;
}
.playercount>p>span {
padding: 4px 7px;
}
}
#media(min-width: 1000px) {
.items {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.item:not(:first-child) {
margin-left: 90px;
}
}
.footer {
position: absolute;
color: white;
margin-left: 5px;
top: 98%;
left: 0;
position: fixed;
z-index: 1;
}
.background {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(0deg, rgb(255, 136, 0, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 110%;
height: 50%;
}
.background-white {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(0deg, rgba(255, 255, 255, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 220%;
height: 50%;
}
.background-opposite {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(rgb(255, 136, 0, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 200%;
height: 50%;
}
.background-white-opposite {
/* background-color: rgb(187, 156, 53); */
background: linear-gradient(rgba(255, 255, 255, 0.781), rgba(0, 0, 0, 0));
width: 100%;
position: absolute;
top: 310%;
height: 50%;
}
.inner {
background-color: rgba(255, 136, 0, 0.781);
height: 40%;
top: 160%;
width: 100%;
position: absolute;
}
.inner-white {
background-color: rgba(255, 255, 255, 0.781);
height: 40%;
top: 270%;
width: 100%;
position: absolute;
}
/* .inner-text {
text-align: center;
} */
.inner-text-head {
padding-top: 20px;
font-size: 55px;
text-align: center;
}
.inner-text-white-head {
padding-top: 20px;
font-size: 55px;
text-align: center;
}
.inner-text-white-h2 {
font-size: 35px;
text-align: center;
}
.contact-area {
padding: 20px;
border-radius: 5px;
background-color: rgb(255, 255, 255);
border-color: black;
border-style: dashed;
border-width: 5px;
width: 50% !important;
left: 25% !important;
position: relative;
z-index: 2;
}
.inner-text-p {
width: 75%;
left: 13%;
text-align: center;
position: relative;
font-size: 20px;
color: black;
}
.inner-white-text-p {
width: 75%;
left: 13%;
text-align: center;
position: relative;
font-size: 20px;
color: black;
}
.solved {
color: orange !important;
font-weight: bold;
}
.italic {
font-style: italic;
}
/* Scroll Down */
#s-scroll {
position: relative;
width: 24px;
height: 24px;
}
.chevroncontainer {
position: absolute;
/* margin-left: auto;
margin-right: auto; */
top: 30%;
/* right: 50%; */
/* left: 50%; */
/* top: 30%;
left: -30%; */
}
.chevron {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 0.2s ease-out infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
margin-left: -18px;
}
/* .chevroncontainer {
position: absolute;
bottom: 100px !important;
} */
.chevron:first-child {
animation: move 0.2s ease-out 0.2s infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}
.chevron:nth-child(2) {
animation: move 0.2s ease-out 0.2s infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}
/* CHEVRON CHANGED */
.changedchevron {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 2s ease-out infinite;
/* margin-left: -538px; */
margin-left: -678px;
}
.changedchevronNO {
position: absolute;
width: 38px;
height: 30px;
/* width: 56px;
height: 36px; */
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 2s ease-out 1;
margin-left: -18px;
}
/* .changedchevron:first-child {
animation: move 2s ease-out 0.2s infinite;
}
.changedchevron:nth-child(2) {
animation: move 2s ease-out 0.2s infinite;
} */
.changedchevron:before,
.changedchevron:after {
content: ' ';
position: absolute;
top: 0;
height: 40%;
height: 40%;
width: 51%;
background: #fff;
}
.changedchevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.changedchevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
/* CHEVRON CHANGED END */
.chevron:before,
.chevron:after {
content: ' ';
position: absolute;
top: 0;
height: 100%;
height: 40%;
width: 51%;
background: #fff;
}
.chevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.chevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
#keyframes move {
25% {
opacity: 1;
}
33% {
opacity: 1;
transform: translateY(30px);
}
67% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
}
}
.text {
display: block;
margin-top: 75px;
margin-left: -30px;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 17px;
color: #fff !important;
text-transform: uppercase;
white-space: nowrap;
opacity: .25;
animation: pulse 2s linear alternate infinite;
/* margin-left: -60px !important; */
cursor: pointer !important;
/* margin-left: -1058px; */
margin-left: -1338px;
}
#keyframes pulse {
to {
opacity: 1;
}
}
<div style="display: none;" id="header">Header</div>
<div style="width: 100px; height: 500px; overflow: scroll">
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
</div>

My slide navigation menu does not hide the content that it was sliding over

I tried my best to make sense of the title but for more references, I am giving screenshots below the menu when it slides over the page covering the content the content should be hidden but its not
Before:
https://imgur.com/PTNwfdA
After:
https://imgur.com/B2Iz4IE
Here's the CSS for my navigation:
/* navbar Start*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: fixed;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}
#active:checked~.wrapper {
/*left: 0;*/
right: 0;
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 30%;
width: 40%;
border-bottom: 3px solid #000000;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-btn:before {
transform: translateY(-8px);
}
.menu-btn:after {
transform: translateY(8px);
}
.close {
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
transition: background .6s;
}
/* closing animation */
#active:checked+.menu-btn span {
transform: scaleX(0);
}
#active:checked+.menu-btn:before {
transform: rotate(45deg);
border-color: #fff;
}
#active:checked+.menu-btn:after {
transform: rotate(-45deg);
border-color: #fff;
}
.wrapper ul {
position: absolute;
top: 60%;
left: 50%;
height: 90%;
transform: translate(-50%, -50%);
list-style: none;
text-align: right;
}
.wrapper ul li {
height: 10%;
margin: 15px 0;
}
.wrapper ul li a {
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
position: absolute;
line-height: 50px;
margin: 5px 30px;
opacity: 0;
transition: all 0.3s ease;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
/*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #4114a1;
}
input[type="checkbox"] {
display: none;
}
.product a img {
display: none;
position: absolute;
left: -400px;
top: -200px;
}
.product a img {
display: none;
}
.product a:hover img {
display: inherit;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
overflow-y: hidden;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#active:checked~.wrapper ul li a {
opacity: 1;
align-items: center;
}
.wrapper ul li a {
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translateX(100px);
font-family: 'LemonMilk';
align-items: center;
}
#active:checked~.wrapper ul li a {
transform: none;
transition-timing-function: ease, cubic-bezier(.1, 1.3, .3, 1);
/* easeOutBackを緩めた感じ */
transition-delay: .6s;
transform: translateX(-100px);
}
.pages-nav--open {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.pages-nav__item {
display: flex;
flex-direction: row;
min-height: 300vh;
}
.pages-nav .pages-nav__item--social {
width: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
transition: transform 1.2s, opacity 1.2s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.pages-nav--open .pages-nav__item--social {
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.link {
font-size: 0.85em;
font-weight: bold;
position: relative;
letter-spacing: 1px;
text-transform: uppercase;
}
.link:hover,
.link:focus {
color: #fff;
}
.link--page {
display: block;
color: #cecece;
text-align: center;
}
.link--page:not(.link--faded)::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 50%;
height: 2px;
margin: 5px 0 0 -15px;
background: #fff;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.link--page:hover:before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.link--faded {
color: #4f4f64;
}
.link--faded:hover,
.link--faded:focus {
color: #5c5edc;
}
.link--page.link--faded {
font-size: 0.65em;
}
.link--social {
font-size: 1.5em;
margin: 0 0.75em;
}
.text-hidden {
position: absolute;
display: block;
overflow: hidden;
width: 0;
height: 0;
color: transparent;
}
#media screen and (max-width: 40em) {
.js .pages-nav {
display: block;
padding: 10px 20px 0 20px;
text-align: left;
}
.pages-nav__item {
width: 100%;
}
.pages-nav__item--small {
display: inline-block;
width: auto;
margin-right: 5px;
}
.pages-nav__item--social {
font-size: 0.9em;
}
.menu-button {
top: 15px;
right: 10px;
left: auto;
}
.info {
font-size: 0.85em;
}
.poster {
margin: 1em;
}
}
/* ///////////////////// navbar end ///////////////////////// */
and here's my css for the page this is on:
.typewritter {
height: 80vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 28%;
animation: typing 4s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
body {
margin: 0px;
}
#container {
/* Center the text in the viewport. */
position: absolute;
display: flex;
margin: auto;
width: 100vw;
height: 80pt;
top: 0;
bottom: 0;
/* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
filter: url(#threshold) blur(0.6px);
}
/* Your average text styling */
#text1, #text2 {
position: absolute;
width: 100%;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 80pt;
text-align: center;
user-select: none;
}
If any more info is needed I'll be happy to provide it!

all you need to do is just set a greater z-index to .wrapper also u need to give a z-index to .menu-btn else it would be below the wrapper
this should be your code
.menu-btn{
position: absolute;
z-index: 12;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.wrapper{
position: fixed;
z-index: 10;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}

Why ajax loaded content is not showing properly?

I am trying to show products of a particular category when it is clicked by using jquery ajax i.e without reloading the page.
Now when the products load with Ajax it seems that their CSS is disturbed or maybe some jQuery events not loading. I have checked, all the CSS classes are well placed as in original file and also i ave tried the ".on" method as suggested in some other answers but it doesn't do anything. can you please help me find what the problem is?
original look :
this is what the look should be like
After Ajax loaded content :
and this look is after the ajax loading
all_products.php (original file)
<div class="product_grid">
<div class="product_grid_border"></div>
<div id="prod_container">
#foreach($products as $product)
<!-- Product Item -->
<div class="product_item is_new">
<div class="product_border"></div>
<div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="{{URL::to('')}}/public/uploads/images/{{$product->image}}" alt=""></div>
<div class="product_content">
<div class="product_price">${{$product->price}}</div>
<div class="product_name"><div>{{ucwords($product->name)}}</div></div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
#endforeach
</div>
</div>
ajax_products.blade.php (to be added via ajax)
#foreach($products as $product)
<!-- Product Item -->
<div class="product_item is_new">
<div class="product_border"></div>
<div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="{{URL::to('')}}/public/uploads/images/{{$product->image}}" alt=""></div>
<div class="product_content">
<div class="product_price">${{$product->price}}</div>
<div class="product_name"><div>{{ucwords($product->name)}}</div></div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
#endforeach
my_js.js
$(document).on('click','.cat',function(){
$.ajax({
url: 'http://localhost/cart_test/user/get_cats',
type: 'POST',
data: { cat : $(this).attr('id')},
success: function(data){
d = JSON.parse(data);
var container = $('#prod_container');
container.empty();
container.append(d);
},
error: function()
{
alert('error');
}
});
});
frontController.php
public function get_cats(Request $request)
{
$id = $request->input('cat');
$products = product::where('category_id','=',$id)->get();
$prods = view('frontend.modules.ajax_products',compact('products'))->render();
echo json_encode($prods);
}
shop.css
.product_grid
{
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
width: calc(100% + 40px);
}
.product_grid_border
{
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 3px;
height: 100%;
background: #FFFFFF;
z-index: 1;
}
.product_item
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 20%;
background: #FFFFFF;
cursor: pointer;
padding-top: 40px;
padding-bottom: 24px;
text-align: center;
}
.product_border
{
display: block;
position: absolute;
top: 52px;
right: 1px;
width: 1px;
height: calc(100% - 71px);
background: #e5e5e5;
}
.product_image
{
width: 100%;
height: 115px;
}
.product_image img
{
display: block;
position: relative;
max-width: 100%;
}
.product_content
{
width: 100%;
}
.product_price
{
font-size: 16px;
font-weight: 500;
margin-top: 25px;
}
.product_item.discount
{
color: #df3b3b;
}
.product_price span
{
position: relative;
font-size: 12px;
font-weight: 400;
color: rgba(0,0,0,0.6);
margin-left: 10px;
}
.product_price span::after
{
display: block;
position: absolute;
top: 6px;
left: -2px;
width: calc(100% + 4px);
height: 1px;
background: #8d8d8d;
content: '';
}
.product_name
{
margin-top: 4px;
overflow: hidden;
}
.product_name div
{
width: 100%;
}
.product_name div a
{
font-size: 14px;
font-weight: 400;
color: #000000;
white-space: nowrap;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_name div a:hover
{
color: #0e8ce4;
}
.product_fav
{
position: absolute;
top: 33px;
right: 12px;
width: 36px;
height: 36px;
background: #FFFFFF;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
border-radius: 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_fav:hover
{
box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
.product_fav i
{
display: block;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
color: #cccccc;
line-height: 36px;
pointer-events: none;
z-index: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_fav.active i
{
color: red;
}
.product_item:hover .product_fav
{
visibility: visible;
opacity: 1;
}
.product_marks
{
display: block;
position: absolute;
top: 33px;
left: 24px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_mark
{
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
line-height: 36px;
font-size: 12px;
}
.product_new
{
display: none;
background: #0e8ce4;
visibility: hidden;
opacity: 0;
}
.product_discount
{
display: none;
background: #df3b3b;
visibility: hidden;
opacity: 0;
}
.product_item.is_new .product_new,
.product_item.discount .product_discount
{
display: inline-block;
visibility: visible;
opacity: 1;
}
shop.js (this is also not working after ajax)
function initIsotope() {
var sortingButtons = $('.shop_sorting_button');
$('.product_grid').isotope({
itemSelector: '.product_item',
getSortData: {
price: function(itemElement) {
var priceEle = $(itemElement).find('.product_price').text().replace('$', '');
return parseFloat(priceEle);
},
name: '.product_name div a'
},
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
// Sort based on the value from the sorting_type dropdown
sortingButtons.each(function() {
$(this).on('click', function() {
$('.sorting_text').text($(this).text());
var option = $(this).attr('data-isotope-option');
option = JSON.parse(option);
$('.product_grid').isotope(option);
});
});
}
/*
8. Init Price Slider
*/
function initPriceSlider() {
if ($("#slider-range").length) {
$("#slider-range").slider({
range: true,
min: 0,
max: 1000,
values: [0, 580],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$('.ui-slider-handle').on('mouseup', function() {
$('.product_grid').isotope({
filter: function() {
var priceRange = $('#amount').val();
var priceMin = parseFloat(priceRange.split('-')[0].replace('$', ''));
var priceMax = parseFloat(priceRange.split('-')[1].replace('$', ''));
var itemPrice = $(this).find('.product_price').clone().children().remove().end().text().replace('$', '');
return (itemPrice > priceMin) && (itemPrice < priceMax);
},
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
});
}
}

jQuery animation doesn't work the second time

Why in THIS CODE if you press the "I" button on the bottom right the first time works, but the second it shows just the pink background?
(function(){
'use strict';
var $mainButton = $(".main-button"),
$closeButton = $(".close-button"),
$buttonWrapper = $(".button-wrapper"),
$ripple = $(".ripple"),
$layer = $(".layered-content");
$mainButton.on("click", function(){
$ripple.addClass("rippling");
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
});
});
$closeButton.on("click", function(){
$buttonWrapper.removeClass("clicked");
$ripple.removeClass("rippling");
$layer.removeClass("active");
});
})();
#import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
html {
height: 100%;
}
body {
background: url("http://species-in-pieces.com/img/bg/grad-bg.png") no-repeat center center/cover #F9D8AD;
height: 100%;
}
button:focus {
outline: none;
}
button:hover {
opacity: .8;
}
.fa {
font-size: 20px;
}
.fa-info {
color: white;
}
#container {
width: 330px;
height: 508px;
max-width: 330px;
background: white;
position: relative;
top: 50%;
left: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.25);
transform: translate3d(-50%, -50%, 0);
}
h2 {
padding: 20px;
color: white;
background: #3E4FB2;
font-weight: 300;
text-align: center;
font-size: 18px;
font-family: 'Roboto', sans-serif;
}
.detail {
color: #777;
padding: 20px;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}
.img-wrapper {
padding: 0;
position: relative;
}
.img-wrapper:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(62, 79, 178, .25);
width: 100%;
}
.img-wrapper img {
width: 100%;
height: 200px;
-o-object-fit: cover;
object-fit: cover;
margin: 0;
display: block;
position: relative;
}
.button-wrapper {
width: 50px;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
right: 20px;
bottom: 20px;
}
button {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
z-index: 9;
position: relative;
}
.main-button {
background: #ff2670;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.ripple {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 50%;
z-index: -9;
background: transparent;
border: 1px solid #ff2670;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
-webkit-transition: .3s all ease;
transition: .3s all ease;
opacity: 1;
}
.rippling {
-webkit-animation: .3s rippling 1;
animation: .3s rippling 1;
-moz-animation: .3s rippling 1;
}
#-webkit-keyframes rippling {
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
#-moz-keyframes rippling {
25% {
-moz-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-moz-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
#keyframes rippling {
25% {
transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.layer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
background: #ff2670;
border-radius: 50%;
z-index: -99;
pointer-events: none;
}
.button-wrapper.clicked {
-webkit-transform: rotate(90deg) translateY(-96px);
-ms-transform: rotate(90deg) translateY(-96px);
transform: rotate(90deg) translateY(-96px);
right: 0;
bottom: 0;
-webkit-transition: .3s all ease .6s;
transition: .3s all ease .6s;
}
.button-wrapper.clicked .main-button {
opacity: 0;
-webkit-transition: .3s all ease .3s;
transition: .3s all ease .3s;
}
.button-wrapper.clicked .layer {
-webkit-transform: scale(100);
-ms-transform: scale(100);
transform: scale(100);
-webkit-transition: 2.25s all ease .9s;
transition: 2.25s all ease .9s;
}
.layered-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 0;
}
.layered-content.active {
opacity: 1;
}
.close-button {
background: white;
position: absolute;
right: 20px;
top: 20px;
color: #ff2670;
}
.layered-content.active .close-button {
-webkit-animation: .5s bounceIn;
animation: .5s bounceIn;
}
.layered-content .content img {
width: 80px;
-webkit-shape-outside: 80px;
shape-outside: 80px;
border-radius: 50%;
display: block;
margin: 0 auto 15px;
padding: 10px;
box-sizing: border-box;
background: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
-webkit-transition: .3s all ease;
transition: .3s all ease;
}
.content p {
color: white;
font-weight: 300;
text-align: center;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}
.content p a {
font-size: 12px;
background: white;
padding: 2.5px 5px;
color: #ff2670;;
text-decoration: none;
border-radius: 50px;
display: inline-block;
margin-left: 1.5px;
}
.content img,
.content p {
opacity: 0;
position: relative;
top: -7.5px;
}
.layered-content.active .content img {
opacity: 1;
top: 0;
-webkit-transition: .5s all ease .5s;
transition: .5s all ease .5s;
}
.layered-content.active .content p {
opacity: 1;
top: 0;
-webkit-transition: .5s all ease 1s;
transition: .5s all ease 1s;
}
.copyright {
position: fixed;
right: 15px;
bottom: 15px;
font-family: "Roboto";
}
.copyright span {
line-height: 36px;
color: rgba(255, 255, 255, 0.75);
margin-right: 10px;
font-weight: 300;
}
.copyright span a {
font-weight: 400;
text-decoration: none;
color: #ea4c89;
}
.copyright .balapa {
width: 30px;
height: 30px;
display: block;
background: url("//s3-us-west-2.amazonaws.com/s.cdpn.io/111167/profile/profile-80_3.jpg");
background-size: cover;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.75);
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="container">
<h2>Material Overlay Animation</h2>
<div class="img-wrapper">
<img src="https://d13yacurqjgara.cloudfront.net/users/2733/screenshots/741958/dribbble-foxes.jpg" alt="Just Background">
</div>
<p class="detail">Click the Button to see the "Material Animation". Works great on modern browser.</p>
<div class="button-wrapper">
<div class="layer"></div>
<button class="main-button fa fa-info">
<div class="ripple"></div>
</button>
</div>
<div class="layered-content">
<button class="close-button fa fa-times"></button>
<div class="content">
<img src="https://d13yacurqjgara.cloudfront.net/users/332135/avatars/normal/52d614ee44e3e21d2b73894c465773d7.png" alt="Balapa">
<p>Crafted by balapa.</p>
<p>See also my other pen</p>
</div>
</div>
</main>
<div class="copyright"><span>Material Overlay Animation by</span></div>

You have to clear the queue using clearQueue() function.
Change your code to this
...
$buttonWrapper.addClass("clicked").clearQueue().delay(1500).queue(function(){
$layer.addClass("active");
});
});
...
Or you can even do it like this which is a way suggested in jQuery documentation.
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
jQuery.dequeue( this );
});
});
Important part directly from jQuery documentation,
Note that when adding a function with jQuery.queue(), we should ensure
that jQuery.dequeue() is eventually called so that the next function
in line executes.

Instead of this:
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
});
Use this:
$buttonWrapper.addClass("clicked");
setTimeout(function(){$layer.addClass("active")},1500);
And it will work.

Add a feature to my image gallery that allows images to open in new window

I've built an image gallery that lets you click on a thumbnail in a grid which activates it to pop up with a larger version of the image and an image description - however what I want to do now is add the ability to click on the larger image and have it open the image in a new tab (ideally with a simple target _blank link) but I can't figure out how to add it to my current code...
If anyone could give me some advice it would be hugely appreciated! I'll attach a fiddle so you can see the code and the link to the actual page on the site I'm having trouble with!
HTML:
<div class="container">
<div class="content">
<div class="grid">
<div class="grid__item" data-size="1680x2520">
<a href="img/original/big1.jpg" class="img-wrap">
<img src="img/thumbs/big1.jpg" alt="Big 1" />
<div class="description description--grid">
<h3>Chemical Field I</h3>
<p>Chemical on Paper <em>70 x 100cm</em></p>
</div>
</a>
</div>
<div class="grid__item" data-size="1680x2520">
<a href="img/original/big2.jpg" class="img-wrap">
<img src="img/thumbs/big2.jpg" alt="Big 2" />
<div class="description description--grid">
<h3>Chemical Field II</h3>
<p>Chemical on Paper <em>70 x 100cm</em></p>
</div>
</a>
</div>
<div class="grid__item" data-size="1680x2520">
<a href="img/original/big3.jpg" class="img-wrap">
<img src="img/thumbs/big3.jpg" alt="Big 3" />
<div class="description description--grid">
<h3>Chemical Field III</h3>
<p>Chemical on Paper <em>70 x 100cm</em></p>
</div>
</a>
</div>
</div>
</div>
</div>
CSS:
.content {
margin-left: 220px;
width: calc(100%-220px);
}
.grid {
position: relative;
margin: 0;
padding-top: 7px;
}
.js .grid::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background: #fff url(../img/loading.svg) no-repeat 50% 75px;
background-size: 60px auto;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.js .grid--loaded::after {
opacity: 0;
}
.grid__item {
width: 259.5px;
padding: 14px;
}
.grid__item--current {
opacity: 0 !important;
}
.img-wrap {
display: block;
}
.img-wrap:focus,
.img-wrap:hover {
outline: none;
}
.img-wrap img {
display: block;
max-width: 100%;
}
.preview {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
width: 50%;
height: 100%;
pointer-events: none;
}
.preview::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: #fff;
-webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.preview--open {
pointer-events: auto;
}
.preview--open::before {
opacity: 1;
}
.clone {
position: fixed;
z-index: 110;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-backface-visibility: hidden;
}
.original {
position: relative;
z-index: 120;
display: block;
object-fit: contain;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
-webkit-backface-visibility: hidden;
}
.preview--open .animate {
/* open */
-webkit-transition: -webkit-transform 0.6s, opacity 0.2s;
transition: transform 0.6s, opacity 0.2s;
}
.animate {
/* close */
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.description {
color: #000;
}
.js .description--grid {
display: none;
}
.description--preview {
font-size: 1.5em;
font-family: Open Sans, sans-serif;
position: absolute;
z-index: 140;
width: 100%;
left: 100%;
top: 0;
height: 100%;
padding: 0 1em;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
opacity: 0;
-webkit-transition: opacity 1s, -webkit-transform 1s;
transition: opacity 1s, transform 1s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
}
.preview--open .description--preview {
opacity: 1;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.description--preview h3 {
font-weight: normal;
margin: 0;
}
.description--preview p {
font-size: 0.65em;
max-width: 100%;
}
.description--preview p em {
color: #5D5D5D;
display: block;
padding: 0.4em 0 0 0;
}
/* Details */
.details {
max-width: 100%;
/* IE 10-11 bug flexbox */
}
.details ul {
line-height: 1;
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.details ul li {
font-size: 0.5em;
position: relative;
display: inline-block;
margin: 0 1em 0 0;
padding: 0.15em 0;
white-space: nowrap;
opacity: 0;
color: #9d9d9d;
-webkit-transition: -webkit-transform 1s, opacity 1s;
transition: transform 1s, opacity 1s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.preview--open .details ul li {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.preview--open .details ul li:nth-child(1) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.preview--open .details ul li:nth-child(2) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.preview--open .details ul li:nth-child(3) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.preview--open .details ul li:nth-child(4) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.preview--open .details ul li:nth-child(5) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.details ul li:first-child {
font-weight: bold;
color: #909090;
}
.icon {
font-family: 'camera-icons';
font-weight: normal;
font-style: normal;
font-variant: normal;
line-height: 1;
display: inline-block;
vertical-align: middle;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
speak: none;
}
.icon + span {
margin-left: 5px;
vertical-align: middle;
}
.icon-focal_length:before {
content: '\e600';
}
.icon-exposure_time:before {
content: '\e601';
}
.icon-iso:before {
content: '\e602';
}
.icon-camera:before {
content: '\e603';
}
.icon-aperture:before {
content: '\e604';
}
.details .icon {
margin-right: 5px;
color: #000;
}
/* Close button */
.action {
font-size: 1.5em;
margin: 0;
padding: 0;
cursor: pointer;
vertical-align: top;
color: #000;
border: none;
background: none;
}
.action:hover,
.action:focus {
color: #CCC;
outline: none;
}
.action--close {
position: fixed;
z-index: 150;
top: 0;
right: 0;
padding: 1em;
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: scale3d(0.6, 0.6, 1);
transform: scale3d(0.6, 0.6, 1);
}
.preview--image-loaded .action--close {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.text-hidden {
position: absolute;
display: block;
overflow: hidden;
width: 0;
height: 0;
color: transparent;
}
http://benedictbuckle.co.za/chemical-works.html
https://jsfiddle.net/1r6br1th/
Any help would be hugely appreciated!

Just added target="_blank" to the first a tag and it worked.
<a href="http://benedictbuckle.co.za/img/original/big1.jpg" class="img-wrap" target="_blank">
<img src="http://benedictbuckle.co.za/img/thumbs/big1.jpg" alt="Big 1" />
<div class="description description--grid">
<h3>Chemical Field I</h3>
<p>Chemical on Paper <em>70 x 100cm</em></p>
</div>
</a>
Click the first image: https://jsfiddle.net/1r6br1th/1/

Develop Reference

JavaScript is the programming language of the Web.

How do I manipulate an element I just added with jQuery? - javascript

Related

Using JavaScript to do something after you scroll an amount of pixels doesn't work

My slide navigation menu does not hide the content that it was sliding over

Why ajax loaded content is not showing properly?

jQuery animation doesn't work the second time

Add a feature to my image gallery that allows images to open in new window

Categories

Resources