We Keep Coding

Run ScrollTrigger animation once (once: true not working)

I have an ScrollTrigger animation which I only want running once.
As per the docs, "If true, the ScrollTrigger will kill() itself as soon as the end position is reached once."
However, in my case, when I add once: true, I get the message "Invalid property", "once", "set to", true, "Missing plugin? gsap.registerPlugin()" in console, when I've registered the plugin already?
$(function() {
gsap.registerPlugin(ScrollTrigger);
function animateFrom(elem, direction) {
direction = direction || 1;
var x = 0,
y = direction * 100;
if (elem.classList.contains("gsap_reveal--fromLeft")) {
x = -100;
y = 0;
} else if (elem.classList.contains("gsap_reveal--fromRight")) {
x = 100;
y = 0;
}
elem.style.transform = "translate(" + x + "px, " + y + "px)";
elem.style.opacity = "0";
gsap.fromTo(elem, {
x: x,
y: y,
autoAlpha: 0
}, {
duration: 2,
x: 0,
y: 0,
autoAlpha: 1,
ease: "expo",
overwrite: "auto",
once: true, // doesnt work
});
}
function hide(elem) {
gsap.set(elem, {
autoAlpha: 0
});
}
gsap.utils.toArray(".gsap_reveal").forEach(function(elem) {
hide(elem); // assure that the element is hidden when scrolled into view
ScrollTrigger.create({
trigger: elem,
onEnter: function() {
animateFrom(elem)
},
onEnterBack: function() {
animateFrom(elem, -1)
},
onLeave: function() {
hide(elem)
} // assure that the element is hidden when scrolled into view
});
});
});
.hero {
min-height: 400px;
background: lightblue;
display: flex;
align-items: center;
}
.textImageRepeater {
overflow: hidden;
padding: 120px 0 160px 0;
}
.textImageRepeater__intro {
margin-bottom: 66px;
}
.textImageRepeater__layout--row {
flex-direction: row !important;
}
.textImageRepeater__layout--rowReverse {
flex-direction: row-reverse !important;
}
.textImageRepeater__item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 70px;
justify-content: space-between;
}
.textImageRepeater__header {
margin: 17px 0;
}
.textImageRepeater__graphic {
margin: 0;
}
.textImageRepeater__text, .textImageRepeater__graphic {
flex-basis: 50%;
}
.textImageRepeater__text {
max-width: 500px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<div class="scroll-section" data-scroll-container>
<div data-scroll-section>
<section class="hero">
<div class="container">
<div class="row justify-content-center justify-content-xl-between">
<div class="col-12 col-md-10 col-lg-9 col-xl-5">
<div class="hero__text text-center text-xl-start">
<h1 class="hero__title">Title</h1>
</div>
</div>
</div>
</div>
</section>
<section class="textImageRepeater">
<div class="container">
<div class="row">
<div class="col-12">
<div class="textImageRepeater__item textImageRepeater__layout--row">
<div class="textImageRepeater__text text-center text-md-start gsap_reveal gsap_reveal--fromRight">
<div class="textImageRepeater__copy">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="textImageRepeater__graphic text-center gsap_reveal gsap_reveal--fromLeft">
<img class="textImageRepeater__image" src="https://picsum.photos/200/300" alt="placeholder-image" loading="lazy">
</div>
</div>
<div class="textImageRepeater__item textImageRepeater__layout--rowReverse">
<div class="textImageRepeater__text text-center text-md-start gsap_reveal gsap_reveal--fromRight">
<div class="textImageRepeater__copy">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="textImageRepeater__graphic text-center gsap_reveal gsap_reveal--fromLeft">
<img class="textImageRepeater__image" src="https://picsum.photos/200/300" alt="placeholder-image" loading="lazy">
</div>
</div>
</div>
</div>
</div>
</section>

$(function() {
gsap.registerPlugin(ScrollTrigger);
function animateFrom(elem, direction) {
direction = direction || 1;
var x = 0,
y = direction * 100;
if (elem.classList.contains("gsap_reveal--fromLeft")) {
x = -100;
y = 0;
} else if (elem.classList.contains("gsap_reveal--fromRight")) {
x = 100;
y = 0;
}
elem.style.transform = "translate(" + x + "px, " + y + "px)";
elem.style.opacity = "0";
gsap.fromTo(elem, {
x: x,
y: y,
autoAlpha: 0
}, {
duration: 2,
x: 0,
y: 0,
autoAlpha: 1,
ease: "expo",
overwrite: "auto",
});
}
function hide(elem) {
gsap.set(elem, {
autoAlpha: 0
});
}
gsap.utils.toArray(".gsap_reveal").forEach(function(elem) {
hide(elem); // assure that the element is hidden when scrolled into view
ScrollTrigger.create({
once: true,
trigger: elem,
onEnter: function() {
animateFrom(elem)
},
onEnterBack: function() {
animateFrom(elem, -1)
},
onLeave: function() {
hide(elem)
} // assure that the element is hidden when scrolled into view
});
});
});
.hero {
min-height: 400px;
background: lightblue;
display: flex;
align-items: center;
}
.textImageRepeater {
overflow: hidden;
padding: 120px 0 160px 0;
}
.textImageRepeater__intro {
margin-bottom: 66px;
}
.textImageRepeater__layout--row {
flex-direction: row !important;
}
.textImageRepeater__layout--rowReverse {
flex-direction: row-reverse !important;
}
.textImageRepeater__item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 70px;
justify-content: space-between;
}
.textImageRepeater__header {
margin: 17px 0;
}
.textImageRepeater__graphic {
margin: 0;
}
.textImageRepeater__text, .textImageRepeater__graphic {
flex-basis: 50%;
}
.textImageRepeater__text {
max-width: 500px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<div class="scroll-section" data-scroll-container>
<div data-scroll-section>
<section class="hero">
<div class="container">
<div class="row justify-content-center justify-content-xl-between">
<div class="col-12 col-md-10 col-lg-9 col-xl-5">
<div class="hero__text text-center text-xl-start">
<h1 class="hero__title">Title</h1>
</div>
</div>
</div>
</div>
</section>
<section class="textImageRepeater">
<div class="container">
<div class="row">
<div class="col-12">
<div class="textImageRepeater__item textImageRepeater__layout--row">
<div class="textImageRepeater__text text-center text-md-start gsap_reveal gsap_reveal--fromRight">
<div class="textImageRepeater__copy">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="textImageRepeater__graphic text-center gsap_reveal gsap_reveal--fromLeft">
<img class="textImageRepeater__image" src="https://picsum.photos/200/300" alt="placeholder-image" loading="lazy">
</div>
</div>
<div class="textImageRepeater__item textImageRepeater__layout--rowReverse">
<div class="textImageRepeater__text text-center text-md-start gsap_reveal gsap_reveal--fromRight">
<div class="textImageRepeater__copy">
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="textImageRepeater__graphic text-center gsap_reveal gsap_reveal--fromLeft">
<img class="textImageRepeater__image" src="https://picsum.photos/200/300" alt="placeholder-image" loading="lazy">
</div>
</div>
</div>
</div>
</div>
</section>
I think you put the argument in the wrong section. You have to put 'once' inside create

Show popup once on localstorage cookie based not working?

I am making a popup where I am trying to show popup on cookie-based, it shows only once when user visit for the first time, also accept and deny button not working on more info button popup as below when we click on more info new popup also come I am trying to hide both on accept, close and all button and set a cookie for showing this popup
I have used this but not working:
if (localStorage.getItem("cookieSeen") != "shown") {
$(".popUp").delay(2000).fadeIn();
localStorage.setItem("cookieSeen","shown")
};
$("#submit").click(function() {
$(".cookie-banner").fadeOut();
});
$(document).ready(function() {
$(".footerr li:last-child").on('click', function(e) {
console.log("in")
e.preventDefault();
$('#popUpContain').css('display', 'none');
$(".serviceMainContent1").css('display', 'block');
})
$("#closeInfoBtn").click(function(e) {
e.preventDefault();
$('#popUpContain').css('display', 'block');
$(".serviceMainContent1").css('display', 'none');
})
$(".cat_btn").click(function(e) {
e.preventDefault();
$(".serv_btn a").css({
"color": "#303030"
});
$(".serv_btn").css({
"border-bottom": "none"
});
$('#services1').css('display', 'none');
$("#category").css('display', 'block');
$(".cat_btn a").css({
"color": "blue"
});
$(".cat_btn").css({
"border-bottom": "2px solid blue"
});
});
$(".serv_btn").click(function(e) {
e.preventDefault();
$(".cat_btn a").css({
"color": "#303030"
});
$(".cat_btn").css({
"border-bottom": "none"
});
$("#category").css('display', 'none');
$('#services1').css('display', 'block');
$(".serv_btn a").css({
"color": "blue"
});
$(".serv_btn").css({
"border-bottom": "2px solid blue"
});
})
var acc = document.getElementsByClassName("accordion1");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
})
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.popUp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
display: block;
background-color: white;
}
#language {
width: 57px;
padding: 4px;
border: 1px solid #dbdbdb;
}
.header1 {
display: flex;
justify-content: flex-end;
}
.container1,
.serviceMainContent1 {
display: flex;
flex-direction: column;
width: 595px;
padding: 14px;
box-shadow: -1px 16px 34px 2px #dbdbdb;
border-radius: 7px;
}
.bodyy h3 {
color: #303030;
}
.bodyy p {
line-height: 19px;
margin-top: 10px;
font-size: 13px;
}
.footerr>a {
padding: 7px 90px;
border-radius: 9px;
margin: 0px 10px;
}
.footerr>.deny {
background-color: #ededed;
color: #303030;
}
.footerr>.accept {
background-color: #0096FF;
color: #fff;
}
.footerr>.deny:hover {
background-color: #f4f2f2;
}
.footerr>.accept:hover {
background-color: #4eabf7;
}
.footerr>a:hover {
text-decoration: none;
}
.footerr>p {
text-align: center;
padding-top: 10px;
font-size: 12px;
}
.footerr>ul {
display: flex;
list-style: none;
font-size: 13px;
}
.footerr>ul li {
padding-right: 10px;
color: #c4c2c2;
}
/* more information css */
.serviceMainContent1 {
height: 654px;
overflow-y: scroll;
display: none;
}
.header1 a {
font-size: 20px;
width: 40px;
text-align: center;
}
.header1 a:hover {
text-decoration: none;
color: #303030;
}
.categoryServices1 {
height: 436px;
width: 563px;
overflow-y: scroll;
background-color: #f8f7f7;
}
.cat_serv_btn,
.footerBtn {
display: flex;
text-align: center;
}
.cat_serv_btn .cat_btn,
.cat_serv_btn .serv_btn,
.footerBtn a {
width: 50%;
}
.cat_btn,
.serv_btn {
padding: 10px 0px;
}
.cat_btn:active,
.serv_btn:active {
border-bottom: 2px solid blue;
}
.cat_btn a:active,
.serv_btn a:active {
color: blue;
}
.cat_btn a:hover,
.serv_btn a:hover {
text-decoration: none;
}
.bodyy span {
padding: 20px 20px 20px 0;
}
.bodyy a,
.bodyy i {
font-size: 13px;
}
.footerBtn a {
padding: 5px 0px;
border-radius: 5px;
margin: 0px 10px;
color: #303030;
}
.footerBtn a:hover {
text-decoration: none;
}
.footerBtn .save,
.footerBtn .deny {
background-color: #f5f5f5;
}
.footerBtn .save:hover,
.footerBtn .deny:hover {
background-color: #e7e6e6;
}
.footerBtn .close {
background-color: #0096FF;
color: #fff;
}
.footerBtn .close:hover {
background-color: #4eabf7;
}
/* switch buttons */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider1 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider1:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider1 {
background-color: #2196F3;
}
input:focus+.slider1 {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider1:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider1.round {
border-radius: 34px;
}
.slider1.round:before {
border-radius: 50%;
}
/* accordions */
.accordion1 {
margin: 20px 0px;
width: 500px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.accordion1 div p {
font-size: 13px;
}
.accordion1 {
display: flex;
background-color: #fff;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion1:hover {
background-color: #fff;
}
.panel {
padding: 0px 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel p {
font-size: 13px;
}
#services1 {
display: none;
}
/* media query for mobile device */
#media only screen and (max-width: 600px) {
.container {
width: 400px;
}
.footerr>a {
padding: 5px 40px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popUp">
<div class="container1" id="popUpContain">
<div class="header1">
<img src="img/logo.png" alt="" width="20">
<div style="margin-right: auto; margin-left: 10px;"><b>BCT-Touristik</b></div>
<!-- <select name="" id="language">
<option value="DE">DE</option>
<option value="EN">EN</option>
</select> -->
</div>
<div class="bodyy">
<h3>We value your privacy</h3>
<p>We and our partners are using technologies like Cookies or Targeting and process personal data like IP-address or browser information in order to personalize the advertisement you see. This helps us to show you more relevant ads and improves your
internet experience. We also use it in order to measure results or align our website content. Because we value your privacy, we are herewith asking your permission to use the following technologies. You can always change/withdraw your consent
later by clicking on the settings button on the left lower corner of the page.</p>
</div><br>
<div class="footerr">
<ul>
<li><i class="fa fa-link" aria-hidden="true"></i> Privacy Policy</li>
<li><i class="fa fa-link" aria-hidden="true"></i> Legal Notice</li>
<li><i class="fa fa-cog" aria-hidden="true"></i> Travel Condition</li>
<li><i class="fa fa-cog" aria-hidden="true"></i> More information</li>
</ul><br>
<b>Deny</b>
<b>Accept and close</b>
<p>Powered by BCT-Touristik</p>
</div>
</div>
<div class="serviceMainContent1">
<div class="headerBody">
<div class="header1">
<img src="" alt="">
<select name="" id="language">
<option value="DE">DE</option>
<option value="EN">EN</option>
<option value="PT">PT</option>
</select>
✖
</div>
<div class="bodyy">
<h3>Privacy Settings</h3>
<p>This tool helps you to select and deactivate various tags / trackers / analysis tools used on this website. </p>
<span><i class="fa fa-link" aria-hidden="true"></i> Privacy Policy</span>
<span><i class="fa fa-link" aria-hidden="true"></i> Legal Notice</span>
</div>
<div class="cat_serv_btn">
<div class="cat_btn">
<b>Categories</b>
</div>
<div class="serv_btn">
<b>Services</b>
</div>
</div>
<div class="categoryServices1">
<div id="category1">
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div id="services1">
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Services</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Services</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<br>
<div class="footerBtn">
<a class="save" href=""><b>Save</b></a>
<a class="deny" href=""><b>Deny</b></a>
<a class="close" href=""><b>Accept and close</b></a>
</div>
<p>Powered by Usercentrics Consent Management</p>
</div>
</div>
</div>
</div>
</div>

Using js-cookie, you could create a function to handle this logic.
import * as Cookies from 'js-cookie';
function initCookiesPopup() {
window.acceptsCookies = Cookies.get('acceptsCookies');
if (window.acceptsCookies != null) {
// The user has already clicked accept / reject
$('.popUp').remove();
return;
}
// The user has not accepted or rejected cookies
$('.popUp').show()
}
function acceptCookies() { closeCookiesAlert(true) }
function rejectCookies() { closeCookiesAlert(true) }
function closeCookiesAlert(accepted) {
Cookies.set('acceptsCookies', accepted);
window.acceptsCookies = accepted;
$('.popUp').remove();
}
// Initialize popup
initCookiesPopup();
From there you can call acceptCookies() and rejectCookies() within click handlers for the respective buttons.
The popup container <div class="popUp"> should also be hidden by default: <div class="popUp" style="display: none">.
initCookiesPopup() will show it if necessary.
I've made the users selection accessable as a global variable on window.acceptsCookies which you can use elsewhere in your code.

Resizing an image on mouse over without affecting the rest of the content?

I followed the steps here: Changing image size during mouse hover
However, when the image gets resized, the rest of the content moves around the page. How can I prevent this?

Just use transform: scale() in your CSS for the elements pseudo hover rule.
.imgclass:hover {
transform: scale(1.3);
}
#parent {
display: flex;
}
.main {
margin-left: 10px;
width: 200px;
}
.img {
height: 200px;
width: 200px;
background-color: red;
}
.img:hover {
transform: scale(1.3);
}
#cont {
margin-top: 10px;
height: 200px;
width: 400px;
background-color: green;
}
<div id="parent">
<img class="img" src="https://zoodegranby.com/content/images/_300xAUTO_fit_center-center/Panda_280x280.jpg">
<div class="main">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum."
</div>
</div>
</div>
<div id="cont"><div>

Another method is to wrap the image into container and set image's position to absolute:
.imgBox,
.imgBox > img
{
width: 50px;
height: 50px;
}
span.imgBox
{
display: inline-block;
}
.imgBox
{
position: relative;
}
.imgBox > img
{
position: absolute;
}
.imgBox:hover > img
{
width: 200px;
height: 200px;
}
<span>text before</span>
<span class="imgBox">
<img id="image" src="https://www.google.com/images/srpr/logo11w.png" align="middle" alt="Img1"/>
</span>
<span>text after</span>
<div class="imgBox">
<img id="image2" src="https://www.google.com/images/srpr/logo11w.png" align="middle" alt="Img1"/>
</div>
<span>text bottom</span>

Multiple radio buttons as filters

Problem
I am trying to create a double filter, where you can combine filters from multiple categories. For example, first category of filters are years, and the second one types of media. I want to make so that you can filter only through the years, media type or both year x type of media (Music form the 1960s). Also, I'm trying to keep selected filters highlighted, somehow so you can keep track of which ones are active (I tried to make them bold, and it works for first set of filters, but fails for the second. How do I solve this problem?
Codepen
https://codepen.io/erutuf/pen/ZPwdBq
Attempt
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
.filterDiv {
float: left;
background-color: white;
color: black;
width: 37vw;
line-height: 100px;
text-align: center;
margin: 5px;
display: none;
margin-right: 15px;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 0;
padding-right: 40px;
background-color: white;
cursor: pointer;
font-size: 16px;
font-weight: normal;
}
.btn:hover {}
.btn.active {
font-weight: bold;
}
.content {
font-size: 16px;
line-height: 20px;
text-align: left;
}
<div id="myBtnContainer" align="center" style="line-height: 20pt">
<!-- <button class="btn active" onclick="filterSelection('all')"> Show all</button> Show ALL -->
<button class="btn active" onclick="filterSelection('ShowAll')">Show all</button>
<button class="btn" onclick="filterSelection('1950')">1950</button>
<button class="btn" onclick="filterSelection('1960')">1960</button>
<button class="btn" onclick="filterSelection('1970')">1970</button>
</div>
<br>
<div id="myBtnContainer" align="center" style="line-height: 20pt">
<!-- <button class="btn active" onclick="filterSelection('all')"> Show all</button> Show ALL -->
<button class="btn" onclick="filterSelection('AllMedia')">All Media</button>
<button class="btn" onclick="filterSelection('Movies')">Movies</button>
<button class="btn" onclick="filterSelection('Music')">Music</button>
<button class="btn" onclick="filterSelection('Newspapers')">Newspapers</button>
</div>
<br><br>
<div class="filterDiv AllShapes ShowAll 1950 Newspapers">
<div class="content">
1950 Newspapers Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="filterDiv AllShapes ShowAll 1960 Music">
<div class="content">
1960 Music Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="filterDiv AllShapes ShowAll 1960 Newspapers">
<div class="content">
1960 Newspapers Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>

The simplest way would be to use <label> and type="radio" inputs.
You can style the inner <i> element, adjacent (+) to the :checked input.
Store the filter references (props) into a data-filterable="value1 value2 valueZ" space delimited.
The trick is to:
on change event, get the checked inputs values as Array.
Hide all elements (add a .is-hidden class)
get a filtered subset of element to show - based on whether all the checked values are present in the data-filterable props (also as array).
The below example will work for any number of filter-sets:
const el_filters = document.querySelectorAll('[name="year"], [name="type"]'),
el_filterable = document.querySelectorAll('[data-filterable]');
const applyFilter = () => {
// Filter checked inputs
const el_checked = [...el_filters].filter(el => el.checked && el.value);
// Collect checked inputs values to array
const filters = [...el_checked].map(el => el.value);
// Get elements to filter
const el_filtered = [...el_filterable].filter(el => {
const props = el.getAttribute('data-filterable').trim().split(/\s+/);
return filters.every(fi => props.includes(fi))
});
// Hide all
el_filterable.forEach(el => el.classList.add('is-hidden'));
// Show filtered
el_filtered.forEach(el => el.classList.remove('is-hidden'));
}
// Assign event listener
el_filters.forEach(el => el.addEventListener('change', applyFilter));
// Init
applyFilter();
/* FILTER INPUTS */
.filterInputs {
padding-bottom: 5px;
}
.filterInputs input {
display: none;
}
.filterInputs label {
display: inline-block;
position: relative;
padding: 10px 20px;
cursor: pointer;
user-select: none; /* prevent highlight */
}
.filterInputs i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 2px #0bf;
z-index: -1;
}
.filterInputs input:checked + i {
background: #0bf;
}
/* HELPER CLASSES */
.is-hidden {
display: none;
}
<div class="filterInputs">
<label><input type="radio" name="year" value="" checked><i></i>All years</label>
<label><input type="radio" name="year" value="1950"><i></i>1950</label>
<label><input type="radio" name="year" value="1960"><i></i>1960</label>
<label><input type="radio" name="year" value="1970"><i></i>1970</label>
</div>
<div class="filterInputs">
<label><input type="radio" name="type" value=""><i></i>All types</label>
<label><input type="radio" name="type" value="movies"><i></i>Movies</label>
<label><input type="radio" name="type" value="music" checked><i></i>Music</label>
<label><input type="radio" name="type" value="newspapers"><i></i>Newspapers</label>
</div>
<div data-filterable="1950 newspapers">1950 Newspapers</div>
<div data-filterable="1960 music">1960 Music</div>
<div data-filterable="1960 newspapers">1960 Newspapers</div>

