Highlight a text when clicking in another text - javascript

Explanation
I'm working on this template which uses MixItUp plugin in it. Basically, I have one simple, but difficult (at least for me, because I'm new to web dev) doubt that I'm trying to solve without success: I'd like to highlight (as it highlights green when clicking in it) the "filter tab" (All, Mix1, Mix2...) when clicking on the text (Mix1, Mix2...) that appears when hovering each image.
Code
$(document).ready(function() {
/* ========================================================================= */
/* Filtering
/* ========================================================================= */
$(".project-wrapper").mixItUp();
});
/*=========================================
Basic Style
==========================================*/
body {
line-height: 21px;
font-size: 13px;
}
ol, ul {
margin: 0;
padding: 0;
list-style: none;
}
a, a:focus, a:hover {
text-decoration: none;
}
body>section, .footer {
padding: 70px 0;
}
/*=========================================
Mix
==========================================*/
.work-filter {
margin-bottom: 35px;
}
.work-filter ul li {
display: inline-block;
}
.work-filter ul li a {
color: #062033;
display: block;
padding: 5px 17px;
}
.work-filter ul li a:hover, .work-filter ul li a.active {
background-color: rgba(31, 107, 76, 1);
color: #fff;
}
.mix {
display: none;
}
.project-wrapper {
text-align: center;
}
.work-item {
float: none;
width: 30%;
position: relative;
}
.work-item>img {
display: block;
height: 100%;
width: 100%;
}
.overlay {
background-color: rgba(31, 107, 76, .9);
text-align: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
}
.work-item:hover .overlay {
opacity: 1;
}
.work-item .overlay a {
font-size: 30px;
display: inline-block;
margin-top: 34%
}
.work-item .overlay a:hover {
color: #fff;
}
/*=========================================
Media Queries
==========================================*/
/*============================================================
For Small Desktop
==============================================================*/
#media (min-width: 980px) and (max-width: 1150px) {
/* work */
}
/*============================================================
Tablet (Portrait) Design for a width of 768px
==============================================================*/
#media (min-width: 768px) and (max-width: 979px) {
/* work */
.work-item {
float: left;
width: 33%;
}
}
/*============================================================
Mobile (Portrait) Design for a width of 320px
==============================================================*/
#media only screen and (max-width: 767px) {
/* work */
.work-item {
float: left;
left: 5% !important;
width: 90%;
}
}
/*============================================================
Mobile (Landscape) Design for a width of 480px
==============================================================*/
#media only screen and (min-width: 480px) and (max-width: 767px) {
/* work */
.work-item {
left: inherit !important;
width: 50%;
}
}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- meta charec set -->
<meta charset="utf-8">
<!-- Page Title -->
<title>MixItUp</title>
<!--=========================================
CSS
=========================================-->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/main.css">
<!--=========================================
Essential jQuery Plugins
=========================================-->
<!-- Main jQuery -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- jquery.mixitup.min -->
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<!-- Custom Functions -->
<script src="js/custom.js"></script>
</head>
<body id="body">
<section>
<div class="container">
<div class="row">
<div class="work-filter">
<ul class="text-center">
<li>All</li>
<li>Mix1</li>
<li>Mix2</li>
<li>Mix3</li>
<li>Mix4</li>
<li>Mix5</li>
<li>Mix6</li>
</ul>
</div>
</div>
</div>
<div class="project-wrapper">
<figure class="mix work-item mix1">
<img src="http://imgur.com/KZfjrVT.jpg" alt="">
<figcaption class="overlay">
Mix1
</figcaption>
</figure>
<figure class="mix work-item mix2">
<img src="http://imgur.com/GB54YZR.jpg" alt="">
<figcaption class="overlay">
Mix2
</figcaption>
</figure>
<figure class="mix work-item mix3">
<img src="http://imgur.com/afatbzS.jpg" alt="">
<figcaption class="overlay">
Mix3
</figcaption>
</figure>
<figure class="mix work-item mix4">
<img src="http://imgur.com/GvjT75d.jpg" alt="">
<figcaption class="overlay">
Mix4
</figcaption>
</figure>
<figure class="mix work-item mix5">
<img src="http://imgur.com/KJ9MaK6.jpg" alt="">
<figcaption class="overlay">
Mix5
</figcaption>
</figure>
<figure class="mix work-item mix6">
<img src="http://imgur.com/w3ZFVnq.jpg" alt="">
<figcaption class="overlay">
Mix6
</figcaption>
</figure>
</div>
</section>
</body>
</html>
Thanks in advance,
Luiz.


