Pop-up background not covering navigation bar - javascript

Explanation
I have this pop-up showing when clicking a button, but for some reason, when displayed, the background isn't covering the navigation bar. I've already tried to change the z-index, but nothing happens. It'll only cover the navigation bar when there's no animation.
Code
You can also see it in JSFiddle (full screen).
var custom = function() {
var handlePopup = function() {
var overlay = $('.popup-overlay'),
close = $('.popup-close'),
trigger = $('.popup-trigger'),
parent = $('.popup-container');
trigger.on('click', function() {
$(this).closest('.popup-container').addClass('popup-overlay-show');
});
close.on('click', function(e) {
e.stopPropagation();
parent.removeClass('popup-overlay-show');
});
}
return {
init: function() {
handlePopup();
},
};
}();
$(document).ready(function() {
custom.init();
});
.navbar {
background-color: yellow;
}
.overlay {
cursor: pointer;
}
.btn {
margin-top: 100px;
}
.popup-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
background: rgba(0, 0, 0, 0.55);
}
.popup-overlay-show {
z-index: 1;
}
.popup-overlay-show .popup-overlay {
opacity: 1;
visibility: visible;
z-index: 2000 !important;
}
.popup-content {
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 600px;
height: auto;
background: #fff;
padding: 35px;
margin: 0 auto;
transform: translate3d(0, -50%, 0);
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
</header>
<div class="popup-container">
<div class="popup-trigger animated fadeInUp">
<div class="overlay">
<a class="btn btn-default" href="#" role="button">Open</a>
</div>
<div class="popup-overlay">
<div class="popup-content">
Close
<div class="row">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
</body>
</html>
Thanks in advance,
Luiz.


Try This CSS
CSS
.navbar {
background-color: yellow;
z-index:10;
}
.popup-container{
position: relative;
}
.popup-overlay-show {
z-index: 16;
}
Link For Reference


As Iscmaro suggested above, it's also possible to solve it by using Bootstrap's modal, as you can see below.
You can also see it on JSFiddle (full screen).
.navbar {
background-color: yellow;
}
.btn {
margin-top: 100px;
}
.vertical-alignment-helper {
display: table;
height: 100%;
width: 100%;
}
.vertical-align-center {
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
</header>
<button type="button" class="btn btn-default animated fadeInUp" data-toggle="modal" data-target="#myModal">Open</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
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>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
</body>
</html>

Related

how to add background image in behind slider?

I made a slider which when clicked will change the background. At the beginning of opening the page the background is white. How do I add a background image at the beginning of the page?
I want the first page to have a background image. If one of the features is clicked the background image will change:
after clicking the icon, the image that should have been replaced is not replaced, because I want the first time I open this page there is a background image and after clicking the icon the background image is replaced.
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
background-image: url('images/background.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 625px;
}
* {
box-sizing: border-box;
}
.slider {
width: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.center .slick-center h3 {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
}
.center h3 {
opacity: 0.8;
transition: all 300ms ease;
}
.hidden {
display: none;
}
.sg-feature img {
width: 100px;
height: 100px;
}
/* html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body{
background-image: url('images/background.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 625px;
}
* {
box-sizing: border-box;
}
.slider {
width: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.center .slick-center h3 {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
}
.center h3 {
opacity: 0.8;
transition: all 300ms ease;
}
.hidden{
display : none;
}
.hidden1{
display : none;
}
.hidden2{
display : none;
}
.hidden3{
display : none;
}
.hidden4{
display : none;
}
.hidden5{
display : none;
}
.hidden6{
display : none;
}
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/tes.css">
<link rel="stylesheet" type="text/css" href="slick-master/slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick-master/slick/slick-theme.css">
<title>Title</title>
</head>
<body>
<div>
<img src="image/b1.jpg" style="z-index: -1;">
<section class="background center slider variable-width variable-height ">
<div class="text-center sg-feature" data-bg="image/b1.jpg">
<img class="rounded mx-auto d-block" src="image/eat.png" />
<h3>Eat and Come</h3>
<br />
<div class="sg-feature-desc hidden">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b2.jpg">
<img class="rounded mx-auto d-block" src="image/grab.png" />
<h3>Grab</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b3.jpg">
<img class="rounded mx-auto d-block" src="image/experience.png" />
<h3>Experience</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b4.jpg">
<img class="rounded mx-auto d-block" src="image/Secret sale.png" />
<h3>Secret Sale</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b5.jpg">
<img class="rounded mx-auto d-block" src="image/sale.png" />
<h3>Hashtag Sale</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b6.jpg">
<img class="rounded mx-auto d-block" src="image/loyalty.png" />
<h3>Loyalty</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b7.jpg">
<img class="rounded mx-auto d-block" src="image/auction.png" />
<h3>Auction</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick-master/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 6,
speed: 300,
focusOnSelect: true,
variableWidth: true,
variableHeight: true,
adaptiveHeight: true,
arrows: false,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}]
});
let $slidesDescriptions = $('.sg-feature-desc');
$(document).on('click', '.sg-feature', function() {
$slidesDescriptions.addClass('hidden');
let $slide = $(this);
$slide.find('.sg-feature-desc').removeClass('hidden');
$('body').css('background-image', `url('${$slide.data('bg')}')`);
});
</script>
</body>
</html>

background-repeat: no-repeat; Might be the problem here, as the size of the selected image might be too small and so your replaceable background image is hiding it.

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>

Toggle & Accordian collapsing together

I have a bootstrap 3 accordion and I am trying to get it to work with toggle switches.
Currently everything works as it should except that the toggles don't toggle OFF if the panel is collapsed by one of the other accordion panels. Basically I am looking for the toggles to toggle on when a panel is open and toggle off when a panel is collapsed. So that the toggles mimic the accordion. Only the toggle is on if the panel is expanded, and all other toggles and panels would be off / collapsed.
Does anyone know a way to get this to happen?
$("div.panel-heading").on("click",function(event) {
var target = $(event.target);
if (target.is('input:checkbox')) return;
var checkbox = $(this).find("input[type='checkbox']");
if( !checkbox.prop("checked") ){
checkbox.prop("checked",true);
} else {
checkbox.prop("checked",false);
}
});
/*---- Toggle Switches ------*/
.checkbox-switch {
/* border: 0.1em solid #444; */
border-radius: 20px;
display: inline-block;
font-size: 16px;
width: 2em;
height: 1em;
overflow: hidden;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
top: 3px;
left: 0px;
float: right;
}
.checkbox-switch > input {
display: none;
}
.checkbox-switch > input ~ .checkbox-switch-inner {
margin-left: -2.5em;
-webkit-transition: margin-left 0.2s ease;
-moz-transition: margin-left 0.2s ease;
-o-transition: margin-left 0.2s ease;
transition: margin-left 0.2s ease;
}
.checkbox-switch > input:checked ~ .checkbox-switch-inner {
margin-left: -1.5em;
}
.checkbox-switch > .checkbox-switch-inner {
display: block;
width: 8em;
height: 2em;
color: #fff;
overflow: hidden;
}
.checkbox-switch-inner > * {
display: block;
float: left;
height: 2em;
line-height: 2em;
}
.checkbox-switch-inner > .checkbox-switch-on {
/* background: #31A354; */
background: #14aa4b;
width: 3em;
padding-left: 1em;
}
.checkbox-switch-inner > .checkbox-switch-off {
background: #b3b3b3;
width: 3em;
padding-right: 1em;
text-align: right;
}
#ecosystem-collapse .checkbox-switch-inner > .checkbox-switch-on {
background: #23527C;
}
#reference-collapse .checkbox-switch-inner > .checkbox-switch-on {
background: #CE691B;
}
.checkbox-switch-inner > .checkbox-switch-handle {
background: #eee;
width: 1em;
height: 1em;
margin-left: -3.5em;
border: 0.1em solid #999;
border-radius: 20px;
}
#dataBox {
position: absolute;
background-color: white;
max-width: 350px;
margin-left: 10px;
padding: 5px;
z-index: 9999;
}
.panel-header {
cursor: pointer;
}
/*---- END Toggle Switches ------*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 1
<label for="00" class="tn-headline">TITLE 1</label>
<label class="checkbox-switch" onclick="javascript:showonlyone('nutlayer1');toggleDiv('nutlayer1');"> <!-- The onclick attribute is required by iOS -->
<input type="checkbox" class="radio tn-switch" id="00" checked="checked"/>
<span class="checkbox-switch-inner">
<span class="checkbox-switch-on"></span>
<span class="checkbox-switch-off"></span>
<span class="checkbox-switch-handle"></span>
</span>
</label>
</h4>
</div></a>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">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>
<div class="panel panel-default">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 2
<label for="01" class="tsin-headline">TITLE 2</label>
<label class="checkbox-switch" onclick> <!-- The onclick attribute is required by iOS -->
<input class="radio tsin-switch" type="checkbox" id="01" >
<span class="checkbox-switch-inner">
<span class="checkbox-switch-on"></span>
<span class="checkbox-switch-off"></span>
<span class="checkbox-switch-handle"></span>
</span>
</label>
</h4>
</div></a>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">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>
<div class="panel panel-default">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3"><div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 3<label for="01" class="tsin-headline">TITLE 3</label>
<label class="checkbox-switch" onclick> <!-- The onclick attribute is required by iOS -->
<input class="radio tsin-switch" type="checkbox" id="01" >
<span class="checkbox-switch-inner">
<span class="checkbox-switch-on"></span>
<span class="checkbox-switch-off"></span>
<span class="checkbox-switch-handle"></span>
</span>
</label>
</h4>
</div></a>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">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>
</div>

Example :https://jsfiddle.net/3yjt4Lah/3/
$("div.panel-heading").on("click",function(event) {
var target = $(event.target);
if (target.is('input:checkbox')) return;
$("#accordion").each(function(){
var checkbox = $(this).find("input[type='checkbox']");
checkbox.prop("checked",false);
})
var checkbox = $(this).find("input[type='checkbox']");
if( !checkbox.prop("checked") ){
checkbox.prop("checked",true);
} else {
checkbox.prop("checked",false);
}
});

You need to find that last panel clicked, so when a new panel is clicked the previous checkbox will clear:
var lastPanel = $("div.panel-heading, #collapse1"); //this is the default panel
$("div.panel-heading").on("click",function(event) {
var target = $(event.target);
if (target.is('input:checkbox')) return;
var checkbox = $(this).find("input[type='checkbox']");
if(lastPanel && target !== lastPanel)
lastPanel.find("input[type='checkbox']").prop("checked",false);
if( !checkbox.prop("checked") ){
checkbox.prop("checked",true);
} else {
checkbox.prop("checked",false);
}
lastPanel = target;
});
See FIDDLE

Categories