I used the attribute selector([filter][group]) for this scenario,
(function(){
const selectedFilters = [];
// [].slice.call => converts HTMLCollection to Array
const yearFilters = [].slice.call(document.querySelectorAll('[filter][group="year"]'));
const mediaFilters = [].slice.call(document.querySelectorAll('[filter][group="media"]'));
const allFilters = yearFilters.concat(mediaFilters);
const filterContents = [].slice.call(document.querySelectorAll('.filterDiv'));
// add click event to all filters
allFilters.forEach((filter) => {
filter.addEventListener('click', filterToggle);
});
function filterToggle() {
const filter = this.getAttribute('filter');
const group = this.getAttribute('group');
resetMediaFilters();
if(group === 'year') {
resetYearFilters();
mediaFilters[0].classList.add('active');
}
this.classList.add('active');
applyFilter();
}
function resetYearFilters() {
yearFilters.forEach(filter => filter.classList.remove('active'));
}
function resetMediaFilters() {
mediaFilters.forEach(filter => filter.classList.remove('active'));
}
function resetFilterContent() {
filterContents.forEach(content => content.classList.remove('show'));
}
function applyFilter() {
const selectedFilters = [].slice.call(document.querySelectorAll('[filter].active'))
.map(filter => filter.getAttribute('filter'));
// class starts with number is a invalid query selector, so using attribute selector for class
const selector = ["filterDiv"].concat(selectedFilters).map(filter => '[class~="'+ filter +'"]').join('');
resetFilterContent();
document.querySelectorAll(selector).forEach(content => content.classList.add('show'));
}
// initialize
applyFilter();
})();
.filterDiv {
float: left;
background-color: white;
color: black;
width: 37vw;
line-height: 100px;
text-align: center;
margin: 5px;
display: none;
margin-right: 15px;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 0;
padding-right: 40px;
background-color: white;
cursor: pointer;
font-size: 16px;
font-weight: normal;
}
.btn:hover {
}
.btn.active {
font-weight: bold;
}
.content{
font-size:16px;
line-height:20px;
text-align:left;
}
<div id="myBtnContainer" align="center" style="line-height: 20pt">
<button class="btn active" filter="ShowAll" group="year">Show all</button>
<button class="btn" filter="1950" group="year">1950</button>
<button class="btn" filter="1960" group="year">1960</button>
<button class="btn" filter="1970" group="year">1970</button>
</div>
<br>
<div id="myBtnContainer" align="center" style="line-height: 20pt">
<button class="btn active" filter="AllMedia" group="media">All Media</button>
<button class="btn" filter="Movies" group="media">Movies</button>
<button class="btn" filter="Music" group="media">Music</button>
<button class="btn" filter="Newspapers" group="media">Newspapers</button>
</div>
<br><br>
<div class="filterDiv AllMedia ShowAll 1950 Newspapers">
<div class="content">
1950 Newspapers Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="filterDiv AllMedia ShowAll 1960 Music">
<div class="content">
1960 Music Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="filterDiv AllMedia ShowAll 1960 Newspapers">
<div class="content">
1960 Newspapers Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>

