Weird space on page with slick slider?

Weird space on page with slick slider? - javascript

I'm creating a website with slick slider and have got the plugin working smoothly, but there is a weird space on the left that is causing the site to have a horizontal slider. I have tried maxing out the viewports of the containers but to no avail? Is there a way to remove this white space so that there is no horizontal slider.
$(document).ready(function(){
$('.forss').slick({
centerMode: true,
centerPadding: '0w',
slidesToShow: 3.625,
});
});
// navigation.css
body {
background-color: #5336F8;
font-family: Futura PT;
}
ul {
position: relative;
left: 3vw;
list-style-type: none;
overflow: hidden;
margin: 3vw 1vw 0 0;
background-color: transparent;
display: inline-block;
}
li {
float: right;
font-size: 1.5vw;
}
li a {
display: block;
font-weight: lighter;
float: right;
color: white;
margin: 0 0.5vw 0 0.5vw;
text-align: center;
padding: 0.75vw 2vw;
text-decoration: none;
}
li a:not(.active):hover {
background-color: white;
color: #5336F8;
border: 1px;
}
.active {
border: 1px solid white;
}
.logo {
font-family: Futura PT;
float: left;
font-size: 4vw;
margin: 2vw 5vw 0 3.5vw;
color: white;
font-weight: 550;
}
.logo:hover {
color: #5336F8;
text-shadow: 1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
// style.css
div.slick-slider {
width:100vw;
}
.forss {
display: flex;
align-items: center;
box-sizing: border-box;
}
.forss .items {
width: 30vw;
height: 35vw;
margin-top: 7vw;
}
.forss .items img {
width: 24.840625vw;
height: 31.25vw;
}
.slick-slide {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
transition:transform 0.5s ease-in-out;
}
.slick-slide:focus {
outline: none;
}
div.slick-track {
width: 100vw;
}
div.slick-center {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
transform: scale(1.15);
transition: transform 0.5s ease-in-out;
}
#arrows {
width: 1vw;
height: 1vw;
text-align: center;
position: relative;
}
.logo {
font-family: 'Futura-Normal';
font-size: 4vw;
color: white;
float: left;
margin-left: 2vw;
}
.top {
position: absolute;
mix-blend-mode: screen;
left: 0;
right: 0;
opacity: 100%;
transition: opacity 0.15s;
}
.top:hover {
opacity: 0%;
}
.bottom img {
position: relative;
left: 0;
right: 0;
}
input.prev:focus {
outline-width: 0;
}
input.next:focus {
outline-width: 0;
}
.add-on {
font-family: (var(--font));
font-size: 1.75vw;
color: white;
margin-left: 2vw;
margin-right: 2vw;
margin-bottom: 1vw;
}
#inner {
position: relative;
width: 100vw;
margin-bottom: 4vw;
}
#centered {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slider</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<!--style.css-->
<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1T5ZdOkN6sg2weNQkehStYX2mDo1f0ajJ">
<!--navigation.css-->
<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1IgyMKG47riH_HmnHoPLH16qhI0UtnK34">
</head>
<body>
<h2 class="logo">The Lowdown.</h2>
<ul>
<li>CONTACT US</li>
<li><a class="active" href="#edition">EDITIONS</a></li>
<li>ARTICLES</li>
<li>ABOUT US</li>
<li>HOME</li>
</ul>
<div class="forss">
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://i.ibb.co/h2VBt78/May-Edition-Back.png" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://i.ibb.co/h2VBt78/May-Edition-Back.png" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt="">
</div>
</div>
<div id="inner">
<div id="centered">
<input type="image" name="previous" src="https://i.ibb.co/dt3fngT/previous-arrow.png" class="prev" id="arrows" alt="Tool Tip"><span class="add-on"> READ ME </span><input type="image" name="next" src="https://i.ibb.co/nL7jtPS/next-arrow.png" class="next" id="arrows" alt="Tool Tip">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/custom.js"></script>
<script src="https://drive.google.com/uc?export=view&id=1jzlbwu186Lrp0yF_NIcH9Zk2tSFA2PdL"></script>

There are some issues with using the viewport width (vw) for the slideshow elements (slideshow and slide navigation). Since there is padding on the body element, the content width will include that, which forces the page width to equal (viewport width + body left padding + body right padding). I was able to remove the horizontal scrollbar by changing/adding the CSS below:
div.slick-slider {
// width:100vw;
}
#inner {
width: 100% !important;
...
}
body {
margin-left: 0;
margin-right: 0;
...
}
Note: these changes may not be reflected in the SO preview below. For some reason, I'm not seeing the updates to the .slick-slider and body CSS reflected there.
$(document).ready(function(){
$('.forss').slick({
centerMode: true,
centerPadding: '0w',
slidesToShow: 3.625,
});
});
// navigation.css
body {
background-color: #5336F8;
font-family: Futura PT;
margin-left: 0;
margin-right: 0;
}
ul {
position: relative;
left: 3vw;
list-style-type: none;
overflow: hidden;
margin: 3vw 1vw 0 0;
background-color: transparent;
display: inline-block;
}
li {
float: right;
font-size: 1.5vw;
}
li a {
display: block;
font-weight: lighter;
float: right;
color: white;
margin: 0 0.5vw 0 0.5vw;
text-align: center;
padding: 0.75vw 2vw;
text-decoration: none;
}
li a:not(.active):hover {
background-color: white;
color: #5336F8;
border: 1px;
}
.active {
border: 1px solid white;
}
.logo {
font-family: Futura PT;
float: left;
font-size: 4vw;
margin: 2vw 5vw 0 3.5vw;
color: white;
font-weight: 550;
}
.logo:hover {
color: #5336F8;
text-shadow: 1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
// style.css
div.slick-slider {
// width:100vw;
}
.forss {
display: flex;
align-items: center;
box-sizing: border-box;
}
.forss .items {
width: 30vw;
height: 35vw;
margin-top: 7vw;
}
.forss .items img {
width: 24.840625vw;
height: 31.25vw;
}
.slick-slide {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
transition:transform 0.5s ease-in-out;
}
.slick-slide:focus {
outline: none;
}
div.slick-track {
margin: 0;
}
div.slick-center {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
transform: scale(1.15);
transition: transform 0.5s ease-in-out;
}
#arrows {
width: 1vw;
height: 1vw;
text-align: center;
position: relative;
}
.logo {
font-family: 'Futura-Normal';
font-size: 4vw;
color: white;
float: left;
margin-left: 2vw;
}
.top {
position: absolute;
mix-blend-mode: screen;
left: 0;
right: 0;
opacity: 100%;
transition: opacity 0.15s;
}
.top:hover {
opacity: 0%;
}
.bottom img {
position: relative;
left: 0;
right: 0;
}
input.prev:focus {
outline-width: 0;
}
input.next:focus {
outline-width: 0;
}
.add-on {
font-family: (var(--font));
font-size: 1.75vw;
color: white;
margin-left: 2vw;
margin-right: 2vw;
margin-bottom: 1vw;
}
#inner {
position: relative;
width: 100% !important;
margin-bottom: 4vw;
}
#centered {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slider</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<!--style.css-->
<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1T5ZdOkN6sg2weNQkehStYX2mDo1f0ajJ">
<!--navigation.css-->
<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1IgyMKG47riH_HmnHoPLH16qhI0UtnK34">
</head>
<body>
<h2 class="logo">The Lowdown.</h2>
<ul>
<li>CONTACT US</li>
<li><a class="active" href="#edition">EDITIONS</a></li>
<li>ARTICLES</li>
<li>ABOUT US</li>
<li>HOME</li>
</ul>
<div class="forss">
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://i.ibb.co/h2VBt78/May-Edition-Back.png" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://i.ibb.co/h2VBt78/May-Edition-Back.png" class="bottom" alt="">
</div>
<div class="items">
<img src="https://i.ibb.co/FWpLzhw/April-Edition-Overlay.png" class="top" alt="" >
<img src="https://lh3.googleusercontent.com/FbRKb0dt5bz6QOt34jA7jl43XFkHFQf7T0j3wL6b1Z0zSVMNO2DlWl7UAUoTd_dDvCZFhbW822HYyJJQkgH8K0o2dXUrv5uzZl2qrXYF7UWVqqHVinvAqdqz057ULytRu9IE3N0pIw=w2400" class="bottom" alt="">
</div>
</div>
<div id="inner">
<div id="centered">
<input type="image" name="previous" src="https://i.ibb.co/dt3fngT/previous-arrow.png" class="prev" id="arrows" alt="Tool Tip"><span class="add-on"> READ ME </span><input type="image" name="next" src="https://i.ibb.co/nL7jtPS/next-arrow.png" class="next" id="arrows" alt="Tool Tip">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/custom.js"></script>
<script src="https://drive.google.com/uc?export=view&id=1jzlbwu186Lrp0yF_NIcH9Zk2tSFA2PdL"></script>