You can achieve the desired like below.
Add the event on filter class and check for the element with the same data-filter attribute in the tab context.
$(document).ready(function() {
/* ========================================================================= */
/* Filtering
/* ========================================================================= */
$(".project-wrapper").mixItUp();
$(".filter").on("click",function()
{
var dFilter = $(this).attr("data-filter");
var tabContext = $(".work-filter");
$( "a[data-filter='"+dFilter+"']",tabContext ).addClass("active");
})
});
/*=========================================
Basic Style
==========================================*/
body {
line-height: 21px;
font-size: 13px;
}
ol, ul {
margin: 0;
padding: 0;
list-style: none;
}
a, a:focus, a:hover {
text-decoration: none;
}
body>section, .footer {
padding: 70px 0;
}
/*=========================================
Mix
==========================================*/
.work-filter {
margin-bottom: 35px;
}
.work-filter ul li {
display: inline-block;
}
.work-filter ul li a {
color: #062033;
display: block;
padding: 5px 17px;
}
.work-filter ul li a:hover, .work-filter ul li a.active {
background-color: rgba(31, 107, 76, 1);
color: #fff;
}
.mix {
display: none;
}
.project-wrapper {
text-align: center;
}
.work-item {
float: none;
width: 30%;
position: relative;
}
.work-item>img {
display: block;
height: 100%;
width: 100%;
}
.overlay {
background-color: rgba(31, 107, 76, .9);
text-align: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
}
.work-item:hover .overlay {
opacity: 1;
}
.work-item .overlay a {
font-size: 30px;
display: inline-block;
margin-top: 34%
}
.work-item .overlay a:hover {
color: #fff;
}
/*=========================================
Media Queries
==========================================*/
/*============================================================
For Small Desktop
==============================================================*/
#media (min-width: 980px) and (max-width: 1150px) {
/* work */
}
/*============================================================
Tablet (Portrait) Design for a width of 768px
==============================================================*/
#media (min-width: 768px) and (max-width: 979px) {
/* work */
.work-item {
float: left;
width: 33%;
}
}
/*============================================================
Mobile (Portrait) Design for a width of 320px
==============================================================*/
#media only screen and (max-width: 767px) {
/* work */
.work-item {
float: left;
left: 5% !important;
width: 90%;
}
}
/*============================================================
Mobile (Landscape) Design for a width of 480px
==============================================================*/
#media only screen and (min-width: 480px) and (max-width: 767px) {
/* work */
.work-item {
left: inherit !important;
width: 50%;
}
}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- meta charec set -->
<meta charset="utf-8">
<!-- Page Title -->
<title>MixItUp</title>
<!--=========================================
CSS
=========================================-->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/main.css">
<!--=========================================
Essential jQuery Plugins
=========================================-->
<!-- Main jQuery -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- jquery.mixitup.min -->
<script src="https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<!-- Custom Functions -->
<script src="js/custom.js"></script>
</head>
<body id="body">
<section>
<div class="container">
<div class="row">
<div class="work-filter">
<ul class="text-center">
<li>All</li>
<li>Mix1</li>
<li>Mix2</li>
<li>Mix3</li>
<li>Mix4</li>
<li>Mix5</li>
<li>Mix6</li>
</ul>
</div>
</div>
</div>
<div class="project-wrapper">
<figure class="mix work-item mix1">
<img src="http://imgur.com/KZfjrVT.jpg" alt="">
<figcaption class="overlay">
Mix1
</figcaption>
</figure>
<figure class="mix work-item mix2">
<img src="http://imgur.com/GB54YZR.jpg" alt="">
<figcaption class="overlay">
Mix2
</figcaption>
</figure>
<figure class="mix work-item mix3">
<img src="http://imgur.com/afatbzS.jpg" alt="">
<figcaption class="overlay">
Mix3
</figcaption>
</figure>
<figure class="mix work-item mix4">
<img src="http://imgur.com/GvjT75d.jpg" alt="">
<figcaption class="overlay">
Mix4
</figcaption>
</figure>
<figure class="mix work-item mix5">
<img src="http://imgur.com/KJ9MaK6.jpg" alt="">
<figcaption class="overlay">
Mix5
</figcaption>
</figure>
<figure class="mix work-item mix6">
<img src="http://imgur.com/w3ZFVnq.jpg" alt="">
<figcaption class="overlay">
Mix6
</figcaption>
</figure>
</div>
</section>
</body>
</html>