You have a document.getElementsByClassName() function in javascript that may help you here.
DOCS: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
You can obtain an array of elements that match the class you want to target and you can then iterate over them to add/remove the hidden property or css class that makes them shown or hide.
The same can be applied for the buttons you want to make bolder.
Pseudocode example:
Click the RED filter
Iterate over all elements on the page and
If it has the RED class, make hidden property = false
Otherwise, make hidden property = true
Then, iterate over all buttons of type COLOUR
If it's the RED button, add it the css class for btn_active
Otherwise, remove the btn_active class
If the button clicked is ALL, the logic is a bit different but it's just a matter of playing with the if-elses.
Remember you also have the addClass and removeClass methods on each element. You don't have to convert the class list to an array of classes and iterate over them. It's much more simpler than that:
https://www.w3schools.com/howto/howto_js_remove_class.asp

Javascript - Loading Multiple functions onLoad

I started learning javascript this week and I'm getting my head round the basics. I've started building what will be a "FAQ" section for a page that uses a toggle switch to open and close target divs.
However, by default the div's display is set to visible. I've put a function in that will set this to hidden, so that the dropdown's are collapsed on page load. I've tried stacking them (the toggle function, and display functions), separating them with a semi-colon within "onLoad" in the body tag.
Now, before I applied these functions to run "onLoad" both worked fine. However now only the 2nd function works that toggles the divs, but the function stating to have the divs collapsed onLoad is not.
Where am I going wrong here?
Also, seeing as I'm new to this, if there's a better way, or more shorthand version of this feel free to let me know :)
function toggleOnLoad() {
document.getElementById('dropdown01').style.display = 'none';
}
function toggleFunction() {
var dropDown = document.getElementById('dropdown01');
var dropDownCollapse = document.getElementById('toggle-image').src = "Images/banner_toggle_collapse.png";
var dropDownExpand = document.getElementById('toggle-image').src = "Images/banner_toggle_expand.png";
if (dropDown.style.display != 'none') {
dropDown.style.display = 'none';
document.getElementById('toggle-image').src = dropDownExpand;
} else {
dropDown.style.display = '';
document.getElementById('toggle-image').src = dropDownCollapse;
}
}
css: body {
background-color: #cccccc;
padding: 0;
margin: 0;
}
.container {
margin-left: 20%;
margin-right: 20%;
background-color: white;
padding: 1em 3em 1em 3em;
}
.toggle-header {
padding: 0.5em;
background-color: #0067b1;
overflow: auto;
}
#toggle {
border: none;
width: 300;
height: 3em;
background-color: #0067b1;
outline: 0;
}
.button-container {
float: right;
margin-right: 0.5em;
display: inline-block;
}
.dropdowns {
padding: 2em;
background-color: #eeeeee;
}
HTML & Javascript:
<body onLoad="toggleOnLoad(); toggleFunction()">
<div class="container">
<div class="toggle-header">
<div class="button-container" title="">
<button id="toggle" onClick="toggleFunction()">
<img id="toggle-image" src="" alt="toggle" style="max-height: 100%; max-width: 100%">
</button>
</div>
</div>
<div id="dropdown01" class="dropdowns">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
</div>
</div>
</body>

