I've made a carousel-slider here and here
but there is a problem.
Here are 3 levels:
1 carousel
2 card with slideshow
3 popup with photo from the card
2nd and 3rd are done through the fancybox. 3rd is called from the 2nd (on the feed it is visible).
After closing the popup, the slideshow in the card stops (where the description is).
What is the issue here?
$('.gallery_slider').owlCarousel({
loop: true,
nav: false,
dots: true,
autoplay: true,
autoplayTimeout: 5000,
autoplaySpeed: 2000,
autoplayHoverPause:false,
items: 1,
protect: true,
responsive:{
600:{
}
}
});
$('.product-item').fancybox({
baseClass: 'fancybox-gallery',
animationEffect: "fade",
animationDuration: 300,
margin: 0,
gutter: 0,
loop: true,
slideShow: {
autoStart: true,
speed: 1000
},
zoom: false,
idleTime: false,
thumbs: {
autoStart : true,
axis : 'x'
},
touch: {
vertical: false
},
buttons: [
'close'
],
afterLoad : function() {
$('.fancybox-gallery .fancybox-image').fancybox({
baseClass: 'fancy-images',
animationEffect: "fade",
animationDuration: 300,
buttons: [
"close"
],
afterLoad : function(instance, current) {
setTimeout(function() {
instance.close();
}, 2000);
},
afterClose: function() {
$('.product-item').trigger('play.fancybox.autoStart');
},
baseTpl:
'<div class="fancybox-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<div class="modal-close" href="javascript:;" onclick="$.fancybox.close();"><svg viewBox="0 0 40 40"><path d="M10,10 L30,30 M30,10 L10,30"></path></svg></div>'+
'<div class="fancybox-infobar">' +
"<span data-fancybox-index></span> / <span data-fancybox-count></span>" +
"</div>" +
'<div class="fancybox-toolbar">{{buttons}}</div>' +
'<div class="fancybox-navigation">{{arrows}}</div>' +
'<div class="fancybox-stage"></div>' +
'<div class="fancybox-caption"></div>' +
"</div>" +
"</div>"
});
$('.gallery_slider').trigger('stop.owl.autoplay');
},
afterClose: function() {
$('.gallery_slider').trigger('play.owl.autoplay');
},
baseTpl:
'<div class="fancybox-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<div class="fancybox-infobar">' +
"<span data-fancybox-index></span> / <span data-fancybox-count></span>" +
"</div>" +
'<div class="fancybox-toolbar">{{buttons}}</div>' +
'<div class="fancybox-navigation">{{arrows}}</div>' +
'<div class="fancybox-stage"></div>' +
'<div class="fancybox-caption"></div>' +
"</div>" +
"</div>"
});
/* gallery */
#gallery {
width: 100%;
background: url(../img/back3.png);
background-size: cover;
padding: 52px 0 100px;
font-family: "MonlyBold";
margin-bottom: 10px;
position: relative;
}
#gallery .wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
}
.gallery_menu {
background: #000;
width: 33%;
height: 150px;
margin: 12px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.gallery_menu:after{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: black;
opacity: 0.5;
z-index: 1;
}
.gallery_menu a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: #e4e4e4;
font-size: 4em;
position: relative;
z-index: 2;
}
.gallery_menu:nth-child(n) {
transition: background-size 1.5s;
}
.gallery_menu:nth-child(n):hover {
background-size: 120%;
}
.gallery_menu:hover:after {
opacity: 0.3;
}
.gallery_menu:nth-child(1) {
background: url(../img/photos/tiffani/27.jpg) center center;
background-size: 100%;
}
.gallery_menu:nth-child(2) {
background: url(../img/photos/fuzing/IMG_9636-21-03-18-07-42.jpeg.jpg) center center;
background-size: 100%;
}
.gallery_menu:nth-child(3) {
background: url(../img/photos/facets/fac.jpg) center center;
background-size: 100%;
}
.gallery_menu:nth-child(4) {
background: url(../img/photos/gravirovka/grav.jpg) center center;
background-size: 100%;
}
.gallery_menu:nth-child(5) {
background: url(../img/photos/mixed/IMG_9715-21-03-18-07-42.jpeg.jpg) center center;
background-size: 100%;
}
.gallery_menu:nth-child(6) {
background: url(../img/photos/psevdo/IMG_0924.JPG) center center;
background-size: 100%;
}
#gallery-1,#gallery-2 {
width: 70%;
height: 500px;
display: none;
}
.gallery_text {
width: 40%;
float: right;
}
.gallery_text p {
color: #000;
}
#gallery .h1 {
margin-bottom: 8px;
}
#gallery .h3{
text-decoration: underline;
margin-top: 20px;
}
.owl-carousel button.owl-dot {
width: 10px;
height: 10px;
border-radius: 20px;
margin: 5px;
border: .5px solid #ddd;
background: #ddd;
}
.owl-carousel button.owl-dot.active {
background: #000;
border: .5px solid #000;
}
/* grid */
/* Style your page (the product list) */
.og-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}
.product {
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
max-width: 300px;
max-height: 200px;
}
.product .product-images,
.product .product-form {
display: none;
}
.product-item img{
max-width: 100%;
}
/* Reposition and redesign fancyBox blocks */
/* This elements contains both blocks */
.fancybox-gallery .fancybox-inner {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: calc(100% - 40px);
height: calc(100% - 40px);
max-width: 900px;
max-height: 400px;
background: #ddd;
}
.fancybox-gallery .fancybox-infobar {
display: none;
}
/* Left block will contain the gallery */
.fancybox-gallery .fancybox-stage {
width: 50%;
}
/* Right block - close button and the form */
.fancybox-gallery .fancybox-caption-wrap {
width: 50%;
height: 100%;
top: 0;
right: 0;
left: auto;
bottom: auto;
background: none;
}
.fancybox-gallery .fancybox-caption {
position: absolute;
/* display: flex; */
border: none;
width: 50%;
right: 0;
top: 0;
}
/* Set position and colors for close button */
.fancybox-gallery .fancybox-button--close {
position: absolute;
top: 0;
right: 0;
background: #F0F0F0;
color: #222;
padding: 7px;
}
.fancybox-gallery .fancybox-button:hover {
color: #111;
background: #e4e4e4;
}
.fancybox-gallery .fancybox-button svg path {
stroke-width: 1;
}
/* Set position of the form */
.fancybox-gallery .fancybox-inner .product-form {
overflow: auto;
position: absolute;
top: 50px;
right: 0;
bottom: 50px;
left: 0;
padding: 0 50px;
text-align: center;
}
.fancybox-gallery .fancybox-caption h3 {
font-weight: 300;
font-size: 52px;
padding: 40px 0 10px;
margin-bottom: 10px;
color: #2c2c2c;
font-family: "MonlyBold";
}
.fancybox-gallery .fancybox-caption p {
font-weight: 400;
font-size: 22px;
line-height: 24px;
color: #6b6b6b;
font-family: "MonlyBold";
}
.fancybox-gallery .fancybox-image, .fancybox-gallery .fancybox-spaceball {
padding: 30px;
max-width: 600px;
max-height: 600px;
display: block!important;
}
/* Tweak fade animation */
.fancybox-gallery .fancybox-inner {
opacity: 1;
transition: opacity .3s;
}
.fancybox-gallery .fancybox-is-open .fancybox-inner {
opacity: 1;
}
.fancybox-gallery .fancybox-is-closing .fancybox-fx-fade {
opacity: 1 !important; /* Prevent double-fading */
}
/* Bullet navigation design */
.fancybox-gallery .fancybox-navigation button {
z-index: 100001;
}
.fancybox-gallery .fancybox-thumbs {
top: 450px;
width: calc(100% - 60px);
max-width: 880px;
bottom: 0;
left: 0;
right : 0;
height: 95px;
padding: 10px 5px 0px 0px;
box-sizing: border-box;
margin: auto;
background: #ddd;
overflow: hidden;
box-shadow: 10px 10px 0 #ddd, -10px -10px #ddd,10px -10px 0 #ddd, -10px 10px #ddd;
}
.fancybox-gallery .fancybox-show-thumbs .fancybox-inner {
right: 0;
bottom: 95px;
}
/* -------------------- */
.fancy-images .fancybox-image,
.fancy-images .fancybox-spaceball {
max-width: 80%;
max-height: 80%;
width: auto;
height: auto;
margin-left: 24%;
bottom: 0;
left: 0;
right : 0;
top: 0;
margin: auto;
}
<div class="gallery_slider owl-carousel">
<ul class="og-grid">
<div class="product">
<a class="product-item" href="https://www.telegraph.co.uk/content/dam/pets/2017/01/06/1-JS117202740-yana-two-face-cat-news_trans_NvBQzQNjv4BqJNqHJA5DVIMqgv_1zKR2kxRY9bnFVTp4QZlQjJfe6H0.jpg?imwidth=450"
data-caption="
<h3>text</h3>
"
data-fancybox="quick-view-2"
data-type="image"
>
<img src="https://www.telegraph.co.uk/content/dam/pets/2017/01/06/1-JS117202740-yana-two-face-cat-news_trans_NvBQzQNjv4BqJNqHJA5DVIMqgv_1zKR2kxRY9bnFVTp4QZlQjJfe6H0.jpg?imwidth=450" />
</a>
</div>
<div class="product">
<a class="product-item" href="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg"
data-caption="
<h3>text</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt libero voluptatem beatae </p>
"
data-fancybox="quick-view-2"
data-type="image"
>
<img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg" />
</a>
</div>
</ul>
<ul class="og-grid">
<div class="product">
<a class="product-item" href="https://www.telegraph.co.uk/content/dam/pets/2017/01/06/1-JS117202740-yana-two-face-cat-news_trans_NvBQzQNjv4BqJNqHJA5DVIMqgv_1zKR2kxRY9bnFVTp4QZlQjJfe6H0.jpg?imwidth=450"
data-caption="
<h3>text</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt libero voluptatem beatae</p>
"
data-fancybox="quick-view-2"
data-type="image"
>
<img src="https://www.telegraph.co.uk/content/dam/pets/2017/01/06/1-JS117202740-yana-two-face-cat-news_trans_NvBQzQNjv4BqJNqHJA5DVIMqgv_1zKR2kxRY9bnFVTp4QZlQjJfe6H0.jpg?imwidth=450" />
</a>
</div>
<div class="product">
<a class="product-item" href="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg"
data-caption="
<h3>text</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt libero voluptatem beatae </p>
"
data-fancybox="quick-view-2"
data-type="image"
>
<img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg" />
</a>
</div>
</ul>
<ul class="og-grid">
<div class="product">
<a class="product-item" href="https://www.telegraph.co.uk/content/dam/pets/2017/01/06/1-JS117202740-yana-two-face-cat-news_trans_NvBQzQNjv4BqJNqHJA5DVIMqgv_1zKR2kxRY9bnFVTp4QZlQjJfe6H0.jpg?imwidth=450"
data-caption="
<h3>text</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt libero voluptatem beatae</p>
"
data-fancybox="quick-view-2"
data-type="image"
>
<img src="https://www.telegraph.co.uk/content/dam/pets/2017/01/06/1-JS117202740-yana-two-face-cat-news_trans_NvBQzQNjv4BqJNqHJA5DVIMqgv_1zKR2kxRY9bnFVTp4QZlQjJfe6H0.jpg?imwidth=450" />
</a>
</div>
<div class="product">
<a class="product-item" href="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg"
data-caption="
<h3>text</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt libero voluptatem beatae </p>
"
data-fancybox="quick-view-2"
data-type="image"
>
<img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg" />
</a>
</div>
</ul>
</div>
I could not reproduce the issue with the above statement, Which browser are you checking from?
For sliders like owlCarousel, you need to initialise fancybox like this:
$().fancybox({
selector : '.owl-item:not(.cloned) a',
});
Demo - https://codepen.io/fancyapps/pen/mqvOoz
$('.product-item').trigger('play.fancybox.autoStart');
was needed
Related
So, I am currently building a website with HTML, CSS, and VanillaJS and the hamburger icon for the mobile menu does not work, because although I set it to a fixed position, when I am checking the responsivity of the screen on different device screen widths by decreasing the width itself the icon slips away and it just moves towards the left side of the page.
Is there any way to prevent this from happening?
//PICTURES
First, the hamicon can be seen
But as I start decreasing the width of the screen it disappears
//HERE IS MY HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="gallery.css">
<title>Eckert Művek Galéria</title>
</head>
<body>
<div class="floating-btn show-btn" aria-label="up button" role="button">
<img src="assets/svg_files/chevron-up-solid.svg" alt="up img" />
</div>
<header>
<nav>
<div class="logo">
<img class="header-logo" src="assets/icons/114533_321471.png" alt="">
</div>
<ul id="desktop-menu">
<li class="nav-item">Főoldal</li>
<li class="nav-item">Rólunk</li>
<li class="nav-item">Szolgáltatások</li>
<li class="nav-item">Miért mi?</li>
<li class="nav-item">Galéria</li>
<li class="nav-item">Kapcsolatok</li>
</ul>
<!--HAMBURGER ICON-->
<div class="header-right-gap">
<button class="hamburger" aria-label="hamburger button">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</button>
</div>
</nav>
<!--MOBILE MENU-->
<div class="mobile-menu">
<ul class="m-menu">
<li >Főoldal</li>
<li >Rólunk</li>
<li >Szolgáltatások</li>
<li >Miért mi?</li>
<li >Galéria</li>
<li >Kapcsolat</li>
</ul>
</div>
</header>
<main class="carousel-container">
<div class="carousel-images">
<img src="assets\images\pavebrick\buckgrey.jpg" alt="img-1">
<img src="assets\images\pavebrick\colorful.jpg" alt="img-2">
<img src="assets\images\pavebrick\greybigplace.jpg" alt="img-3">
<img src="assets\images\pavebrick\colbig.jpg" alt="img-4">
<img src="assets\images\pavebrick\wheelgrey.jpg" alt="img-5">
<img src="assets\images\pavebrick\yardrock.jpg" alt="img-6">
</div>
<div class= "btn-container">
<div class="btn btn-left">
<img src="assets/svg_files/arrow-left-solid.svg" alt="left-arrow">
</div>
<div class="btn btn-right">
<img src="assets/svg_files/arrow-right-solid.svg" alt="right-arrow">
</div>
</div>
</main>
<footer>
<div class="footer-container">
<div class="footer-top">
<nav>
<ul>
<li>Főoldal</li>
<li>Rólunk</li>
<li>Szolgáltatások</li>
<li>Miért mi?</li>
<li>Galéria</li>
<li>Kapcsolatok</li>
</ul>
</nav>
<div class="text-container">
<h4>Ttitle-1</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dicta modi laborum quibusdam quis natus debitis qui dolor
voluptatibus ab sit, cum saepe enim unde doloribus veniam
numquam perspiciatis optio impedit.</p>
</div>
<div class="text-container">
<h4>Ttitle-1</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dicta modi laborum quibusdam quis natus debitis qui dolor
voluptatibus ab sit, cum saepe enim unde doloribus veniam
numquam perspiciatis optio impedit.</p>
</div>
</nav>
</div>
<!--Social media icons-->
<div class="social-media-icons">
<div class="sm-container" id="insta">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="github">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="facebook">
<div class="sm-icon">
</div>
</div>
<div class="sm-container" id="linkedin">
<div class="sm-icon">
</div>
</div>
</div>
<!--Social media icons-->
<div class="footer-bottom">
<p>© Eckert Művek Kft. Minden jog fenntartva.</p>
</div>
</div>
</footer>
<script src="gallery.js"></script>
</body>
</html>
//AND HERE IS MY CSS CODE
/CSS RESET/
*, *::after, *::before { box-sizing: border-box; margin: 0; padding: 0; }
:root { --font-size: 18px; --bg-color-flt-btn: yellow; }
body { width: 100%; height: 100%; }
.floating-btn { position: fixed; bottom: 3.5vh; right: 0; width: 50px; height: 50px; z-index: 100; background-color: var(--bg-color-flt-btn); border-radius: 50%; padding: 10px; box-shadow: 0 0 5px hsla(0, 0%, 0%, hsla(0,0%,0%,0.5)); cursor: pointer; margin-right: 1rem; border: 1px solid #000; }
.show-btn { display: block; }
a { text-decoration: none; color: inherit; }
/HEADER STYLE/
header { width: 100%; height: 120px; background-color: black; color: white; display: flex; align-items: center; position: fixed; top: 0; left: 0; z-index: 10; }
/Srcollbar/
::-webkit-scrollbar{ width: 15px; background: #000; }
::-webkit-scrollbar-thumb { background: yellow; border-radius: 10px; border: 1px solid black; }
::-webkit-scrollbar-thumb:active { background: orangered; }
nav, .footer-container { width: min(90%, 1200px); display: flex; margin-inline: auto; position: relative;
}
nav { justify-content: space-between; /display: flex; flex-direction: flex-end; font-size: 30px;/
}
.nav-item a { color: var(--clr-nav-item-main); list-style: none; text-transform: uppercase; font-size: 20px; font-weight: bold; height: 100%; text-decoration: none; position: relative; margin: .5em .8em; padding: 10px;
}
/újonnan adtam hozzá 2023.01.12./ /nav a { position: relative; z-index: 1; justify-content: space-evenly; height: 100%; }/
nav ul { display: flex; gap: 1rem; width: 100%; justify-content: center; margin-top: 3.5rem;
/*margin-top: 2rem;*/
}
nav ul li { text-transform: uppercase; list-style: none;
}
.nav-item a::before, .nav-item a::after { content: ''; height: 14px; width: 14px; position: absolute; transition: all .35s ease; opacity: 0; }
nav a::before { content: ''; right: 0; top: 0; border-top: 3px solid #ffed4b; border-right: 3px solid #fdcd3b; transform: translate(-100%, 50%); /-100%, 50%/ }
.nav-item a:after { content: ''; left: 0; bottom: 0; border-bottom: 3px solid #fdcd3b; border-left: 3px solid #ffed4b; transform: translate(100%, -50%); /100%, -50%/ }
.nav-item a:hover:before, .nav-item a:hover:after{ transform: translate(0,0); opacity: 1; }
nav ul li a:hover { color: yellow; }
/Logo/
.logo img { position: absolute; width: 150px; height: 90px; margin-top: -2rem; margin-left: 70rem; left: 0; top: 0; }
/CAROUSEL SSTYLE/ /ha négy képünk van akkor ez 200 vw lesz/
.carousel-container { position: relative; width: 100%; height: 100vh; overflow: hidden;
}
`
/*transform: translateX(-200vw);*/
.carousel-images { transition: all 0.8s ease; width: 600vw; /700-zal és 800-zal is működik/ display: flex; height: 100%;
}
.carousel-images img { width: 100vw; height: 100%; object-fit: cover; }
.btn-container { position: absolute; display: flex; width: 100px; justify-content: space-between; bottom: 10vh; left: calc(50% - 75px); }
.btn { width: 40px; height: 40px; border: 2px solid #000; background-color: #fff; padding: 10px; border-radius: 10px;
}
.btn:hover { cursor: pointer; }
.btn img { width: 100%; height: 100%; }
/FOOTER STYLE/
footer { width: 100%; background-color: #000; padding-block: 4rem; color: white; }
.footer-container { flex-direction: column;
}
.footer-container nav ul { flex-direction: column; }
.footer-top { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.footer-bottom { margin-top: 3rem; text-align: center;
}
/SOCIAL MEDIA ICONS/
.social-media-icons { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row;
}
.sm-container { display: flex; justify-content: center; flex-direction: row; gap: 2rem; padding:1rem; border: 1px black; }
.fa { border-radius: 50%; }
.fa-instagram { background: #125688; color: white; padding: 1rem;
}
.fa-github { background: white; color: black; padding: 1rem;
}
.fa-facebook { background: #4267B2; color: white; padding: 1rem; }
.fa-linkedin { background: #3B5998; color: white; padding: 1rem; }
/MOBILE MENU/ .mobile-menu { display: none; }
.mobile-menu { display: flex; width: 100%; /.line a szülő tehát 40px a width/ height: calc(100vh - 80px); align-items: center; justify-content: center; position: absolute; top: 80px; left: 0; background-color: black; transform: translate(-100%); transition: all 0.4s ease; z-index: 100; }
.mobile-menu-on { display: flex; /**/ transform: translate(0); }
.m-menu { display: flex; flex-direction: column; gap: 2rem; text-align: center; font-size: 1.4rem; list-style: none; }
/hamburger icon/
.hamburger { display: none; position: fixed; width: 50px; height: 50px; border: none; background-color: transparent; margin-left: -60rem; margin-top: -2rem;
/* margin-left: -4rem; margin-top: -1.5rem;*/
}
.hamburger:hover { border: 6px solid; border-color: yellow; width: 43px; /margin-left: 4px; transform: scale(1.2);/ } .hamburger:hover .line.line-1 { /display: none;/ transform: rotate(45deg) translateY(7.5px); background-color: yellow;
}
.hamburger:hover .line.line-2 {
display: none;
}
.hamburger:hover .line.line-3 {
/*display: none;*/
transform: rotate(-45deg) translateY(-7.5px);
background-color: yellow;
}
.line {
transition: all .4s ease;
width: 40px;
height: 5px;
background-color: white;
margin-block: 5px;
border-radius: 10px;
}
/RESPONSIVE VERSION/
#media (max-width: 1200px) {
.hamburger { display: block; }
#desktop-menu { display: none; }
}
#media (max-width: 900px) {
footer nav ul {
flex-direction: column;
}
footer nav ul li a { font-size: 15px; padding: 15px; } }
#media (max-width: 750px) { .footer-container { display: flex; flex-wrap: wrap; }
footer nav ul li a { font-size: 10px; padding: 15px; }
.text-container p { font-size: 10px; } }
#media (max-width: 600px) {
}
//AND MY JS CODE
// MOBILE MENU
const header = document.querySelector('header')
const btn = document.querySelector('.hamburger')
const menu = document.querySelector('.mobile-menu')
const line1 = document.querySelector('.line-1')
const line2 = document.querySelector('.line-2')
const line3 = document.querySelector('.line-3')
/*let navUl = docuemnt.querySelector('ul')*/
// FLOATING BUTTON
const floatingBtn = document.querySelector('.floating-btn');
window.addEventListener('scroll', ()=> {
if (document.documentElement.scrollTop > 400) {
floatingBtn.classList.add('show-btn')
} else {
floatingBtn.classList.remove('show-btn')
}
})
floatingBtn.addEventListener('click', () => {
document.documentElement.scrollTop = 0
})
//SCROLLING EFFECT
window.addEventListener('scroll', () => {
if (document.documentElement.scrollTop > 100) {
header.style.display = 'none'
} else {
header.style.display = 'block'
// navUl.style.marginTop = '32px'
}
})
btn.addEventListener('click', () => {
menu.classList.toggle('mobile-menu-on')
line1.classList.toggle('line-1-on')
line2.classList.toggle('line-2-on')
line3.classList.toggle('line-3-on')
})
//CAROUSEL
const btnLeft = document.querySelector('.btn-left');
const btnRight = document.querySelector('.btn-right');
const images = document.querySelector('.carousel-images');
let index = 0; // első kép
// képek mozgásának automatizálása (slide effect)
setInterval(()=> {
//slide(1) vagy függvényt teesszük csak be az alsó 5 sor helyett
if (index === 5) {
index = 0;
} else {
index++
}
images.style.transform = `translateX(-${100*index}vw)`
}, 5000)
console.log('.carousel-images')
const slide = (direction) => {
if (direction === 'left') {
if (index === 0) {
index = 5;
} else {
index--
}
} else if (direction === 'right') {
if (index === 5) {
index = 0;
} else {
index++
}
}
images.style.transform = `translateX(-${100*index}vw)`
}
btnLeft.addEventListener('click', () => {
//slide('left') vagy -1
if (index === 0) {
index = 5;
} else {
index--
}
images.style.transform = `translateX(-${100*index}vw)`
})
// ha az index 2 (4. elem) de az nincs, akkor ugrik vissza az első képre
btnRight.addEventListener('click', () => {
//slide('right') 1
if (index === 5) {
index = 0;
} else {
index++
}
images.style.transform = `translateX(-${100*index}vw)`
})
document.querySelector('#contact-form').addEventListener('submit', (e) => {
e.preventDefault();
e.target.elements.name.value = '';
e.target.elements.email.value = '';
e.target.elements.message.value = '';
});
Well, originally the hamicon was placed on the right side of the header. Since I have changed it, this kind of problem has arisen somewhy. I am still a beginner, but it is not the first time I am doing this, but still, I was unable to detect the source of the problem.
If somebody could give me some hints I would appreciate it!
Thank you very much in advance!
I have stumbled into an issue with my image that functions as a button for my home (index.html) page.
When my javascript causes the header to move down after a scroll is triggered, it changes the positioning of my anchor element as well.
Here is an image example of what I am referring to:
Notice the anchor image does not actually have the pointer effect during hover.
window.addEventListener("scroll", function () {
var header = document.querySelector("header"); // to header element
header.classList.toggle("sticky", window.scrollY > 0)
}) // make sticky class when > 0
* {
font-family: 'Fira Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/*background-color: #fff;*/
min-height: 200vh;
background-color: white;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
.header_cta h1 {
font-size: 4em;
color: #fff;
text-align: center;
/* padding-bottom: 5em; */
}
.header_cta h3 {
font-size: 2em;
color: #fff;
text-align: center;
padding-bottom: 1em;
}
header .sticky {
padding: 5px 100px;
background: #fff;
}
.logo img {
width: 20%;
top: 19px;
left: 4px;
height: 20%;
margin: -21.5rem 61rem -1rem -3rem;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.home-banner {
position: relative;
width: 100%;
height: 100%;
background: url();
background-size: cover;
}
header.sticky {
background: rgb(255, 255, 255);
padding: 15px;
}
header.sticky .logo,
header.sticky ul li a {
color: #000;
}
h2 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
.home_page_header {
justify-content: center;
/* The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. */
text-align: center;
padding-top: 50vh;
padding-bottom: 25vh;
/* -webkit-filter: grayscale(75%); */
/* for Safari 6.0 - 9.0 */
/* filter: grayscale(75%); */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/BEGIN_NOW/images/stressed.jpeg);
background-size: cover;
background-position: center;
}
/*
.navigation_bar li {
float: left;
}
*/
nav {
display: flex;
padding: 2% 6%;
/* Percentages: The padding size is relative to the width of that element's content area (i.e. the width inside, and not including, the padding, border and margin of the element). So, if your #wrapper is 940px wide, 5% padding = 0.05 × 940pixels = 47 pixels.*/
justify-content: space-between;
align-items: center;
}
nav img {
width: 300px;
}
.navigation_bar {
position: fixed;
/* Stays on viewport screen. Your tab. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.*/
/* background-color: rgb(242, 242, 242); */
top: 0;
flex: 1;
/*The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container. */
text-align: right;
transition: top 0.3s;
}
/* How to make nav bar background appear after
.navigation_bar.scrolled {
background-color: #000;
} */
.navigation_bar ul {
padding-left: 16rem;
}
.navigation_bar ul li {
/* parent -> child */
list-style: none;
display: inline-block;
padding: 24px 12px;
position: relative;
}
.navigation_bar ul li a {
color: #fff;
text-decoration: none;
font-style: 13px;
}
.navigation_bar ul li::after {
/* In CSS, ::after creates a pseudo-element (keyword added to a selector that lets you style a specific part of the selected element(s)) that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default. */
content: '';
width: 0%;
height: 2px;
background: #fff;
display: block;
margin: auto;
/* the browser calculates the margin, is decided by browser, Margins are used to create space around elements, outside of any defined borders. */
transition: 0.5s;
}
.navigation_bar ul li:hover::after {
width: 100%;
background-color: rgba(247, 238, 238, 0.756);
}
.navigation_bar ul li a:hover {
color: rgba(247, 238, 238, 0.756);
}
.cta h2 {
font-size: 6em;
color: #000;
text-align: center;
/* padding-bottom: 5em; */
}
.cta h3 {
color: #000;
text-align: center;
padding-bottom: 20px;
}
/* iframe {
flex-wrap: nowrap;
margin: 10rem;
position: absolute;
top: 0;
bottom: 0;
left: 50;
right: 50;
z-index: 100;
height: 70%;
width: 70%;
} */
section.videos {
/* position: absolute; */
margin: 10rem;
}
/*
.hamza_video {
display: flex;
margin-left: auto;
margin-right: auto;
} */
.home-header-btn {
/* make own eventually */
display: inline-block;
/* Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1 */
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-style: 13px;
background: transparent;
position: relative;
/* An element with position: relative; is positioned relative (in consideration of the original) to its normal position.*/
cursor: pointer;
}
.home-header-btn:hover {
/* grayscale is breaking this?*/
border: 1px solid #ff0808;
background: #ff0808;
transition: 0.8s;
}
.gradient {
width: 150vh;
height: 50vh;
position: relative;
background-image: linear-gradient(0deg, transparent, #000);
top: 3vh;
z-index: 9;
}
.hook {
background-color: white;
margin: auto;
}
div.questions {
color: #000;
margin: 0 5rem;
}
div.questions.question_left {
text-align: left;
}
img {
margin: -7px 5rem;
}
.questions_right {
padding-top: 100px;
text-align: right;
}
/* div.questions.questions_left {} */
.textbox {
background-color: rgb(238, 237, 237);
margin: 5rem 0 0 0;
padding-bottom: 5rem;
}
div .textbox.one {
margin-top: 5rem;
}
.questions_right p {
text-align: right;
padding-left: 50px;
padding-top: 20px;
}
.questions h2 {
padding-top: 50px;
padding-left: 50px;
font-size: 2.5rem;
text-align: left;
}
.what_to_do {
width: 25%;
float: right;
padding: 20px;
}
.questions p {
text-align: left;
padding-left: 50px;
padding-top: 20px;
}
.questions h2 {
font-size: 2rem;
padding: 9rem 3rem 1rem;
}
.questions_right h2 {
padding: 11rem 1rem 1rem 1rem;
margin-top: 57px;
}
.light_woman {
width: 40%;
float: left;
padding: 20px;
padding-top: 7rem;
margin: 4rem;
/* margin: 100px 10px;
margin-top: 115px; */
}
.stretched_out {
width: 40%;
float: right;
padding: 20px;
margin: 35px 24px 10px 100px;
}
.my_mission {
background-color: #fff;
padding: 14rem;
}
.my_mission h3 {
font-size: 2rem;
padding-bottom: 1rem;
text-align: center;
}
.value_provided {
padding: 7rem 0;
text-align: center;
background-color: rgb(238, 237, 237);
}
.value_provided p {
font-size: 18px;
}
.value_provided ul {
margin: 3rem;
}
.value_provided li {
margin: 1rem;
}
.how_i_began h3 {
text-align: center;
font-size: 2rem;
margin: 2rem;
}
.quote {
text-align: center;
}
.story h2 {
text-align: center;
margin: 2rem;
margin-top: 40rem;
color: #000;
}
.xop-section {
max-width: 960px;
margin: 0 auto;
padding: 6% 2%;
}
.xop-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.xop-grid:after {
clear: both;
}
.xop-grid:after, .xop-box:before {
content: "";
display: table;
}
/* ^ For accomodating Internet Explorer */
.xop-grid li {
width: 328px;
height: 328px;
display: inline-block;
margin: 20px;
}
/* ^ Size of the box and how it is displayed */
.xop-box {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
border-radius: 10px;
-webkit-transition: 0.3s ease-in-out, -webkit-transition 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out, -moz-transition 0.3s ease-in-out;
}
.xop-box:hover {
transform: scale(1.05);
}
.xop-img-1 {
background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(/BEGIN_NOW/images/stressed.jpeg);
}
.xop-img-2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(/BEGIN_NOW/images/stressed.jpeg);
}
.xop-img-3 {
background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(/BEGIN_NOW/images/stressed.jpeg);
}
.xop-img-4 {
background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(/BEGIN_NOW/images/stressed.jpeg);
}
.xop-info {
position: absolute;
width: inherit;
height: inherit;
}
.xop-info h3 {
font-family: 'Fira Sans', cursive;
font-weight: 400;
color: #fff;
font-size: 42px;
margin: 0 30px;
padding: 100px 0 0 0;
line-height: 1.5;
}
/* Browser support for transitions and transform properties smooth transition*/
.xop-info p {
font-family: 'Source Sans Pro', sans-serif;
color: #fff;
}
.links {
height: 10%;
margin: 0rem -183px 0px 13rem;
}
.cta h2 {
text-align: center;
margin: 2rem;
}
.footer {
padding-top: 5rem;
text-align: center;
background-color: #000;
color: #fff;
display: flex;
flex-wrap: wrap;
}
.footer .left_bio_section {
float:left;
width: 38%;
}
.footer .right_links_division {
width: 42%;
display: inherit;
margin: 2rem 0 0 110px;
flex-wrap: wrap;
}
.quote-hard-work {
margin-left: auto;
margin-right: auto;
}
.footer h3 {
text-align: left;
margin: 0rem 0px 0px 5rem;
}
.left_bio_section h4 {
text-align: left;
margin: 10px 0rem 3rem 5rem;
}
.right_links_division h4:hover { /* broken */
/* position: absolute; */
/* position: relative; */
/* bottom: ; */
/* left: 0; */
/* width: 100%; */
height: 2px;
content: "";
background-color: #fff;
/* transition: transform .2s cubic-bezier(.4,0,.2,1); */
/* transform: scaleX(0); */
/* transform-origin: left; */
}
.right_links_division h4 {
margin: 2rem;
display: flex;
}
.footer hr {
-webkit-transform:rotate(90deg);
/* position: absolute; */
width:20%;
height:2px;
margin: 0px 0px 0px 33rem;
}
.footer .closing_text {
padding-right: 2rem;
margin-left: 5rem;
text-align: left;
}
.links_division {
display: flex;
flex-wrap: wrap;
margin: 0 0 0 35rem;
}
.icons h4 {
margin: 0 0 0 0;
}
.icons
{
/* background-color: rgb(63, 63, 68); */
background-color: rgb(76, 60, 84);
padding: 5rem;
}
.img_effect {
transition: 1s;
}
.img_effect:hover {
transform: scale(1.1);
z-index: 5;
}
main {
color: #fff;
padding: 5rem;
}
main p {
color: #fff;
}
/* transition: 0.5s;
:hover {
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
} */
#media(max-width: 700px) {}
/* Word for word copy for fixed nav. css */
/* Look for effects */
/* GO into inspect -> styles and check tick boxes to see changes!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style_v2.0.css">
<script src="script_v2.0.js"></script>
<title>Begin, now!</title>
</head>
<!-- Top website header -->
<body>
<div>
<section class="home_page_header">
<div>
<!-- <section class="home_page_header"> -->
<!--- <img src="" alt=""> Logo & redirect home page link-->
<header>
<nav>
<a href="/BEGIN_NOW/v2.0/index_v2.0.html" class="logo"><img src="/BEGIN_NOW/images/icon2.png" alt="Gear with white bars and an arrow going up.">
<!-- <img src="" alt=""> -->
</a> <!-- Logo & redirect home page link -->
<div class="navigation_bar" id="navigation_links">
<ul>
<li>BOOKS</li>
<li>LEARN</li>
<li>MOTIVATION</li>
<li>STRATEGIES</li>
<li>STRUGGLING</li>
</ul>
</div>
</nav>
</header>
</div>
<!-- <nav>
<div class="navigation_bar" id="navigation_links">
<ul>
<li>BOOKS</li>
<li>INVEST IN YOU</li>
<li>MOTIVATION</li>
<li>STRATEGIES</li>
<li>STRUGGLING</li>
</ul>
</div>
</nav> -->
<div class="header_cta">
<h1>Are you procrastinating?</h1>
<h3>Begin. NOW.</h3>
Save Yourself.
<!-- some button, lead to video or another motivation page-->
</div>
</section>
<section class="home-banner"></section>
<!-- <div class="gradient"></div></div> -->
<!-- Sections of the website, similar to the nav page, featuring a few vids, books, and quotes -->
<!-- Hook, a question. Big. Gradually smaller centered. -->
<section class="hook">
<div class="questions questions_left">
<img src="/BEGIN_NOW/images/much_to_do.jpeg" alt="Stressed man." class="what_to_do img_effect">
<div class="textbox">
<h2> There is so much to do, <br>so what should you be doing?</h1>
<p>For every single individual, we are all exposed to a gamut of different opportunities. However, due to our inherent nature of putting things off, we tend to have certain regrets in various sections of our lives. In order to respond to this pressing issue, this website is devoted towards maximizing your life through lessons that have been shared and explored.
</p>
</div>
</div>
<div class="questions questions_right">
<img src="/BEGIN_NOW/images/consider.jpeg" alt="Woman looking a screen in dark."
class="light_woman img_effect">
<div class="textbox">
<h2>Consider your future. What do you want to do?</h2>
<p>All the opportunities presented to us lead to different futures. We have the choice of picking the future we desire to follow. Procrastination is one of the main issues that delays our progress towards our dreams, so we must find ways to effectively use our time by limiting procrastination.
</p>
</div>
</div>
<div class="questions questions_left">
<img src="/BEGIN_NOW/images/stretched_out.jpeg" alt="Silhoutte of man with arms stretched out. "
class="stretched_out img_effect">
<div class="textbox">
<h2>It's okay to be lost. Let's reach greatness together.</h3>
<p>
On the path towards success, it is easy to get frustrated, lost, and distracted. This website will act as a fuel source, mentor, and supporter for your future endeavors. No matter what circumstances, never stop learning, experiencing, and improving.
</p>
<p>
As Martin Luther King Jr. once said: “If you can't fly then run, if you can't run then walk, if you can't walk then crawl, but whatever you do you have to keep moving forward.
</p>
</div>
</div>
</section>
<!-- <section class="home-banner"></section>
<script type="text/javascript">
window.addEventListener("scroll", function () {
var header = document.querySelector("header"); // to header element
header.classList.toggle("sticky", window.scrollY > 0)
}) // make sticky class when > 0
</script> -->
<!-- <div class="gradient"></div></div> -->
<!-- Mission Statement & Purpose -->
<section class="my_mission">
<!-- mission add here quoet -->
<div class="value_provided">
<h3>The value I provide you.</h2>
<p>This website will:</p>
<ul>
<li>Remind you of how to deal with hesitancy and procrastination.</li>
<li>Support your journey of growth.</li>
<li>Provide insight on how to deal with problems.</li>
</ul>
</div>
</section>
<!-- My Story So Far-->
<section class="my-answer">
<div class="how_i_began">
<h3>How I Started</h3>
<p></p>
<p></p>
</div>
<p></p>
<p></p>
<div class="what_learned"></div>
</section>
<!-- Quote -->
<section class="quote">
<q class="quote_text">Insert Quote Here</q>
</section>
<!-- Rises-->
<!-- CTA -->
<section class="cta">
<h2>Let's become greater.</h2>
<h3>Begin your improvement journey now.</h3>
<p>Mandatory viewing - Self-Improvement Coach Hamza Ahmed</p>
<iframe width="420" height="315" src="https://www.youtube.com/embed/PYaixyrzDOk"
class="hamza_video"></iframe>
<!-- Insert video -->
</section>
<!-- Story -->
<section class="story">
<h2>My Story</h2>
<!-- img grid -->
<div class="xop-section">
<ul class="xop-grid">
<li>
<div class="xop-box xop-img-1">
<a href="#">
<h3>Paint</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt quia eum ad eaque
vel inventore iste dolore, esse tempore, alias obcaecati facere veniam perferendis
cupiditate.</p>
</a>
</div>
</li>
<li>
<div class="xop-box xop-img-2">
<a href="#">
<h3>Paint</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt quia eum ad eaque
vel inventore iste dolore, esse tempore, alias obcaecati facere veniam perferendis
cupiditate.</p>
</a>
</div>
</li>
<li>
<div class="xop-box xop-img-3">
<a href="#">
<h3>Paint</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt quia eum ad eaque
vel inventore iste dolore, esse tempore, alias obcaecati facere veniam perferendis
cupiditate.</p>
</a>
</div>
</li>
<li>
<div class="xop-box xop-img-4">
<a href="#">
<h3>Paint</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt quia eum ad eaque
vel inventore iste dolore, esse tempore, alias obcaecati facere veniam perferendis
cupiditate.</p>
</a>
</div>
</li>
</ul>
</div>
</section>
<!-- CSS Mask arms -->
<!-- Footer -->
<div class="icons">
<h4>Contact Me</h4>
<i class="fa fa-instagram"></i>
<!-- facebook, gmail -->
</div>
<section class="footer">
<div class="left_bio_section">
<h3></h3>
<h4>Author</h4>
<hr>
<p class="closing_text">Student and Life-long learner
Every day, spends time learning from the past, maximizing the present, and setting up the future he dreams of. As a growing teenager, he learns about the importance of a myriad of components that make up a good life, and he wishes to communicate his experiences to people around the world.
</p>
</div>
<h4 class="links">LINKS</h4>
<div class="right_links_division">
<h4>BOOKS</h4>
<h4>LEARN</h4>
<h4>MOTIVATION</h4>
<h4>STRATEGIES</h4>
<h4>STRUGGLING</h4>
</div>
<!-- <h4>BACK TO TOP</h4> -->
<!-- <p>Made with <i class="fa fa-heart-o"></i> by Easy Tutorials</p> -->
<q class="quote-hard-work">Do the hard work, especially if you don't feel like it. - Hamza</q>
</section>
</body>
</html>
<!-- sections and divs to access each portion in the homepage
similar to blue origin links, image
html->css->js
-->
<!-- FUTURE
using - to seperate ids, classes
interactive = id
using _ for variables
-->
I am making a website using only JavaScript, HTML, and CSS (no Bootstrap or jQuery).
I have used JavaScript to get the details of the cakes onto the page, as shown with the code below.
Now, I am looking to create a button "View recipes" to view each cake using a modal.
Currently, the button appears outside of the box. I'm still pretty new to this and would appreciate any help on how to add in a button that opens a modal that displays different recipes for each box generated from the cakeData instances.
The code below for each button and modal is hardcoded in HTML. I would like to refactor the HTML code for the button over to recipes.js where it can be associated with the cakeData instances. I'm trying to condense the code down so I'm not copying and pasting code in HTML page, as I want to put 10+ cakes as the website progresses.
// recipes.js
"use strict";
function buildCake(cake) {
const article = document.createElement('article');
article.classList.add('cake');
const h4 = document.createElement('h4');
h4.textContent = cake.name;
article.appendChild(h4);
const p = document.createElement('p');
p.textContent = cake.description;
article.appendChild(p);
const image = document.createElement('img');
image.src = cake.img;
article.appendChild(image);
return article;
}
const cakeData = [{
name: "Chocolate Cake",
img: "../img/chocolate-cake.jpg",
description: "Gooey chocolate cake",
button: ""
},
{
name: "Chocolate Drip Cake",
img: "../img/drip.jpg",
description: "Chocolate layered sponge cake"
},
{
name: "Victoria Sponge Cake",
img: "../img/VSCake.jpg",
description: "Airy sponge cake"
},
{
name: "Fondant Cake",
img: "../img/Aishteru.jpg",
description: "Airy sponge cake with fondant"
}
]
cakeData.forEach(loadCake);
function loadCake(cake) {
const mycake = buildCake(cake);
cakes.appendChild(mycake);
}
document.getElementById('cakes').appendChild(cake);
document.addEventListener('click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (target.hasAttribute('data-toggle') && target.getAttribute('data-toggle') == 'modal') {
if (target.hasAttribute('data-target')) {
var m_ID = target.getAttribute('data-target');
document.getElementById(m_ID).classList.add('open');
e.preventDefault();
}
}
// Close modal window with 'data-dismiss' attribute or when the backdrop is clicked
if ((target.hasAttribute('data-dismiss') && target.getAttribute('data-dismiss') == 'modal') || target.classList.contains('modal')) {
var modal = document.querySelector('[class="modal open"]');
modal.classList.remove('open');
e.preventDefault();
}
}, false);
// scripts.js
"use-strict";
function toggleNav() {
document.getElementById("sideNav").classList.toggle('open');
}
closeNav.addEventListener('click', toggleNav);
openNav.addEventListener('click', toggleNav);
body {
background-color: #FF7E41;
font-family: sans-serif;
margin: 0;
}
h1 {
color: blanchedalmond;
font-size: 40px;
text-align: center;
padding: 30px;
}
nav {
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
height: 100%;
width: 100%;
top: 0;
/* Stay at the top */
left: -100%;
position: fixed;
z-index: 1;
/* Stay on top */
background-color: #FF9765;
overflow-x: hidden;
transition: 2s;
opacity: 0.5;
padding: 2px;
}
nav .menu,
.menu1 {
text-align: right;
}
nav.open {
left: 0;
cursor: pointer;
font-size: 40px;
align-content: right;
opacity: 1;
}
nav a,
.menu,
.menu1 {
padding: 0.25em 0.5em;
text-decoration: none;
font-size: 25px;
color: rgb(0, 0, 0);
display: block;
transition: 2s;
}
.menu {
top: 0;
}
a {
transition: 2s ease;
padding: 2px;
}
main {
width: 85% padding: 0px 30px;
}
/* recipes.html styles */
.cake-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: center;
padding: 0;
margin: 0;
}
article.cake {
border: 5px solid blanchedalmond;
padding: 10px;
width: 50%;
}
img {
width: 150px;
height: 175px;
}
/* Popup Box */
.modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
overflow: auto;
background-color: #000000;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
}
.modal-window {
position: relative;
background-color: #FFFFFF;
width: 50%;
margin: 10% auto;
padding: 20px;
}
.modal-window.small {
width: 30%;
}
.modal-window.large {
width: 75%;
}
.close {
position: absolute;
top: 0;
right: 0;
color: rgba(0, 0, 0, 0.3);
height: 30px;
width: 30px;
font-size: 30px;
line-height: 30px;
text-align: center;
}
.close:hover,
.close:focus {
color: #000000;
cursor: pointer;
}
.open {
display: block;
}
.btn {
background-color: blanchedalmond;
border: none;
color: black;
padding: 10px;
text-align: right;
cursor: pointer;
}
<header>
<span class="menu" id="openNav">☰</span>
<nav id="sideNav">
<span class="menu1" id="closeNav">×</span>
Home
Recipes
Ingredients
About
</nav>
<h1>Recipes</h1>
</header>
<main>
<section id="cakes" class="cake-grid">
<article id="cake">
<p>
<button data-target="simpleModal_1" data-toggle="modal" class="btn">View Recipe</button>
</p>
<div id="simpleModal_1" class="modal">
<div class="modal-window">
<h3>Chocolate cake</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<p>
<button data-target="simpleModal_2" data-toggle="modal" class="btn">View Recipe</button>
</p>
<div id="simpleModal_2" class="modal">
<div class="modal-window">
<h3>Victoria sponge cake</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</article>
</section>
You have to target the .btn class. This class tells the document where to position the button. Of course, there are different ways to put the buttons inside the box. I would recommend reading this guide about CSS positioning. https://developer.mozilla.org/en-US/docs/Web/CSS/position.
// recipes.js
"use strict";
function buildCake(cake) {
const article = document.createElement('article');
article.classList.add('cake');
const h4 = document.createElement('h4');
h4.textContent = cake.name;
article.appendChild(h4);
const p = document.createElement('p');
p.textContent = cake.description;
article.appendChild(p);
const image = document.createElement('img');
image.src = cake.img;
article.appendChild(image);
return article;
}
const cakeData = [{
name: "Chocolate Cake",
img: "../img/chocolate-cake.jpg",
description: "Gooey chocolate cake",
button: ""
},
{
name: "Chocolate Drip Cake",
img: "../img/drip.jpg",
description: "Chocolate layered sponge cake"
},
{
name: "Victoria Sponge Cake",
img: "../img/VSCake.jpg",
description: "Airy sponge cake"
},
{
name: "Fondant Cake",
img: "../img/Aishteru.jpg",
description: "Airy sponge cake with fondant"
}
]
cakeData.forEach(loadCake);
function loadCake(cake) {
const mycake = buildCake(cake);
cakes.appendChild(mycake);
}
document.getElementById('cakes').appendChild(cake);
document.addEventListener('click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (target.hasAttribute('data-toggle') && target.getAttribute('data-toggle') == 'modal') {
if (target.hasAttribute('data-target')) {
var m_ID = target.getAttribute('data-target');
document.getElementById(m_ID).classList.add('open');
e.preventDefault();
}
}
// Close modal window with 'data-dismiss' attribute or when the backdrop is clicked
if ((target.hasAttribute('data-dismiss') && target.getAttribute('data-dismiss') == 'modal') || target.classList.contains('modal')) {
var modal = document.querySelector('[class="modal open"]');
modal.classList.remove('open');
e.preventDefault();
}
}, false);
// scripts.js
"use-strict";
function toggleNav() {
document.getElementById("sideNav").classList.toggle('open');
}
closeNav.addEventListener('click', toggleNav);
openNav.addEventListener('click', toggleNav);
body {
background-color: #FF7E41;
font-family: sans-serif;
margin: 0;
}
h1 {
color: blanchedalmond;
font-size: 40px;
text-align: center;
padding: 30px;
}
nav {
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
height: 100%;
width: 100%;
top: 0;
/* Stay at the top */
left: -100%;
position: fixed;
z-index: 1;
/* Stay on top */
background-color: #FF9765;
overflow-x: hidden;
transition: 2s;
opacity: 0.5;
padding: 2px;
}
nav .menu,
.menu1 {
text-align: right;
}
nav.open {
left: 0;
cursor: pointer;
font-size: 40px;
align-content: right;
opacity: 1;
}
nav a,
.menu,
.menu1 {
padding: 0.25em 0.5em;
text-decoration: none;
font-size: 25px;
color: rgb(0, 0, 0);
display: block;
transition: 2s;
}
.menu {
top: 0;
}
a {
transition: 2s ease;
padding: 2px;
}
main {
width: 85% padding: 0px 30px;
}
/* recipes.html styles */
.cake-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: center;
padding: 0;
margin: 0;
}
article.cake {
border: 5px solid blanchedalmond;
padding: 10px;
width: 50%;
}
img {
width: 150px;
height: 175px;
}
/* Popup Box */
.modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
overflow: auto;
background-color: #000000;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
}
.modal-window {
position: relative;
background-color: #FFFFFF;
width: 50%;
margin: 10% auto;
padding: 20px;
}
.modal-window.small {
width: 30%;
}
.modal-window.large {
width: 75%;
}
.close {
position: absolute;
top: 0;
right: 0;
color: rgba(0, 0, 0, 0.3);
height: 30px;
width: 30px;
font-size: 30px;
line-height: 30px;
text-align: center;
}
.close:hover,
.close:focus {
color: #000000;
cursor: pointer;
}
.open {
display: block;
}
.btn {
position: relative;
left: -280px;
top: 100px;
background-color: blanchedalmond;
border: none;
color: black;
padding: 10px;
text-align: right;
cursor: pointer;
}
<header>
<span class="menu" id="openNav">☰</span>
<nav id="sideNav">
<span class="menu1" id="closeNav">×</span>
Home
Recipes
Ingredients
About
</nav>
<h1>Recipes</h1>
</header>
<main>
<section id="cakes" class="cake-grid">
<article id="cake">
<p>
<button data-target="simpleModal_1" data-toggle="modal" class="btn">View Recipe</button>
</p>
<div id="simpleModal_1" class="modal">
<div class="modal-window">
<h3>Chocolate cake</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<p>
<button data-target="simpleModal_2" data-toggle="modal" class="btn">View Recipe</button>
</p>
<div id="simpleModal_2" class="modal">
<div class="modal-window">
<h3>Victoria sponge cake</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</article>
</section>
I need the menu items to look like they are now (like in iOS), but so far I have two big problems.
First, when I try to click on one of the links, it's not possible because of my linear-gradient. And second, when I click the down arrow to explore other menu items, all the gradient does not work.
How can I make it work properly?
I have also made a codepen for this
document.querySelectorAll('.slide').forEach(function (next) {
next.addEventListener('click', function () {
var container = this.parentElement.querySelector('.select');
sideScroll(container, 'bottom', 20, 25, 15);
});
});
document.querySelectorAll('.slideBack').forEach(function (back) {
back.addEventListener('click', function () {
var container = this.parentElement.querySelector('.select');
sideScroll(container, 'top', 20, 25, 15);
});
});
function sideScroll(element, direction, speed, distance, step) {
scrollAmount = 0;
var slideTimer = setInterval(function () {
if (direction == 'top') {
element.scrollTop -= step;
} else {
element.scrollTop += step;
}
scrollAmount += step;
if (scrollAmount >= distance) {
window.clearInterval(slideTimer);
}
}, speed);
}
* {
background: #80acdc;
}
.larger {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.larger .select {
width: 240px;
height: 270px;
display: flex;
flex-direction: column;
text-align: center;
overflow-y: hidden;
-ms-overflow-style: scroll;
scrollbar-width: none;
position: relative;
}
.larger .select::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: linear-gradient(#80acdc, transparent, #80acdc);
}
.larger .select a {
color: white;
margin: 3.5px 0;
}
.larger .select a:first-child {
margin-top: 0;
}
.larger #slide {
position: absolute;
left: 47%;
bottom: 38px;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.larger #slideBack {
position: absolute;
top: 38px;
left: 47%;
color: #fff;
font-size: 15px;
cursor: pointer;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="larger">
<div class="select">
Action Lorem
Test Text
Action Lorem
Test Text
Action Lorem
Test Text
Action Lorem
Test Text
Action Lorem
Test Text
Action Lorem
Test Text
Action Lorem
Test Text
Action Lorem
Test Text
</div>
<i id="slideBack" class="slideBack fas fa-chevron-up"></i>
<i id="slide" class="slide fas fa-chevron-down"></i>
</div>
</div>
</div>
</div>
For the gradient to allow interaction with the underling elements you can use pointer-events: none
Your gradient is absolute positioned with top: 0 so it goes together with the scroll. In order to fix this you can set the position of the gradient to fixed (but then it will be stretched to the sizes of the vewport). The better way would be to wrap the list of the options with another container so the scroll won't influence the gradient position.. Something like this:
<div class="select-wrap">
<div class="select">
...
</div>
</div>
.larger .select-wrap {
width: 240px;
height: 270px;
}
.larger .select-wrap .select {
height: 100%;
display: flex;
flex-direction: column;
text-align: center;
overflow-y: hidden;
-ms-overflow-style: scroll;
scrollbar-width: none;
position: relative;
}
.larger .select-wrap::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: linear-gradient(#80acdc, transparent, #80acdc);
pointer-events: none; /* this allows for the mouse clicks go through */
}
document.querySelectorAll('.slide').forEach(function(next) {
next.addEventListener('click', function() {
var container = this.parentElement.querySelector('.select');
sideScroll(container, 'bottom', 20, 25, 15);
});
});
document.querySelectorAll('.slideBack').forEach(function(back) {
back.addEventListener('click', function() {
var container = this.parentElement.querySelector('.select');
sideScroll(container, 'top', 20, 25, 15);
});
});
function sideScroll(element, direction, speed, distance, step) {
scrollAmount = 0;
var slideTimer = setInterval(function() {
if (direction == 'top') {
element.scrollTop -= step;
} else {
element.scrollTop += step;
}
scrollAmount += step;
if (scrollAmount >= distance) {
window.clearInterval(slideTimer);
}
}, speed);
}
* {
background: #80acdc;
}
.larger {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.larger .select-wrap {
width: 240px;
height: 270px;
}
.larger .select-wrap .select {
height: 100%;
display: flex;
flex-direction: column;
text-align: center;
overflow-y: hidden;
-ms-overflow-style: scroll;
scrollbar-width: none;
position: relative;
}
.larger .select-wrap::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: linear-gradient(#80acdc, transparent, #80acdc);
pointer-events: none;
}
.larger .select a {
color: white;
margin: 3.5px 0;
}
.larger .select a:first-child {
margin-top: 0;
}
.larger #slide {
position: absolute;
left: 47%;
bottom: 38px;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.larger #slideBack {
position: absolute;
top: 38px;
left: 47%;
color: #fff;
font-size: 15px;
cursor: pointer;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="larger">
<div class="select-wrap">
<div class="select">
Action Lorem
Test Text
Action Lorem
Test Text
Action Lorem
Test Text
Action Lorem
Test Text
Action Lorem
Test Text
Action Lorem
Test Text
Action Lorem
Test Text
Action Lorem
Test Text
</div>
</div>
<i id="slideBack" class="slideBack fas fa-chevron-up"></i>
<i id="slide" class="slide fas fa-chevron-down"></i>
</div>
</div>
</div>
</div>
Making slider I've faced one issue. When I hover the buttons under the images (they are labels) the looping of the slider has to stop. And when its out - it backs to looping. Cant understant where I'm wrong. See the code in snippet or in this link.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>
See this JSFiddle for a working example.
However, if you are hoverring for more than the timeout period, then changeto() is not called, you will want to add changeto() to the "mouseleave" handler.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
changeTo(0)
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>