Related

move figcaption under the image for mobile devices

i'm in the process of making an old site responsive and i've encountered a few hurdles.
I would like the desktop version to show the fig captions on the right side, but in the mobile version the fig captions should be under the figure.
Unfortunately, I can't get the figcaptions to appear under the image.
I am thankful for every help!
Best wishes
<style type="text/css">
body {
margin: 60px;
}
.sidebar {
margin: 0;
padding: 0;
text-align: left;
width: 100%;
background-color: transparent;
position: fixed;
height: 100%;
overflow: auto;
list-style-type: none;
font-size: 14px !important;
}
.sidebar a {
display: block;
color: #666666;
padding: 8px;
text-decoration: none;
list-style-type: none;
}
.sidebar li {
list-style: none;
text-decoration: none;
}
.sidebar a.active {
background-color: transparent;
color: #4d4d4d;
list-style-type: none;
}
.sidebar a:hover:not(.active) {
background-color: transparent;
color: rgb(49, 49, 49);
}
.figure {
margin: 0;
}
.figure img {
vertical-align:;
}
.figure figcaption {
margin-left: 10px;
}
#media screen and (min-width: 768px) {.d-xl-none{display: none; }}
#media screen and (max-width: 768px) {
body {margin: 20px;}
div.content {margin-left: 0;}
div.preview {margin-left: 0;}
.sidebar {height: 100%;position: relative;text-align: center;margin-bottom: 0px !important;display: none; }
.sidebar a {float: left;align-items: center; }
.caption {text-align: center !important; }
.containerCarousel {margin-top: 0px;margin-bottom: 150px;width: 1fr;} }
#LP_img{align-content: center; margin: 0 auto;}
.overlay {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;left: 0;background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.9);overflow-x: hidden;transition: 0.5s;}
.overlay-content {position: relative;top: 10%;width: 100%;text-align: center;margin-top: 30px;}
.overlay a {padding: 8px;text-decoration: none;font-size: 15px;color: #818181;display: block;transition: 0.3s;}
.overlay a:hover,
.overlay a:focus {color: #f1f1f1;}
.overlay .closebtn {position: absolute;top: 20px; right: 45px; font-size: 40px;}
#media screen and (max-height: 480px) {
.overlay a {font-size: 20px }
.overlay .closebtn {font-size: 20px;top: 15px; right: 35px;}
.sidebar a {text-align: center;float: none;}
.sidebar {display: none; }
.content { margin-top: 10px !important;}
.preview { margin-top: 10px !important; }
.caption {text-align: center !important; }
.imagePreview {margin: auto 0;}
}
.imagePreview{
max-width: 400px;
}
</style>
<!doctype html>
<html lang="en">
<head>
<title>Christoph Urwalek</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
</head>
<body>
<!-- START Mobile Nav-->
<div class="continer">
<div id="myNav" class="overlay">
×
<div class="overlay-content">
painting
drawing
collage
video
current
text
biography
contact
</div>
</div>
<span class="d-xl-none" style="font-size:30px;cursor:pointer; color: #4d4d4d;" onclick="openNav()">☰ <font size="-1"><b>Christoph Urwalek</b></font></span>
</div>
<!-- END Mobile Nav-->
<!--START Wrapper-->
<div class="container-fluid my-container align-items-center">
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<nav class="sidebar-header sidebar">
<li><a class="active" href="./hungabunga.html"><b>Christoph Urwalek</b></a></li>
<li>painting</li>
<li>drawing</li>
<li>collage</li>
<li>video</li>
<li><a> </a></li>
<li>current</li>
<li>text</li>
<li>biography</li>
<li>contact</li>
</nav>
</div>
<!--END Sidebar -->
<div class="col-md-9 ">
<table class="table table-borderless ">
<tbody>
<!---->
<tr>
<td><figure class="figure d-flex justify-content-center">
<img src="http://christophurwalek.at/index/Wandcollage.jpg" class="figure-img img-fluid rounded imagePreview" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption"><a href="###">Test first line<br>Test second line</figcaption>
</figure></td>
</tr>
<!---->
<!---->
<tr>
<div class="container">
<td><figure class="figure d-flex justify-content-center">
<img src="./assets/img/thumbnails/Fake_35x47cm_2020__.jpg" class="figure-img img-fluid rounded imagePreview" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption caption center-block">real_FAKE<br>2020</figcaption>
</figure>
</div></td>
</tr>
<!---->
<tr>
<td><figure class="figure d-flex justify-content-center">
<img src="./assets/img/thumbnails/Various_2020_wand.jpg" class="figure-img img-fluid rounded imagePreview" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">Various III</figcaption>
<figcaption class="figure-caption">2020</figcaption>
</figure></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<!--END Wrapper-->
<script type="">
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>
sorry for adding all the code..
I don't know what could have been of importance to you.

The solution is to change d-flex to block for smaller devices. (I wouldn't do that, I think you should change everything to use Bootstrap 4 as it's intended, and remove the table which makes no sense).
#media screen and (max-width: 768px) {
/* all the styles you want */
.d-flex {
display: block !important;
}
}
Keep in mind there are errors in the code, there is an empty vertical-align for .figure img, and there is an unclosed <a> element.