Do create an init function manually.
window.addEventListener("load", myInit, true); function myInit(){ // call your functions here.... };
By doing this you can call that set of functions anytime.

The better way to do it i believe is to call your functions inside window.load instead of the body as follows:
window.onload=function(){
toggleOnLoad();
toggleFunction();
}

Your idea is correct. Probably we can simplify the implementation.
First, let's define a new class hidden to remove elements.
.hidden {
display: none;
}
Now we just can toggle this class to show and hide the content.
function toggleFunction() {
...
content.classList.toggle('hidden')
...
}
Also remove toggleOnLoad function from the body and add hidden to the content div
<body onLoad="toggleFunction()">
...
<div id="dropdown01" class="dropdowns hidden">
...
</body>
Finally, the toggleFunction must add the right class based on the hidden class of the content.
function toggleFunction() {
dropDown.classList.remove(expand, collapse)
...
const state = content.classList.contains('hidden') ? collapse : expand
dropDown.classList.add(state)
}
This is functional snipped:
const content = document.getElementById('dropdown01')
const dropDown = document.querySelector('#toggle-image')
const collapse = 'fa-plus-square'
const expand = 'fa-minus-square'
function toggleFunction() {
dropDown.classList.remove(expand, collapse)
content.classList.toggle('hidden')
const state = content.classList.contains('hidden') ? collapse : expand
dropDown.classList.add(state)
}
body {
background-color: #cccccc;
padding: 0;
margin: 0;
}
.container {
margin-left: 20%;
margin-right: 20%;
background-color: white;
padding: 1em 2em 1em 2em;
}
.toggle-header {
padding: 0.5em;
background-color: #0067b1;
overflow: auto;
}
#toggle {
border: none;
width: 300px;
height: 2em;
background-color: #0067b1;
outline: 0;
}
.button-container {
float: right;
margin-right: 0.5em;
display: inline-block;
}
.dropdowns {
padding: 1em;
background-color: #eeeeee;
}
.hidden {
display: none;
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<body onLoad="toggleFunction()">
<div class="container">
<div class="toggle-header">
<div class="button-container" title="">
<i id="toggle-image" class="fas fa-plus-square" onClick="toggleFunction()"></i>
</div>
</div>
<div id="dropdown01" class="dropdowns hidden">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
</body>