Related

Change header and content based off the tab selected

I have a menu bar that changes the tab based on which one is selected. Right now both of the headers aren't displaying properly with each of the tabs and I was wondering how I can fix this?
When I move the content-header div into the content div with the associated tab, the styling gets messed up, but when I take it out and leave it where it's at, the header gets duplicated to the other tabs. I have provided a screenshot of what I'm trying to achieve and the code as well.
(How I want to display each tab: Each will have their own header that's specific to the tab selected)
function switchTabs() {
document.querySelectorAll(".tab-button").forEach(link => {
link.addEventListener("click", () => {
const menuBar = link.parentElement;
const tabsContainer = menuBar.parentElement;
const tabNumber = link.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`[data-tab="${tabNumber}"]`)
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tab-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
link.classList.add("tab-button-active");
tabToActivate.classList.add("content-active");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click()
})
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav{
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item{
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#alert{
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*, ::after, ::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover, .button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus, .search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover, .horizontal-tabs a:focus, .horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a + * {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: none;
}
.content-active {
display: flex !important;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a + * {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked + span {
background-color: var(--c-accent-primary);
}
.toggle input:checked + span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus + span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0,0,0,.125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
.tab-button-active{
color: var(--c-accent-primary) !important;
border-bottom: 3px solid var(--c-accent-primary) !important;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StudioPick</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="CSS/settings.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType"
style="position: relative; top: -20px; right: -60px; font-size: 12px !important">Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" />Edit profile
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" />Logout
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
<a class="tab-button" href="#" data-for-tab="1">Profile</a>
<a class="tab-button" href="#" data-for-tab="2">My Rooms</a>
<a class="tab-button" href="#" data-for-tab="3">Session Management</a>
<a class="tab-button" href="#" data-for-tab="4">Payment History</a>
<a class="tab-button" href="#" data-for-tab="5">Edit Payment</a>
</div>
<div class="content" data-tab="1">
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your profile</h2>
<p>Edit your profile information such email, username, password, etc.</p>
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your studio rooms</h2>
<p>Add, delete, and edit the room images for your studio profile.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Add a room</span>
</a>
</div>
</div>
<div class="content" data-tab="2">
<div class="content-panel">
<div class="vertical-tabs">
View Rooms
Manage Services
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Room A</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>Room B</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Room C</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
<div class="content" data-tab="3">
<div class="content-panel">
<div class="vertical-tabs">
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script>
<script src="Javascript/settings.js"></script>
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>

There are a few things you need to do.
Add a wrapper to content-panel and content main with these styles:
width: 100%;
display: flex;
flex-direction: row;
Move your content-headers inside the content class
Finally provide a width of 100% to content-headers
And here is the working example:
https://codepen.io/saadramay/pen/NWMgxrB

how to make a down arrow disappear when a user scroll down?

When a user scrolls down, how can I make the down arrow in the first view disappear?
0
I want to make the down arrow icons disappear when a user scrolls down the page. Although I searched it on another question of stackoverflow, I cannot find a solution. I made jQuery code. I am not sure it is correct or not.
this is the code on fiddle https://jsfiddle.net/92mtjzew/
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
$(window).scroll(function(){
if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
$('.box').show();
} else {
$('.box').hide();
}
});
#media only screen and (max-width: 2000px) {
html, body {
width: 100%;
height: 100%;
margin: 0;
background: linear-gradient(#FBDA61, #FF3CAC);
overflow-x: hidden;
color: cornsilk;
}
a {
text-decoration: none;
}
h1 {
font-size: 26pt;
}
button {
text-transform: uppercase;
font-weight: bold;
}
html {
font-family: "helvetica neue", sans-serif;
}
.box {
position: absolute;
top: 94%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: fixed
}
.box span {
display: fixed;
width: 20px;
height: 20px;
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: rotate(45deg);
margin: -10px;
transition: all .3s;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
z-index: 1;
animation: animate 2s infinite;
}
.box span:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: -2;
}
.box span:before {
content: '';
color: cornsilk;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #d3d3d3;
transition: all .3s;
z-index: -1;
}
.box span:hover {
color: #fff;
}
.box span:hover:before {
width: 100%;
}
.box span:nth-child(1) {
opacity: 0.3;
z-index: 1;
}
.box span:nth-child(2) {
opacity: 0.5;
z-index: 1;
}
.logo h1 {
margin: 0px
}
.logo img{
text-align: left;
float: left;
padding: 15px 0 0 0;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 80px;
line-height: 70px;
background-color: black;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: cornsilk;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
display: none;
float: right;
color: cornsilk;
}
#toggle {
display: none;
}
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="img/image1.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image2.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image3.jpg" width="1274px" height="640px" alt=""></div>
</div>
</section>
<div class="box">
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="js/main.js"></script>
<script>
function scrollDown(){
var businessPage = document.getElementById("businessPage");
businessPage.scrollIntoView();
}
</script>
</body>
</html>

I think this is use full for you... after 100px scroll down the arrow icon will disappear.
In the above mention code, you use the scroll on the body. you can also add this on full document by changing the class on the scroll function.
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
// $(window).scroll(function(){
// if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
// $('.box').show();
// } else {
// $('.box').hide();
// }
// });
// scroll selector
$('body').scroll(function() {
// scroll disatance
if($(this).scrollTop() >= 100){
$('.box').hide();
}
else
{
$('.box').show();
}
});
#media only screen and (max-width: 2000px) {
html, body {
width: 100%;
height: 100%;
margin: 0;
background: linear-gradient(#FBDA61, #FF3CAC);
overflow-x: hidden;
color: cornsilk;
}
a {
text-decoration: none;
}
h1 {
font-size: 26pt;
}
button {
text-transform: uppercase;
font-weight: bold;
}
html {
font-family: "helvetica neue", sans-serif;
}
.box {
position: absolute;
top: 94%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: fixed
}
.box span {
display: fixed;
width: 20px;
height: 20px;
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: rotate(45deg);
margin: -10px;
transition: all .3s;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
z-index: 1;
animation: animate 2s infinite;
}
.box span:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: -2;
}
.box span:before {
content: '';
color: cornsilk;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #d3d3d3;
transition: all .3s;
z-index: -1;
}
.box span:hover {
color: #fff;
}
.box span:hover:before {
width: 100%;
}
.box span:nth-child(1) {
opacity: 0.3;
z-index: 1;
}
.box span:nth-child(2) {
opacity: 0.5;
z-index: 1;
}
.logo h1 {
margin: 0px
}
.logo img{
text-align: left;
float: left;
padding: 15px 0 0 0;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 80px;
line-height: 70px;
background-color: black;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: cornsilk;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
display: none;
float: right;
color: cornsilk;
}
#toggle {
display: none;
}
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="css/font-awesome.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="header">
<div class="logo">
<!-- <h1><img src="img/logo.png" widht="473px" height="50px"></h1> -->
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div>
<img src="https://images.unsplash.com/photo-1558981420-bf351ce8e3ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="1274px" height="640px" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1558981420-bf351ce8e3ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="1274px" height="640px" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1558981420-bf351ce8e3ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="1274px" height="640px" alt="">
</div>
</div>
</section>
<div class="box">
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- <!-- <script src="js/main.js"></script> --> -->
<script>
// function scrollDown(){
// var businessPage = document.getElementById("businessPage");
// businessPage.scrollIntoView();
// }
</script>
<script src="main.js"></script>
</body>
</html>

Problem to overlay content when hamburger icon is pressed on mobile

I want my navbar to cover the whole screen when the hamburger menu is pressed on smaller screens.
I added the .pushclass (see the jquery and css) to fire when the .navbar-toggle-icon is pushed.
for some reason I can't find out why it is not working and in addition to that problem, the Jquery that makes the navbar sticky on scroll is not working after I added the function to fire the .push class.
So as my code stands now it is not giving me the full screen navbar on mobile and the navbar is no longer sticky on scroll.
i've spent most of the day trying to find a fix for this but with out any luck.
Can someone please held me here?
here is a fiddle to the code
$(window).scroll(function(){
var stickyNav = $('.nav-header'),
scroll = $(window).scrollTop();
if (scroll >=100)
{stickyNav.addClass('sticky');
$('.nav-header').css("margin-top", "0");
}
else {stickyNav.removeClass('sticky');
$('.nav-header').css("margin-top", "1vh");
}
});
$(document).ready(function(){
$('.bg-img').each(function() {
var $el = $(this).find('> img');
if ($el.length > 0) {
$(this).css('background-image', 'url(' + $el.attr('src') + ')');
}
});
$('.navbar-toggler-icon').on('click', function(e) {
if (!$('html').hasClass('push')) {
$('html').addClass('push');
} else {
$('html').removeClass('push');
};
e.preventDefault();
console.log('its alive');
});
});
/* $background_color_2: rgba(0, 0, 0, 0);
*/
body {
color: #4b4b4b;
}
nav {
padding: 20px 0 20px;
margin-bottom: 20px;
margin-top: 20px;
}
figure {
margin: 0;
}
.bg-img {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.bg-img > img {
display: none;
}
.header-row {
background-color: #c2002d;
border-bottom: 1px solid #d3d3d3;
}
.bg-banner {
background: url("https://images.unsplash.com/photo-1560953945-a4d94ab4d351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 15vh;
border-left: 5px solid #fff;
}
.banner-logo {
background-color: #c2002d;
padding: 20px;
}
.banner-logo a.brand-text {
text-decoration: none;
font-size: 2em;
color: #fff;
}
.nav-header {
border-bottom: 1px solid #d3d3d3;
background-color: #fff;
z-index: 10000;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#media (min-width: 768px) {
.nav-wrapper {
margin-top: 10vh;
border: none;
border-bottom: 1px solid #d3d3d3;
}
}
.navbar {
padding: 0;
}
.navbar-toggler:active, .navbar-toggler:focus {
outline: none;
}
.navbar-custom .navbar-toggler-icon {
width: 24px;
height: 17px;
background-image: none;
position: relative;
transition: all 300ms linear;
}
.navbar-custom .navbar-toggler-icon::after, .navbar-custom .navbar-toggler-icon::before {
width: 24px;
position: absolute;
height: 1px;
background-color: #000;
top: 0;
left: 0;
content: '';
z-index: 2;
transition: all 300ms linear;
}
.navbar-custom .navbar-toggler-icon::after {
top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
border-color: transparent;
}
.nav-link {
position: relative;
padding: 5px 0 !important;
display: inline-block;
color: #4b4b4b;
font-weight: 500;
transition: all 200ms linear;
}
.nav-item:hover .nav-link {
color: #3b3b3b;
}
.nav-item.active .nav-link {
color: #c2002d;
}
.nav-item::after {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
content: '';
background-color: #c2002d;
opacity: 0;
transition: all 200ms linear;
}
.nav-item:hover::after {
bottom: 0;
opacity: 1;
}
.nav-item.active:hover::after {
opacity: 0;
}
.nav-item {
position: relative;
margin-left: 50px;
transition: all 200ms linear;
}
.navbar-brand > img {
display: block;
}
#media (max-width: 767px) {
.push {
overflow: hidden;
height: 100%;
}
.push body {
overflow: hidden;
height: 100%;
}
.push .navbar-toggler-icon::before {
opacity: 0;
}
.push .navbar-toggler-icon::after {
top: 8px;
}
.push .navbar-toggler-icon span::before {
top: 8px;
}
.push .navbar-toggler-icon span::before .push #nav-wrapper {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.content {
min-height: 100vh;
order: 2;
padding-top: 5vh;
}
#media (min-width: 1200px) {
.content {
margin-left: 200px;
margin-right: 200px;
}
}
.box-item {
/* height: 7vh;
*/
margin-bottom: 10px;
max-width: 100vw;
padding: 17px 36px 7px 17px;
background: #fff;
border: 1px solid lightgray;
transition: all 0.3s ease;
}
.box-item > .descr {
flex-grow: 1;
}
.box-item > .descr header {
position: relative;
margin-bottom: 5px;
padding-bottom: 5px;
}
.box-item > .descr header::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 37px;
height: 3px;
border-bottom: 1px solid;
}
.box-item > .descr header h4 {
margin-top: 0;
margin-bottom: 0;
font-size: 1rem;
}
.box-item > .descr p {
margin-bottom: 0;
font-size: 0.8rem;
}
.box-item > .descr a {
transition: none;
}
.box-item > .descr a:hover {
color: inherit;
}
.box-item > .descr a:focus {
color: inherit;
}
.box-item > .descr footer {
margin-top: 0px;
text-align: right;
}
.box-item > .descr .see-more {
position: relative;
bottom: 6px;
font-size: 12px;
line-height: 1px;
}
.box-item:hover {
background-color: #c2002d;
color: #fff;
}
.box-item:hover > .descr .see-more::before {
color: inherit;
}
.box-item:focus {
background-color: #c2002d;
color: #fff;
}
.box-item:focus > .descr .see-more::before {
color: inherit;
}
.box-item > .bg-img {
border: 1px solid lightgray;
margin-bottom: 10px;
/* max-height: 80px;
*/
}
#media (max-width: 767px) {
.box-item {
padding: 20px;
}
.box-item > .bg-img {
padding-bottom: 40%;
}
}
#media (min-width: 768px) {
.box-item {
display: -ms-flexbox;
display: -webkit-flex;
}
.box-item > * {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.box-item > .bg-img {
flex-basis: 100px;
min-width: 100px;
max-width: 100px;
margin-right: 28px;
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<div class="container-fluid">
<div class="row header-row">
<div class="col-md-3 banner-logo text-center mx-auto my-auto">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
<div class="container-fluid nav-header" id="nav-wrapper">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-custom navbar-expand-md ">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item ">
<a class="nav-link " href="#"> home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Collections</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
</ul>
</div>
</nav> <!-- Navabar Handrit Ends -->
</div>
</div>
</div>
<div class="container d-flex w-100">
<div class="col content">
<div class="row inst-spacer">
<div class="col-lg-12 col-xl-12 ">
<div class="box-item animation-top d-lg-flex flex-lg-row mb-3">
<figure class="bg-img"><img src="https://images.unsplash.com/photo-1561028526-675bc91a7dc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="#"></figure>
<div class="descr">
<header>
<h4>title</h4>
</header>
<p>name: Some name </p>
<p> origin: some origin </p>
</div>
<!-- / descr -->
</div>
<!-- / box-item -->
</div>
<!-- / col -->
</div>
</div>
</div>
<footer>
#Footer
</footer>
</body>

If I understand your question correctly you want the .nav-bar to fill the view port height when you are on smaller devices. If that's what you want then all you need is to add this to your css.
.navbar-nav{
min-height: 100vh;
}
then you don't need the .push class and the Jquery function for the .push class. It is just complicating things.
I don't follow what you are saying about the .sticky it seems to be ok. But perhaps you want to post another question regarding that issue.
Here is a working snippet for you with the added .navbar-nav class.
$(window).scroll(function(){
var stickyNav = $('.nav-header'),
scroll = $(window).scrollTop();
if (scroll >=100)
{stickyNav.addClass('sticky');
$('.nav-header').css("margin-top", "0");
}
else {stickyNav.removeClass('sticky');
$('.nav-header').css("margin-top", "1vh");
}
});
$(document).ready(function(){
$('.bg-img').each(function() {
var $el = $(this).find('> img');
if ($el.length > 0) {
$(this).css('background-image', 'url(' + $el.attr('src') + ')');
}
});
});
/* $background_color_2: rgba(0, 0, 0, 0);
*/
body {
color: #4b4b4b;
}
nav {
padding: 20px 0 20px;
margin-bottom: 20px;
margin-top: 20px;
}
figure {
margin: 0;
}
.bg-img {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.bg-img > img {
display: none;
}
.header-row {
background-color: #c2002d;
border-bottom: 1px solid #d3d3d3;
}
.bg-banner {
background: url("https://images.unsplash.com/photo-1560953945-a4d94ab4d351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80") no-repeat center center fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 15vh;
border-left: 5px solid #fff;
}
.banner-logo {
background-color: #c2002d;
padding: 20px;
}
.banner-logo a.brand-text {
text-decoration: none;
font-size: 2em;
color: #fff;
}
.nav-header {
border-bottom: 1px solid #d3d3d3;
background-color: #fff;
z-index: 10000;
}
.navbar-nav{
min-height: 100vh;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#media (min-width: 768px) {
.nav-wrapper {
margin-top: 10vh;
border: none;
border-bottom: 1px solid #d3d3d3;
}
}
.navbar {
padding: 0;
}
.navbar-toggler:active, .navbar-toggler:focus {
outline: none;
}
.navbar-custom .navbar-toggler-icon {
width: 24px;
height: 17px;
background-image: none;
position: relative;
transition: all 300ms linear;
}
.navbar-custom .navbar-toggler-icon::after, .navbar-custom .navbar-toggler-icon::before {
width: 24px;
position: absolute;
height: 1px;
background-color: #000;
top: 0;
left: 0;
content: '';
z-index: 2;
transition: all 300ms linear;
}
.navbar-custom .navbar-toggler-icon::after {
top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
border-color: transparent;
}
.nav-link {
position: relative;
padding: 5px 0 !important;
display: inline-block;
color: #4b4b4b;
font-weight: 500;
transition: all 200ms linear;
}
.nav-item:hover .nav-link {
color: #3b3b3b;
}
.nav-item.active .nav-link {
color: #c2002d;
}
.nav-item::after {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
content: '';
background-color: #c2002d;
opacity: 0;
transition: all 200ms linear;
}
.nav-item:hover::after {
bottom: 0;
opacity: 1;
}
.nav-item.active:hover::after {
opacity: 0;
}
.nav-item {
position: relative;
margin-left: 50px;
transition: all 200ms linear;
}
.navbar-brand > img {
display: block;
}
#media (max-width: 767px) {
.push {
overflow: hidden;
height: 100%;
}
.push body {
overflow: hidden;
height: 100%;
}
.push .navbar-toggler-icon::before {
opacity: 0;
}
.push .navbar-toggler-icon::after {
top: 8px;
}
.push .navbar-toggler-icon span::before {
top: 8px;
}
.push #navbarDropdown {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.content {
min-height: 100vh;
order: 2;
padding-top: 5vh;
}
#media (min-width: 1200px) {
.content {
margin-left: 200px;
margin-right: 200px;
}
}
.box-item {
/* height: 7vh;
*/
margin-bottom: 10px;
max-width: 100vw;
padding: 17px 36px 7px 17px;
background: #fff;
border: 1px solid lightgray;
transition: all 0.3s ease;
}
.box-item > .descr {
flex-grow: 1;
}
.box-item > .descr header {
position: relative;
margin-bottom: 5px;
padding-bottom: 5px;
}
.box-item > .descr header::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 37px;
height: 3px;
border-bottom: 1px solid;
}
.box-item > .descr header h4 {
margin-top: 0;
margin-bottom: 0;
font-size: 1rem;
}
.box-item > .descr p {
margin-bottom: 0;
font-size: 0.8rem;
}
.box-item > .descr a {
transition: none;
}
.box-item > .descr a:hover {
color: inherit;
}
.box-item > .descr a:focus {
color: inherit;
}
.box-item > .descr footer {
margin-top: 0px;
text-align: right;
}
.box-item > .descr .see-more {
position: relative;
bottom: 6px;
font-size: 12px;
line-height: 1px;
}
.box-item:hover {
background-color: #c2002d;
color: #fff;
}
.box-item:hover > .descr .see-more::before {
color: inherit;
}
.box-item:focus {
background-color: #c2002d;
color: #fff;
}
.box-item:focus > .descr .see-more::before {
color: inherit;
}
.box-item > .bg-img {
border: 1px solid lightgray;
margin-bottom: 10px;
/* max-height: 80px;
*/
}
#media (max-width: 767px) {
.box-item {
padding: 20px;
}
.box-item > .bg-img {
padding-bottom: 40%;
}
}
#media (min-width: 768px) {
.box-item {
display: -ms-flexbox;
display: -webkit-flex;
}
.box-item > * {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.box-item > .bg-img {
flex-basis: 100px;
min-width: 100px;
max-width: 100px;
margin-right: 28px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<body>
<header>
<div class="container-fluid">
<div class="row header-row">
<div class="col-md-3 banner-logo text-center mx-auto my-auto">
webpage
</div>
<div class="col-md-9 bg-banner">
</div>
</div>
</div>
</header>
<div class="container-fluid nav-header" id="nav-wrapper">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-custom navbar-expand-md ">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item ">
<a class="nav-link " href="#"> home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Collections</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
</ul>
</div>
</nav> <!-- Navabar Handrit Ends -->
</div>
</div>
</div>
<div class="container d-flex w-100">
<div class="col content">
<div class="row inst-spacer">
<div class="col-lg-12 col-xl-12 ">
<div class="box-item animation-top d-lg-flex flex-lg-row mb-3">
<figure class="bg-img"><img src="https://images.unsplash.com/photo-1561028526-675bc91a7dc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="#"></figure>
<div class="descr">
<header>
<h4>title</h4>
</header>
<p>name: Some name </p>
<p> origin: some origin </p>
</div>
<!-- / descr -->
</div>
<!-- / box-item -->
<div class="box-item animation-top d-lg-flex flex-lg-row mb-3">
<figure class="bg-img"><img src="https://images.unsplash.com/photo-1561028526-675bc91a7dc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="#"></figure>
<div class="descr">
<header>
<h4>title</h4>
</header>
<p>name: Some name </p>
<p> origin: some origin </p>
</div>
<!-- / descr -->
</div>
<!-- / box-item -->
</div>
<!-- / col -->
</div>
</div>
</div>
<footer>
#Footer
</footer>
</body>

Pop up doesn't show me the photo I want

Problem with 'Classes' and GetElementById?
As you can see in my CodePen, there are some photo in the Gallery section, when you click on someone of that, there is a pop up shows up, i need to open each different photo in that pop up when you click on that, and some info about the product, near the photo on the pop up, I think there is a problem in the Var on JS, I have to name the classes of the photo from child 1 to child 15?
I don't understand where the problem is
window.onload=function(){
var selectable = document.getElementsByClassName('child');
for(var i = 0, j = selectable.length; i < j; i++) {
selectable[i].addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";
});
}
document.querySelector('.close').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "none";
});
}
#import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono');
body {
font-family: 'IBM Plex Mono', monospace;
background-color: #000000;
height: 100%;
}
.header{
height: 100vh;
color: #f1f1f1;
display: flex;
flex-direction: column;
align-items: center;
background-size: cover;
justify-content: center;
margin-bottom: 30px;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 30px;
}
.topnav {
overflow: hidden;
background-color: #000000;
height: 25rem;
align-items: center;
align-content: center;
text-align: center;
margin: 2px;
}
.topnav a {
float: center;
display: inline-block ;
color: #f2f2f2;
text-align: center;
padding: 15px 15px 15px 15px;
text-decoration: none;
font-size: 17px;
margin: 3px;
}
.topnav a:hover {
background-color: #66ff66;
color: black;
}
#logo-container img {
width:40%;
height: auto;
float: center;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: center;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
#Livello_1_copia{
right: 0; bottom: 10rem; top: 2rem;
min-width: 100%; min-height:100%;
width: auto; height: auto;
z-index: 100;
background: repeat;
background-size: cover;
display: block;
position: absolute;
pointer-events: none;
color: whitesmoke;
}
.svg{
fill:#ffffff;
padding-top: 15rem;
top: 20rem;
height: 100%;
z-index: 800;
}
/*OVERLAY_Box-container della galleria*/
.overlays {
display: flex;
flex-wrap: wrap;
content: '';
position: absolute;
background: rgba(0, 0, 0, 0);
border-radius: 5px;
top: 25rem;
right: 5rem;
left: 5rem;
align-items: center;
margin:7%;
}
div.child:hover {
cursor: crosshair;
}
/*Parent*/
.parent {
display: flex;
flex-wrap: wrap;
top: 30rem;
padding-top: 0rem;
z-index: 50;
}
/*Child=Figlio del genitore= contenitore sigole foto*/
.child {
flex: 1 0 20%; /* explanation below */
margin: 6px;
height: flex;
background: rgba(0, 0, 0, 0);
align-self: center;
border-radius: 6px;
margin-bottom: 50px;
}
/*Img del figlio*/
.child img {
max-width: 100%;
height: flex;
margin: 0;
bottom: 10rem;
border-radius: 6px;
margin-bottom: 6px;
}
.overlay p {
font-size:1vw;
font-weight: bold;
color: #00ff00;
}
.child .overlay {
margin-bottom: -40px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
border-radius: 6px;
color: #f1f1f1;
height: 100%;
width: 100%;
transition: .30s ease;
opacity:0;
color: white;
font-size: 13px;
text-align: center;
}
#Avatar:hover .overlay {
opacity: 1;
}
#Avatar1:hover .overlay {
opacity: 1;
}
#Avatar2:hover .overlay {
opacity: 1;
}
#Avatar3:hover .overlay {
opacity: 1;
}
#Avatar4:hover .overlay {
opacity: 1;
}
#Avatar5:hover .overlay {
opacity: 1;
}
#Avatar6:hover .overlay {
opacity: 1;
}
#Avatar7:hover .overlay {
opacity: 1;
}
#Avatar8:hover .overlay {
opacity: 1;
}
#Avatar9:hover .overlay {
opacity: 1;
}
#Avatar10:hover .overlay {
opacity: 1;
}
#Avatar11:hover .overlay {
opacity: 1;
}
#Avatar12:hover .overlay {
opacity: 1;
}
#Avatar13:hover .overlay {
opacity: 1;
}
#Avatar14:hover .overlay {
opacity: 1;
}
#Avatar15:hover .overlay {
opacity: 1;
}
/*OVERBOX TESTO IMG*/
.overbox {
background-color: #4CAF50;
position: absolute;
top: 2px;
left: 0;
right: 0;
color: #ffffff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
max-width: 30vh;
height: 24vh;
padding: 130px 20px;
flex: 1 0 20%; /* explanation below */
border-radius: 6px;
margin: 6px;
font-size: 10px;
}
.child:hover .overbox { opacity:50; }
.child .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.child .title {
font-size: 2.5em;
text-transform: uppercase;
opacity: 50%;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.child:hover .title,
.child:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.child .tagline {
font-size: 0.8em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}
.child:hover .tagline,
.child:focus .tagline {
opacity: 1;
transform: translateX(20px);
-webkit-transform: translateX(0px);
}
/* - fine . OVERBOX TESTO IMG*/
#videogallery{
top: 10rem;
}
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -100;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #4CAF50;
color: #ffffff;
text-align: center;
margin-top: auto;
}
.bg-modal{
width: 100%;
height: 100%;
background-color: rgba(63,191,63,0.64);
position: fixed;
top:0;
justify-content: center;
align-items: center;
display: none;
}
.modal-content {
height: 500px;
width: 500px;
background-color: white;
border-radius: 4px;
text-align: center;
padding: 20px;
position: relative;
}
#fotopopup{
width: 100%;
}
.close {
position: absolute;
top: 0;
right: 10px;
font-size: 42px;
color: #333;
transform: rotate(45deg);
cursor: pointer;
&:hover {
color: #666;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PINSTRIPE GRILLZ</title>
<script type="text/javascript" src="gallery\js\jquery.js"></script>
<script type="text/javascript" src="gallery\js\main.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<link rel="stylesheet" href="gallery\css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header>
<div class="topnav" id="myTopnav">
<div id="logo-container"><a href="index.html"><img src="https://i.ibb.co/FgJ2BYn/PINSTRIPE-Logo-Site.png" alt="PINSTRIPE-Logo-Site" border="0">
</div>
Gallery
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<div class="embed-responsive embed-responsive-16by9">
<video playsinline autoplay muted loop id="videogallery">
<source src="gallery\img\bg_2.mp4" type="video/mp4">
</video>
</div>
<div class="overlays">
<div class="child" id="Avatar15"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>White&yellow gold snakes #maibunia</p></div>
</div>
<div class="child" id="Avatar14"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>#dg_bladee 🏝</p></div>
</div>
<div class="child" id="Avatar13"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>xxxstxr</p></div>
</div>
<div class="child" id="Avatar12"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>#ziskasecuris</p></div>
</div>
<div class="child" id="Avatar11"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>LV fangs #lui.vi</p></div>
</div>
<div class="child" id="Avatar10"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>#prettypukee coin</p></div>
</div>
<div class="child" id="Avatar9"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>Black gold biohazard #freddy.boy_bstrd</p></div>
</div>
<div class="child" id="Avatar8"><img src="https://i.ibb.co/7SPJ5Jz/VL.jpg" alt="VL" border="0">
<div class="overlay"><p>Silver</p></div>
</div>
<div class="child" id="Avatar7"><img src="gallery\img/skll.jpg" >
<div class="overlay"><p>10x10 cobalt chrome</p></div>
</div>
<div class="child" id="Avatar6"><img src="gallery\img/4.jpg" >
<div class="overlay"><p>#dg_bladee</p></div>
</div>
<div class="child" id="Avatar5"><img src="gallery\img/ggvlff.jpg" >
<div class="overlay"><p>#imran_potato</p></div>
</div>
<div class="child" id="Avatar4"><img src="gallery\img/spnet.jpg" >
<div class="overlay"><p>Spiderweb</p></div>
</div>
<div class="child" id="Avatar3"><img src="gallery\img/Evil.jpg" >
<div class="overlay"><p>Evil / #yungsherman95</p></div>
</div>
<div class="child" id="Avatar2"><img src="gallery\img/shrk.jpg" >
<div class="overlay"><p>Razor shark teeth</p></div>
</div>
<div class="child" id="Avatar1"><img src="gallery\img/wirte.jpg" >
<div class="overlay"><p>8 bottom Barbwire</p></div>
</div>
</div>
<div class="svg-container unclickable" onclick="return false">
<svg class="svg 1.1 svg-container" id="Livello_1_copia" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 722.3 312.2" style="enable-background:new 0 0 722.3 312.2; transform: scale(1,-1)" xml:space="preserve">
<g>
<path d="M39.1,297.4c9.7,6.6,19.3,7.9,25.2,7.9c3.3,0,5.5-0.4,5.7-0.4l3.2-0.6l-3-1.3c-0.8-0.3-18.3-8.1-12.7-26.3l0.9-2.8
l-2.4,1.6c-5.3,3.6-10.8,4.7-15.7,2.9c-4.7-1.7-8.3-5.7-9.9-11.4l-0.4,0.1c0.1-0.2,0.2-0.5,0.3-0.7c0.9-2.2,2.4-4.2,4.3-5.5
c1-0.7,2-1.2,3.1-1.6c1.1-0.4,2.3-0.7,3.4-0.8c2.3-0.4,4.8-0.3,7.2-0.1l8.4,0.7l-7.9-2.6c-2.1-0.7-4.3-1.2-6.5-1.5
c-2.2-0.2-4.5-0.2-6.7,0.2c-2.2,0.4-4.3,1.2-6.2,2.4c0,0,0,0,0,0V216c0,0,0,0,0,0c1.4,0.2,2.8,0.2,4.2-0.2c1.4-0.3,2.7-0.8,3.9-1.5
c1.2-0.7,2.3-1.5,3.4-2.6l3.3-3.2l-4.4,1.6c-1.2,0.5-2.6,0.8-4,1c-1.4,0.2-2.8,0.1-4.1-0.3c-0.8-0.2-1.6-0.6-2.3-1V6.8
c0,0-4.7,27.4-7.9,30.2L21,37.4v226C21,268.4,22.3,285.9,39.1,297.4z M23,38.3c2.6-3.2,3.4-6.6,4.3-11.5V208
c-0.2-0.3-0.4-0.5-0.6-0.8c-0.3-0.3-0.4-0.6-0.6-0.9l-0.6-1c0.2,0.7,0.3,1.5,0.6,2.2c0.3,0.7,0.6,1.4,1.1,2v0.4h0.3
c0.4,0.5,0.9,0.9,1.4,1.4l1,0.6c0.3,0.2,0.7,0.3,1.1,0.5c1.5,0.6,3.2,0.7,4.7,0.6c0,0,0.1,0,0.1,0c-0.9,0.5-1.8,1-2.8,1.4
c-1.2,0.4-2.4,0.6-3.7,0.7c-1.3,0.1-2.6-0.2-3.9-0.5c0.6,0.3,1.1,0.6,1.8,0.9v43.4h0.5c-1.1,1.1-1.9,2.5-2.2,4c0.7-1.7,1.9-3,3.4-4
h0.3v-0.2c0.2-0.1,0.3-0.2,0.5-0.3c1.8-1,3.9-1.5,5.9-1.7c1.5-0.2,3.1-0.2,4.7-0.1c-1.2,0.2-2.3,0.6-3.5,1c-1.2,0.5-2.4,1.2-3.4,2
c-2.1,1.7-3.5,4-4.3,6.5c-0.1,0.5-0.2,0.9-0.3,1.4l-0.5,0.1c0.1,0.3,0.2,0.7,0.3,1c-0.2,1.7-0.2,3.4,0.1,5c0-1.3,0.1-2.5,0.4-3.8
c2.1,5.1,5.8,8.9,10.4,10.5c4.5,1.6,9.6,1.1,14.4-1.4l-2.1,2.9l-1.3,0.9c-7.6,5.8-18.1-0.1-18.2-0.2l-3.6-2l2.3,3.5
c8.7,13.4,24.5,16.6,25.1,16.7l4.3,0.8L57,299c-0.3-0.2-6.9-5.3-4.8-15.2l0.2-1l2.2-3.1c-2.1,12.9,7,20.4,11.8,23.5
c-5.1,0.3-15.7-0.2-26.3-7.4c-16-10.9-17.2-27.6-17.2-32.4V38.3z M53.2,297.8c-4.5-1.5-12.4-4.9-18.2-11.9c3.7,1.3,9.6,2.5,15-0.3
C49.4,291.3,51.4,295.4,53.2,297.8z"/>
</g>
</svg>
<svg class="svg 1.1 svg-container" id="Livello_1_copia" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 722.3 312.2" style="enable-background:new 0 0 722.3 312.2;transform: scale(-1,-1)" xml:space="preserve">
<g>
<path d="M39.1,297.4c9.7,6.6,19.3,7.9,25.2,7.9c3.3,0,5.5-0.4,5.7-0.4l3.2-0.6l-3-1.3c-0.8-0.3-18.3-8.1-12.7-26.3l0.9-2.8
l-2.4,1.6c-5.3,3.6-10.8,4.7-15.7,2.9c-4.7-1.7-8.3-5.7-9.9-11.4l-0.4,0.1c0.1-0.2,0.2-0.5,0.3-0.7c0.9-2.2,2.4-4.2,4.3-5.5
c1-0.7,2-1.2,3.1-1.6c1.1-0.4,2.3-0.7,3.4-0.8c2.3-0.4,4.8-0.3,7.2-0.1l8.4,0.7l-7.9-2.6c-2.1-0.7-4.3-1.2-6.5-1.5
c-2.2-0.2-4.5-0.2-6.7,0.2c-2.2,0.4-4.3,1.2-6.2,2.4c0,0,0,0,0,0V216c0,0,0,0,0,0c1.4,0.2,2.8,0.2,4.2-0.2c1.4-0.3,2.7-0.8,3.9-1.5
c1.2-0.7,2.3-1.5,3.4-2.6l3.3-3.2l-4.4,1.6c-1.2,0.5-2.6,0.8-4,1c-1.4,0.2-2.8,0.1-4.1-0.3c-0.8-0.2-1.6-0.6-2.3-1V6.8
c0,0-4.7,27.4-7.9,30.2L21,37.4v226C21,268.4,22.3,285.9,39.1,297.4z M23,38.3c2.6-3.2,3.4-6.6,4.3-11.5V208
c-0.2-0.3-0.4-0.5-0.6-0.8c-0.3-0.3-0.4-0.6-0.6-0.9l-0.6-1c0.2,0.7,0.3,1.5,0.6,2.2c0.3,0.7,0.6,1.4,1.1,2v0.4h0.3
c0.4,0.5,0.9,0.9,1.4,1.4l1,0.6c0.3,0.2,0.7,0.3,1.1,0.5c1.5,0.6,3.2,0.7,4.7,0.6c0,0,0.1,0,0.1,0c-0.9,0.5-1.8,1-2.8,1.4
c-1.2,0.4-2.4,0.6-3.7,0.7c-1.3,0.1-2.6-0.2-3.9-0.5c0.6,0.3,1.1,0.6,1.8,0.9v43.4h0.5c-1.1,1.1-1.9,2.5-2.2,4c0.7-1.7,1.9-3,3.4-4
h0.3v-0.2c0.2-0.1,0.3-0.2,0.5-0.3c1.8-1,3.9-1.5,5.9-1.7c1.5-0.2,3.1-0.2,4.7-0.1c-1.2,0.2-2.3,0.6-3.5,1c-1.2,0.5-2.4,1.2-3.4,2
c-2.1,1.7-3.5,4-4.3,6.5c-0.1,0.5-0.2,0.9-0.3,1.4l-0.5,0.1c0.1,0.3,0.2,0.7,0.3,1c-0.2,1.7-0.2,3.4,0.1,5c0-1.3,0.1-2.5,0.4-3.8
c2.1,5.1,5.8,8.9,10.4,10.5c4.5,1.6,9.6,1.1,14.4-1.4l-2.1,2.9l-1.3,0.9c-7.6,5.8-18.1-0.1-18.2-0.2l-3.6-2l2.3,3.5
c8.7,13.4,24.5,16.6,25.1,16.7l4.3,0.8L57,299c-0.3-0.2-6.9-5.3-4.8-15.2l0.2-1l2.2-3.1c-2.1,12.9,7,20.4,11.8,23.5
c-5.1,0.3-15.7-0.2-26.3-7.4c-16-10.9-17.2-27.6-17.2-32.4V38.3z M53.2,297.8c-4.5-1.5-12.4-4.9-18.2-11.9c3.7,1.3,9.6,2.5,15-0.3
C49.4,291.3,51.4,295.4,53.2,297.8z"/>
</g>
</svg>
</div>
<div class="footer">
<p>© PinStripe Custom Jewelery .</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- Modal Section -->
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<img src="" alt="" id="fotopopup">
</div>
</div>
</body>
</html>

You can retrieve the image from the clicked element and pass it as the src of your element inside the popup like this :
window.onload=function(){
var selectable = document.getElementsByClassName('child');
for(var i = 0, j = selectable.length; i < j; i++) {
selectable[i].addEventListener("click", function(e) {
document.getElementById('fotopopup').setAttribute('src', e.target.attributes['src'].value);
document.querySelector('#text-block').innerHTML = e.target.nextElementSibling.innerHTML;
document.querySelector('.bg-modal').style.display = "flex";
});
}
document.querySelector('.close').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "none";
});
}
HTML of modal
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<img src="" alt="" id="fotopopup">
<span id="text-block"></span>
</div>
</div>
Live demo