Margin auto doesn't work even if I have width and height defined

I want to make the hero title even with the navbar. However, I ran into some responsive issues. Right now I'm doing frontend mentor challenges and they advised that the max width for desktop should be 1440px. Here's where I'm not sure how to do it correctly.
I need the hero title and the logo be in one line.
I want to apply margin auto to navbar but that doesn't seem to work at all.
Any idea how to fix this? My idea is to set the width of the container and navbar both to 1440px= 90em but not sure if that's a right way.
header {
position: absolute;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 90em;
width: 100%;
padding: 2em;
min-height: 8vh;
top: 0;
left: 0;
margin: 0 auto;
}
header img {
width: 10em;
height: 2em;
}
header ul {
list-style: none;
}
header ul a {
text-decoration: none;
}
header ul a li {
display: inline-block;
padding: 2em;
color: white;
}
header ul a li:hover {
color: #000;
}
header .burger {
display: none;
}
#media only screen and (max-width: 996px) {
header {
padding: 2.5em;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
header ul {
display: none;
}
header .burger {
display: block;
}
header .burger img {
width: 3em;
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Alata;
}
.container {
min-height: 100vh;
width: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: -ms-grid;
display: grid;
place-items: center;
background-image: url("../images/desktop/image-hero.jpg");
-webkit-box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
}
.container__intro {
max-width: 90em;
padding: 2em;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.container__intro__desc {
padding: 2em 5em 2em 2em;
border: 1px solid white;
}
.container__intro__desc p {
color: white;
font-size: 4rem;
font-family: Josefin Sans;
}
img {
width: 100%;
height: auto;
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing page</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a href="">
<img src="images/logo.svg" alt="logo">
</a>
<nav>
<ul>
<a href="">
<li>About</li>
</a>
<a href="">
<li>Careers</li>
</a>
<a href="">
<li>Events</li>
</a>
<a href="">
<li>Products</li>
</a>
<a href="">
<li>Support</li>
</a>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="">
</div>
</nav>
</header>
<div class="container">
<div class="container__intro">
<div class="container__intro__desc">
<p>
Immersive
</p>
<p>
Experiences
</p>
<p>
That Deliver
</p>
</div>
</div>
</div>
<div class="container">
<div class="img-container">
</div>
<div class="__desc">
</div>
</div>
<div class="container">
<div class="__top">
<p>Our Creations</p>
See All
</div>
<div class="__grid">
<div class="item">
<img src="" alt="">
<p>Deep</p>
<p>Earth</p>
</div>
<div class="item">
<img src="" alt="">
<p>Night</p>
<p>Arcade</p>
</div>
<div class="item">
<img src="" alt="">
<p>Soccer</p>
<p>Team VR</p>
</div>
<div class="item">
<img src="" alt="">
<p>The</p>
<p>Grid</p>
</div>
<div class="item">
<img src="" alt="">
<p>From Up</p>
<p>Above VR</p>
</div>
<div class="item">
<img src="" alt="">
<p>Pocket </p>
<p>Borealis</p>
</div>
<div class="item">
<img src="" alt="">
<p>The</p>
<p>Curiosity</p>
</div>
<div class="item">
<img src="" alt="">
<p>Make It</p>
<p>Fisheye</p>
</div>
</div>
</div>
</body>
</html>

flexbox, flexbox, flexbox!
#container{
max-width:1440px;
display:flex;
margin:0 auto;
}
#header{
border:solid 2px black;
flex-grow:1;
text-align:center;
}
<div id='container'>
<img src='https://via.placeholder.com/160x32.png' alt='log'>
<div id='header'>
here's to all the girls I...</div>
</div>

Moving image to first position after hide other elements

I need your help. When I fillter my image gallery and choose image that is on the second, third ... etc position, image is static, doesn't change position to the first from the left dynamically. ( see screen )
My code:
product_gallery.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style_gallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/gallery/js/gallery_button.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div class="logo">Example Page</div>
<body>
<div class="nav_buttons">
<ul class="tabs">
<a data-filter=".group-1" href="#" class="group_link">Group 1</a>
<a data-filter=".group-2" href="#" class="group_link">Group 2</a>
<a data-filter=".group-3" href="#" class="group_link">Group 3</a>
<a data-filter=".group-4" href="#" class="group_link">Group 4</a>
<a data-filter=".group-5" href="#" class="group_link">Group 5</a>
<a data-filter=".group-6" href="#" class="group_link">Group 6</a>
<a data-filter=".group-7" href="#" class="group_link">Group 7</a>
<a data-filter=".group-8" href="#" class="group_link">Group 8</a>
</ul>
</div>
<div class="thumbnails grid" id="portfolio">
<img src="gallery/M01.jpg" alt="" class="group-1">
<img src="gallery/M01.jpg" alt="" class="group-2">
<img src="gallery/M01.jpg" alt="" class="group-3">
<img src="gallery/M01.jpg" alt="" class="group-4">
<img src="gallery/M01.jpg" alt="" class="group-5">
<img src="gallery/M01.jpg" alt="" class="group-6">
<img src="gallery/M01.jpg" alt="" class="group-7">
<img src="gallery/M01.jpg" alt="" class="group-8">
<img src="gallery/M01.jpg" alt="" class="group-1">
<img src="gallery/M01.jpg" alt="" class="group-2">
<img src="gallery/M01.jpg" alt="" class="group-3">
<img src="gallery/M01.jpg" alt="" class="group-4">
<img src="gallery/M01.jpg" alt="" class="group-5">
<img src="gallery/M01.jpg" alt="" class="group-6">
<img src="gallery/M01.jpg" alt="" class="group-7">
<img src="gallery/M01.jpg" alt="" class="group-8">
<img src="gallery/M01.jpg" alt="" class="group-1">
<img src="gallery/M01.jpg" alt="" class="group-2">
<img src="gallery/M01.jpg" alt="" class="group-3">
<img src="gallery/M01.jpg" alt="" class="group-4">
</div>
</body>
</html>
style_gallery.css
#font-face {font-family: "ISOCT3"; src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot"); src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg"); }
body {
}
/** RESET **/
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
/** THUMBNAILS GLOBALS **/
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnails a {
height: 300px;
margin: 2px;
border-radius: 2px;
overflow: hidden;
}
.thumbnails img {
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.thumbnails a:hover img {
transform: scale(1.05);
}
/** THUMBNAILS GRID **/
.thumbnails.grid a {
width: calc(25% - 4px);
}
.thumbnails.grid a.double{
width: calc(50% - 4px);
}
.thumbnails.grid img {
width: 100%;
}
/** RESPONSIVENESS **/
#media (max-width: 1500px) {
.thumbnails.grid a {
width: calc(33.33% - 4px);
}
}
#media (max-width: 1000px) {
.thumbnails.grid a {
width: calc(50% - 4px);
}
.thumbnails.grid a.double{
width: calc(100% - 4px);
}
}
#media (max-width: 500px) {
.thumbnails.grid a {
width: calc(100% - 4px);
}
}
.logo {
font-family: ISOCT3;
font-size: 38px;
font-weight: bolder;
margin:auto;
padding-top: 28px;
padding-bottom:20px;
max-width: 80%;
color: #b8860b;
text-align: center;
letter-spacing: 3px;
}
#media only screen and (max-width: 800px) {
.logo {
font-family: ISOCT3;
font-size: 24px;
font-weight: bolder;
display: block;
color: #b8860b;
padding-top:25px;
margin: 0px auto 15px auto;
max-width: 90%;
height: auto !important;
letter-spacing: 2px;
}
}
.logo_link {
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.group_link {
background-color: #D29990;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-shadow: 0 -1px 1px saturate( darken($pink, 20%), 20%);
text-decoration: none;
color: #fff;
padding: 5px 20px;
line-height: 50px;
#include border-radius(50%);
display: inline-block;
#include transition( all .2s ease-in-out);
&:hover {
background-color: saturate( $pink, 20%);
}
}
.nav_buttons{
margin: 0 auto;
padding-left: 20px;
}
gallery_button.js
$(document).ready( function () {
$('.tabs').find('a').click( function (e) {
var theFilter = $(this).data('filter');
e.preventDefault();
$('.tabs').find('a').removeClass('active');
$(this).addClass('active');
$('#portfolio').find('img').show(); $('#portfolio').find('img').not(theFilter).hide();
});
});
And here is the screen showing what's wrong :

Your code is pretty close to working, if I remove the grid class (on the thumbnails div) it would produce your desired behavior without any additional modifications, but you most likely want the grid behavior.
Even though you're hiding the img elements, their parent elements (a anchor elements) are not hidden. You should be able to hide/show the parent elements of the images (the a anchor elements) to get your desired behavior.
As you can see from the modified js below, it's just one extra .parent() call that was adjusted on your show/hide selectors:
$('#portfolio').find('img').parent().show();
$('#portfolio').find('img').not(theFilter).parent().hide();
Just one additional suggestion for future questions: typically it's a lot easier for people to answer you question + see what you're seeing by using the built in Javascript/HTML/CSS snippet tool built into StackOverflow (for images you can use something like the placeholder site I used below).
$(document).ready( function () {
$('.tabs').find('a').click( function (e) {
var theFilter = $(this).data('filter');
e.preventDefault();
$('.tabs').find('a').removeClass('active');
$(this).addClass('active');
$('#portfolio').find('img').parent().show();
$('#portfolio').find('img').not(theFilter).parent().hide();
});
});
#font-face {
font-family: "ISOCT3";
src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot");
src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg");
}
body {}
/** RESET **/
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
/** THUMBNAILS GLOBALS **/
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnails a {
height: 300px;
margin: 2px;
border-radius: 2px;
overflow: hidden;
}
.thumbnails img {
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.thumbnails a:hover img {
transform: scale(1.05);
}
/** THUMBNAILS GRID **/
.thumbnails.grid a {
width: calc(25% - 4px);
}
.thumbnails.grid a.double {
width: calc(50% - 4px);
}
.thumbnails.grid img {
width: 100%;
}
/** RESPONSIVENESS **/
#media (max-width: 1500px) {
.thumbnails.grid a {
width: calc(33.33% - 4px);
}
}
#media (max-width: 1000px) {
.thumbnails.grid a {
width: calc(50% - 4px);
}
.thumbnails.grid a.double {
width: calc(100% - 4px);
}
}
#media (max-width: 500px) {
.thumbnails.grid a {
width: calc(100% - 4px);
}
}
.logo {
font-family: ISOCT3;
font-size: 38px;
font-weight: bolder;
margin: auto;
padding-top: 28px;
padding-bottom: 20px;
max-width: 80%;
color: #b8860b;
text-align: center;
letter-spacing: 3px;
}
#media only screen and (max-width: 800px) {
.logo {
font-family: ISOCT3;
font-size: 24px;
font-weight: bolder;
display: block;
color: #b8860b;
padding-top: 25px;
margin: 0px auto 15px auto;
max-width: 90%;
height: auto !important;
letter-spacing: 2px;
}
}
.logo_link {
color: inherit;
/* blue colors for links too */
text-decoration: inherit;
/* no underline */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.group_link {
background-color: #D29990;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-shadow: 0 -1px 1px saturate(darken($pink, 20%), 20%);
text-decoration: none;
color: #fff;
padding: 5px 20px;
line-height: 50px;
#include border-radius(50%);
display: inline-block;
#include transition(all .2s ease-in-out);
&:hover {
background-color: saturate($pink, 20%);
}
}
.nav_buttons {
margin: 0 auto;
padding-left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style_gallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div class="logo">Example Page</div>
<body>
<div class="nav_buttons">
<ul class="tabs">
<a data-filter=".group-1" href="#" class="group_link">Group 1</a>
<a data-filter=".group-2" href="#" class="group_link">Group 2</a>
<a data-filter=".group-3" href="#" class="group_link">Group 3</a>
<a data-filter=".group-4" href="#" class="group_link">Group 4</a>
<a data-filter=".group-5" href="#" class="group_link">Group 5</a>
<a data-filter=".group-6" href="#" class="group_link">Group 6</a>
<a data-filter=".group-7" href="#" class="group_link">Group 7</a>
<a data-filter=".group-8" href="#" class="group_link">Group 8</a>
</ul>
</div>
<div class="thumbnails grid" id="portfolio">
<img src="https://via.placeholder.com/150" alt="" class="group-1">
<img src="https://via.placeholder.com/150" alt="" class="group-2">
<img src="https://via.placeholder.com/150" alt="" class="group-3">
<img src="https://via.placeholder.com/150" alt="" class="group-4">
<img src="https://via.placeholder.com/150" alt="" class="group-5">
<img src="https://via.placeholder.com/150" alt="" class="group-6">
<img src="https://via.placeholder.com/150" alt="" class="group-7">
<img src="https://via.placeholder.com/150" alt="" class="group-8">
<img src="https://via.placeholder.com/150" alt="" class="group-1">
<img src="https://via.placeholder.com/150" alt="" class="group-2">
<img src="https://via.placeholder.com/150" alt="" class="group-3">
<img src="https://via.placeholder.com/150" alt="" class="group-4">
<img src="https://via.placeholder.com/150" alt="" class="group-5">
<img src="https://via.placeholder.com/150" alt="" class="group-6">
<img src="https://via.placeholder.com/150" alt="" class="group-7">
<img src="https://via.placeholder.com/150" alt="" class="group-8">
<img src="https://via.placeholder.com/150" alt="" class="group-1">
<img src="https://via.placeholder.com/150" alt="" class="group-2">
<img src="https://via.placeholder.com/150" alt="" class="group-3">
<img src="https://via.placeholder.com/150" alt="" class="group-4">
</div>
</body>
</html>

How can I have my search check for objects on other pages but display on the current page

Currently I have a javascript search bar on my site to search images based on a div classed text which acts as their name.
However I plan on having several hundred images which would not be suitable for one page, which is why I added pages to my site, which brings me to my question.
How would I allow for a user regardless of what page they are on to use the search bar to search images from other pages and have that data displayed on their current page
I would like to try and do this without setting up a back end database which is where I feel this is headed, if anyone has any solutions please shoot them my way.
Below will be the html and css of my index as the second page is identical to the first other than the images. All my images are locally hosted, so if you want a running example on codepen, just comment and I will set that up.
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
</script>
/* Website Title */
h1 {
color: red;
}
/* Website desciption */
h2 {
color:red;
}
/* Text */
p {
font-family: Arial;
}
/* Website body */
body {
background-color: grey;
}
/*Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
border-right: 1px solid white;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding-right: 10px;
padding-bottom: 5px;
text-decoration: none;
text-transform: upercase;
font-size: 30px;
}
li:last-child {
border-right: none;
}
ul li:hover:not(.active) {
background-color: #555;
color: white;
}
.active {
background-color: red;
}
/* Search Bar */
input[type=text] {
width: 200px;
height: 50px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
font-size: 30px;
}
/* Cool code but not needed atm
input[type=text]:focus {
width: 100%;
float: left;
}
*/
/* Keeps images inline */
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
/*Puts overlay on images */
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
/* For links for the pages */
.pagination a {
color: black;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* Styling current page buttons */
.pagination a.active {
background-color: #4CAF50;
color: white;
}
/* Styling on mouse-over background color for page buttons */
.pagination a:hover:not(.active) {background-color: #ddd;}
/*Forcing footer to the bottom*/
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%;}
#main { padding-bottom: 10px; } /* Must equal the height of the footer */
#footer {
position: relative;
margin-top: -10px; /*Must equal negative value of the footer height */
height: 10px;
clear: both;
padding-top: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* End of forcing footer to the bottom*/
<html>
<title>Cryptos Explained</title>
<head>
<!-- Links to my CSS document -->
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- My main heading -->
<h1 align=center>Cryptos Explained</h1>
<!-- My Sub-heading -->
<h2 align=center>Explainations, Prices, WhitePapers and more</h2>
<!-- Allows me to have jquery code at the bottom of the page -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Kind of makes it mobile friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<!-- Navigation bar -->
<ul>
<li class="active">Home</li>
<li>Vocabulary</li>
<input type="text" id="myinput" name="search" placeholder="Search..." style="border-radius: 4px;">
</ul>
</header><br>
<body>
<!--Lots of Div classes so I can seperate the main and the footer -->
<div id="wrap">
<div id="main" class="clearfix">
<!-- All my images -->
<div class="image123">
<div class="imgContainer">
<img src="img/btc.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="img/ripple.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
</div>
<!-- Pages -->
<div id="footer">
<div class="pagination" align="center">
«
<a class="active" href="#">1</a>
2
3
4
»
</div>
</div>
</div>
</body>
</html>

White space appears on bottom of page after scrolling to the bottom and back up (Mobile)

I just noticed that when I scroll to the bottom of a couple of my webpages, scroll back to the top, and the back to the bottom again, a large white space appears at the bottom where the background should be. I've looked at a couple of other solutions, such as: Random white space at bottom of page but only on mobile, but the solution did not seem to fix the issue. I can't replicate the issue with Chrome Developer tools by selecting a mobile device, so I am having trouble troubleshooting what the error in my code may be to cause the behavior. Here is the relevant code for one of the pages:
function offset(elementToOffsetBy, elementToOffset, minScreenSize) {
var width = $(window).width();
if(width >= minScreenSize) {
var x = document.getElementById(elementToOffsetBy);
var height = x.offsetHeight;
var top_offset = height * -1;
document.getElementById(elementToOffset).style.top = top_offset + "px";
document.getElementById(elementToOffset).style.bottom = "0px";
}
}
body, html {
height: 100%;
}
#portfolio {
background: url("https://ndmikkiholicdotcom.files.wordpress.com/2016/06/black-and-white-brick-wall-background-white-brick-wall-image-decoration-picture-white-brick-wall.jpg") no-repeat center center fixed;
background-size: cover;
}
.topnav {
overflow: hidden;
}
.topnav a.selected {
background-color: rgba(242, 242, 242, .3);
color: #3b4e6b;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 20px 25px;
}
.topnav a:hover {
color: #3b4e6b;
background-color: rgba(242, 242, 242, .3);
}
.topnav .icon {
/* Hide icon to expand menu */
display: none;
}
/* When screen is less than 600px wide, hide all links except the first one, and display the icon to expand the menu */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* When screen is less than 600px wide, display all links vertically when icon is clicked */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
color: #f2f2f2;
background-color: #3b4e6b;
}
.topnav.responsive a:hover {
color: #3b4e6b;
background-color: #f2f2f2;
}
}
.portfolio_img {
width: 80%;
height: 80%;
margin-left: 4em;
margin-right: 4em;
margin-bottom: 3em;
margin-top: 3em;
}
.hover_img {
display: inline-block;
width: 100%;
height: 100%;
}
.hover_img:hover img {
opacity: .2;
}
.hover_img:hover .center_text {
display: block;
}
.center_text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
font-weight: bold;
}
.col-md-4 {
position: relative;
text-align: center;
}
.row {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="image_styles.css" rel="stylesheet" type="text/css">
<link rel='shortcut icon' type='image/x-icon' href='logo.ico'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="navbar.js"></script>
</head>
<body id="portfolio">
<div class="topnav" id="myTopnav">
Home
About
Portfolio
Contact
<a class="icon" onclick="myFunction()">☰</a>
</div>
<div class="container">
<h1><b>Projects</b></h1>
<div class="row">
<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png" alt="Breakout">
<div class="center_text">Breakout.</div>
</div>
</div>
</div>
<h1><b>Websites</b></h1>
<div class="row">
<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png" alt="Flashcard App">
<div class="center_text">Chemistry Flashcard Web App</div>
</div>
</div>
<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
<div class="center_text">Personal Website</div>
</div>
</div>
<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
<div class="center_text">Website</div>
</div>
</div>
</div>
<h1><b>Publications</b></h1>
<div class="row">
<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
<div class="center_text">Author of Book</div>
</div>
</div>
<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png" alt="Red Alert Politics">
<div class="center_text">Red Alert Politics</div>
</div>
</div>
<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://pixy.org/images/placeholder.png">
<div class="center_text"><a href="https://www.loneconservative.com" target="_blank">Lone Conservative<a/></div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the before screenshot of the page:
Here is the after screenshot of the page:

With the help from other users I was able to identify more precise language to search for solutions to the problem. The issue was that setting <body> to 100% did not give the element enough height when scrolling beyond the original viewport. By changing the 100% to 100vh the background now extends, despite a slight lag, when scrolling beyond the initial viewport.

Categories

Resources