Jquery Draggable UI | Change image size when it is dragged into container

I am using the Jquery Draggable UI: http://jqueryui.com/draggable/
I'm working on a project where I can drag four images into 4 different containers. What I want to do is change the size of the image to the size of the container that it is dropped into. The image should revert back to its original size when it is taken outside of the container.
EXAMPLE: http://jsfiddle.net/W8yaz/546/
Here is my code as of right now:
HTML
<div class="bordered-boxes">
<ul>
<li class="squaredotted">
<div style="width:205px; height: 205px; border: 1px dotted #eee;" class='snappable'>
</div>
</li>
<li class="squaredotted">
<div class="" style="width:175px; height: 175px; border: 1px dotted #eee;">
</div>
</li>
<li class="squaredotted">
<div class="" style="width:145px; height: 145px; border: 1px dotted #eee;">
</div>
</li>
<li class="squaredotted">
<div class="" style="width:110px; height: 110px; border: 1px dotted #eee;">
</div>
</li>
</ul>
<div class="" style="position: absolute; text-align: left; top: 50%; transform: translateY(-50%); left: 760px; font-weight: bold; font-size: 15px; opacity: .7; font-style: italic;">
<p>Least
<br />Important</p>
</div>
<div class="" style="position: absolute; text-align: left; top: 50%; transform: translateY(-50%); left: -95px; font-weight: bold; font-size: 15px; opacity: .7; font-style: italic;">
<p>Most
<br />Important</p>
</div>
</div>
<div class="card-wrapper animation">
<ul>
<li class="square">
<div class="container">
<div class="card" id="incapacitation-icon">
<div class="front">
<img src="assets/icons/icon-incapacitation.svg" width="100%" />
<div class="more-info">
<img src="assets/icon-info.svg" />
</div>
</div>
<div class="back">
<section>
<h4>Incapacitation</h4>
<p>Confining Dangerous People</p>
</section>
<div class="close-icon">
x
</div>
</div>
</div>
</div>
</li>
<li class="square">
<div class="container">
<div class="card" id="deterrence-icon">
<div class="front">
<img src="assets/icons/icon-deterrence.svg" width="100%" />
<div class="more-info">
<img src="assets/icon-info.svg" />
</div>
</div>
<div class="back">
<section>
<h4>Deterrence</h4>
<p>Setting an Example</p>
</section>
<div class="close-icon">
x
</div>
</div>
</div>
</div>
</li>
<li class="square">
<div class="container">
<div class="card" id="rehabilitation-icon">
<div class="front">
<img src="assets/icons/icon-rehabilitation.svg" width="100%" />
<div class="more-info">
<img src="assets/icon-info.svg" />
</div>
</div>
<div class="back">
<section>
<h4>Rehabilitation</h4>
<p>Breaking the Cycle of Crime</p>
</section>
<div class="close-icon">
x
</div>
</div>
</div>
</div>
</li>
<li style="margin-right:0;" class="square">
<div class="container">
<div class="card" id="retribution-icon">
<div class="front">
<img src="assets/icons/icon-retribution.svg" width="100%" />
<div class="more-info">
<img src="assets/icon-info.svg" />
</div>
</div>
<div class="back">
<section>
<h4>Retribution</h4>
<p>An Eye for An Eye</p>
</section>
<div class="close-icon">
x
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
CSS
.card-wrapper li {
height: 203px;
position: relative;
list-style-type: none;
}
.card-wrapper .card {
width: 100%;
height: 100%;
position: absolute;
perspective:800px;
}
.card-wrapper .card div {
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
z-index:10;
}
.card-wrapper .card .front {
}
.card-wrapper .card .back {
background: #8d797a;
z-index:0;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
border: 3px solid white;
}
.card-wrapper .card .back h4{
font-size: 20px;
color:#4b3839;
margin-bottom:5px;
font-weight: bold;
}
.card-wrapper .card .back section {
padding: 20px;
text-align: center;
padding-top:30px;
}
.card-wrapper .card .back p {
font-size: 18px;
font-weight: 200;
color:white;
margin: 0px;
line-height: 30px;
}
.card-wrapper .card.flip .front {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
z-index:0;
}
.card-wrapper .card.flip .back {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
z-index:10;
}
.card-wrapper .more-info {
font-size: 2em;
width: 1.5em !important;
text-align: center;
line-height: 1.5em;
background: #FFF;
color: #fff;
border-radius: 50px;
position: absolute !important;
top: -28px;
right: -18px;
height: 1.5em !important;
}
.card-wrapper .close-icon {
font-size: 2em;
width: 1.5em !important;
text-align: center;
line-height: 1.5em;
background: #FFF;
color: #fff;
border-radius: 50px;
position: absolute !important;
top: -28px;
right: -18px;
height: 1.5em !important;
}
.card-wrapper .card .close-icon {
display: none;
}
.card-wrapper .card.flip .more-info {
display: none;
}
.card-wrapper .card.flip .close-icon {
display: block;
}
.card-wrapper {
position: absolute;
width: 90%;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
.bottom-row {
position: absolute;
width: 60%;
left: 0;
right: 0;
bottom: 70px;
margin: auto;
}
.bottom-row li {
list-style: none;
width: 20% !important;
display: inline-block;
margin-right: 3% !important;
height: 117px !important;
position: relative;
}
.bottom-row .back {
display: none;
}
.bottom-row .more-info {
display: none;
}
.bottom-row .more-info2 {
display: none;
}
.bordered-boxes {
position: absolute;
width: 75%;
left: 0;
right: 0;
margin: 0 auto;
display: none;
top: 50%;
transform: translateY(-50%);
}
.bordered-boxes ul {
display: table;
width: 100%;
margin: 0px;
padding: 0px;
}
.bordered-boxes ul li {
display: inline-block;
vertical-align: middle;
margin-right: 4%;
}
Javascript
$('.square').draggable({
snap: '.squaredotted',
snapMode: 'inner',
snapTolerance: 25,
});

The answer is here:
How to find out about the "snapped to" element for jQuery UI draggable elements on snap
$(".draggable").draggable({
snap: ".snap",
stop: function(event, ui) {
/* Get the possible snap targets: */
var snapped = $(this).data('draggable').snapElements;
/* Pull out only the snap targets that are "snapping": */
var snappedTo = $.map(snapped, function(element) {
return element.snapping ? element.item : null;
});
/* Process the results in the snappedTo array! */
}
});

Develop Reference

JavaScript is the programming language of the Web.

Weird space on page with slick slider? - javascript

Related

Change header and content based off the tab selected

how to make a down arrow disappear when a user scroll down?

Problem to overlay content when hamburger icon is pressed on mobile

Pop up doesn't show me the photo I want

Jquery Draggable UI | Change image size when it is dragged into container

Categories

Resources