How can I execute HTML code with a Javascript for loop?

How can I execute HTML code with a Javascript for loop? - javascript

I am trying to create a page, where each film (from a database) is displayed in an image slider, I have managed to make the image slideshow but I am now attempting to repeat this code via a for loop, rather than add an individual film each time.
This is my code currently, without any for loops, I have attached my HTML and external css file
tml {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 10px;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
/*::-webkit-scrollbar-thumb {
background: #FF0000;
}*/
#wrapper {
max-width: 100%;
padding: 50px 75px 50px 45px;
position: relative;
bottom: 0em;
}
button:focus {
outline: 0 !important;
}
.left-controls {
position: absolute;
top: 0;
left: 0;
width: 4%;
height: 1000px;
z-index: 40;
/*background:#fff;*/
opacity: 1;
cursor: pointer;
text-align: center;
webkit justify-content: center;
justify-content: center;
display: webkit box;
display: webkit flex;
display: moz box;
display: ms flexbox;
display: flex;
color: #fff;
}
.fa-chevron-left-extra {
align-self: center;
position: relative;
height: auto;
top: -250px;
transform-origin: 55% 50%;
font-style: normal;
font-weight: 400;
line-height: 1;
font-variant: normal;
text-transform: none;
font-size: 2.5vw;
transition: transform .1s ease-out 0s;
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: ease-out;
transition-delay: 0s;
color: blue;
opacity: .1;
}
.right-controls {
position: absolute;
top: 0;
right: 0;
width: 4%;
height: 1000px;
z-index: 40;
/*background:#fff;*/
opacity: 1;
cursor: pointer;
text-align: center;
webkit justify content: center;
justify-content: center;
display: webkit box;
display: webkit flex;
display: moz box;
display: ms flexbox;
display: flex;
color: #fff;
}
.fa-chevron-right-extra {
align-self: center;
position: relative;
height: auto;
top: -250px;
transform-origin: 55% 50%;
font-style: normal;
font-weight: 400;
line-height: 1;
font-variant: normal;
text-transform: none;
font-size: 2.5vw;
transition: transform .1s ease-out 0s;
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: ease-out;
transition-delay: 0s;
color: blue;
opacity: .1;
}
.title {
color: #eee;
}
.module-section {
/*max-width: 100%;*/
overflow: hidden;
overflow-x: scroll;
/* border-left:1px solid #fff;
border-right:1px solid #fff;
*/
}
ul {
width: 600em;
list-style-type: none;
padding: 50px 0 50px 0;
}
#content {
position: relative;
}
/*
.arrow-guides, .arrow-guides:hover{
font-size:29px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
float:left;
position:relative;
top:80px;
left:-10px;
padding: 10px 5px 5px 2px;
background:#999;
color:#fff;
}
*/
/*
.arrow-guides-right, .arrow-guides-right:hover{
font-size:29px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
float:right;
position:relative;
bottom:185px;
right:-40px;
padding: 10px 2px 5px 5px;
background:#999;
color:#fff;
}
*/
.card {
width: 15em;
height: 350px;
background: mistyrose;
float: left;
margin-right: 10px;
margin-bottom: 50px;
cursor: pointer;
transform: scale(1);
visibility: visible;
-moz-box-shadow: 0px 1px 5px 0px #676767;
-webkit-box-shadow: 0px 1px 5px 0px #676767;
box-shadow: 0px 1px 5px 0px #676767;
}
.card:hover {
cursor: pointer;
transform: scale(1);
visibility: visible;
transition: all .2s ease-in-out;
transform: scale(1.1);
z-index: 100;
position: relative;
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
transition-duration: 400ms;
}
.inside-top {
width: 14em;
height: 300px;
position: absolute;
text-align: center;
top: 0;
left: 0;
z-index: 100;
}
.clearfix {
overflow: auto;
zoom: 1;
}
<div id="wrapper">
<span id="controlL" class="left-controls" role="button" aria-label="See Previous Modules">
<b class="fa fa-chevron-left fa-chevron-left-extra" aria-hidden="true"></b>
</span>
<div class="module-section clearfix">
<!-- <button class="btn arrow-guides fa-chevron-left"></button> -->
<ul id="content">
<li class="card">
<div class="inside-top">
<input type="image" id="image" alt="1917" src="./Images/1.png">
<h4>1917</h4>
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/2.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/3.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/4.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/5.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/6.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/7.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/8.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/9.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/10.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/11.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/12.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/13.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/14.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/15.png">
</div>
</li>
</ul>
</div>
<!--end of module-section-->
<span id="controlR" class="right-controls" role="button" aria-label="See Previous Modules">
<b class="fa fa-chevron-right fa-chevron-right-extra" aria-hidden="true"></b>
</span>
<!-- <button class="btn arrow-guides-right fa-chevron-right"></button> -->
</div>

Assuming your data is stored in a variable called films like the following:
var films = [["1917", "1.png"], ["The Lion King", "2.png"], ["Parasite", "3.png"]];
you can loop through them like this:
var i, len, films, list;
for (i = 0, len = films.length, list=""; i < len; i++) {
list += "<li class='card'><div class='inside-top'><img src='http://yoursite/wherefilesare/" + films[i][1] + "' id='image-" + i + "><h4>" + films[i][0] + "</h4>";
}
then echo the list inside your unordered list:
document.getElementById("content").innerHTML = list;
Updated the code to add an ID to images. The ID will be "image-(number)" and will be unique to each image then you could do something like this:
document.getElementById("image-1").addEventListener("click", doSomethingMethod);

I think this would do. Do the changes if needed. Add this script in script tag.
const ul_tag = document.getElementById("content")
let list_of_images = ["1.png","2.png","3.png"] // so on ...
list_of_images.forEach( (image, index) => {
let card = document.createElement("li")
card.setAttribute("class", "card")
let div = document.createElement("div")
div.setAttribute("class", "inside-top")
card.appendChild(div)
let img_tag = document.createElement("img")
img_tag.setAttrbute("src", "./Images/"+image)
div.appendChild(img_tag)
ul_tag.appendChild(card)
})

Hi try this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="dataOutput"></div>
</body>
<script>
data = [
{ name: "Alessio", surname: "Bardolino", age: "20" },
{ name: "Giovanni", surname: "Told", age: "32" },
{ name: "Sonia", surname: "Bin", age: "42" }
]
createTable(data);
function createTable(data) {
var htmlContents = "";
const app = document.getElementById('dataOutput');
data.forEach(resp => {
htmlContents += "<div class='container'>";
htmlContents += "<div><p class='name'>" + resp.name + "</p></div>";
htmlContents += "<div class='total'><p>" + resp.surname + "</p></div>";
htmlContents += "<div class='total'><p>" + resp.age + "</p></div>";
htmlContents += "</div>";
});
app.innerHTML = htmlContents;
}
</script>
</html>
I hope this help you!!!
Regards

In my example am loading from a JSON but you can equally do same with your DB.
<ul id="imageLoad"></ul>
<script>
var images = [
"https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1531702275836-8a2922d78491?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1523032217284-d9e49d6c5f04?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1534142499731-a32a99935397?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"];
var loadPhotos = "";
var i;
for (i = 0; i < images.length; i++) {
loadPhotos += "<li><img src=" + images[i] + " /></li>";
}
document.getElementById("imageLoad").innerHTML = loadPhotos;
</script>
Try let me know if this works and feel free to ask if you need clarification.

Related

Whitespace randomly appeared in site

I am building a website to showcase my future projects. But a whitespace randomly appeared on the site. When I inspect the site in chrome, the space does not seem to belong to any element. The space is between the banner and container-fluid from bootstrap. But when I add an extra div between the banner and container-fluid, the space seems to be on top of the container-fluid rather than below the banner.
Another problem I wanted to solve was, how can I make the text "Coming Soon" disappear when I hover over the images. I tried using "+" and "~" but it doesn't seem to work.
Any help or ideas would be very much appreciated! :)
Here is the code.
const navSlide = () => {
const burgerMenu = document.querySelector(".burger");
const nav = document.querySelector(".navbar-nav");
const navlinks = document.querySelectorAll(".navbar-nav li");
burgerMenu.addEventListener("click", function () {
// Toggle drop down menu
nav.classList.toggle("mobilenav-active");
// Increase links' opacity
navlinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = `linkSlide 0.5s ease forwards ${
index / 7 + 0.5
}s`;
}
});
// Toggle burger to cross animation
burgerMenu.classList.toggle("toggle");
});
};
navSlide();
#import url("https://fonts.googleapis.com/css2?family=Oswald:wght#700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Montaga&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght#600&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Slab&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.site {
overflow-x: hidden;
/* Unnecessary IMHO, uncomment next line to force hidden behavior */
/* overflow-x: hidden !important; */
/* Additional tunning proposed by the community */
position: relative;
width: 100%;
}
button {
outline: none !important;
}
/*NAVIGATION BAR*/
header {
position: absolute;
z-index: 10;
width: 100%;
padding: 25px 5%;
}
.navbar-nav {
flex-direction: row;
}
.navbar-brand {
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
text-shadow: 1px 1px 3px black;
margin-right: 0;
}
.navbar-brand:hover {
color: rgba(202, 210, 197, 1);
}
.nav-item,
.nav-link {
font-size: 1.05em;
text-transform: uppercase;
font-weight: 800;
margin-right: 20px;
color: #cad2c5;
text-shadow: 1px 1px 5px black;
font-family: "Montaga", serif;
letter-spacing: 1px;
transition: all 0.5s;
}
.nav-link:hover {
background: #2f3e46;
color: #cad2c5;
}
#navbutton {
font-size: 1.05em;
text-transform: capitalize;
font-weight: 500;
font-family: "Montaga", serif;
letter-spacing: 1px;
padding: 9px 25px;
background: #cad2c5;
border: none;
border-radius: 50px;
transition: all 0.5s;
margin-left: 10px;
}
#navbutton:hover {
background: #2f3e46;
color: #cad2c5;
}
.burger div {
width: 25px;
height: 3px;
background: #cad2c5;
margin: 5px;
border-radius: 3px;
transition: all 0.3s ease;
}
.burger {
display: none;
}
/* Make from burger icon to X icon */
.toggle #line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle #line2 {
opacity: 0;
}
.toggle #line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/* Animation for links */
#keyframes linkSlide {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*BANNER*/
.banner {
position: relative;
background: linear-gradient(rgba(24, 25, 26, 0.4), rgba(24, 25, 26, 0.4)),
url("../images/projects/banner-img.jpg") center/cover no-repeat fixed;
background-position: 50% 60%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#banner-text {
font-size: 6rem;
color: rgb(202, 210, 197);
letter-spacing: 2px;
text-shadow: 1px 1px 10px black;
font-family: "Dancing Script", cursive;
}
/* Mobile */
#media screen and (max-width: 992px) {
body {
overflow-x: hidden;
}
.navbar-nav {
position: absolute;
height: calc(95vh - 80px);
right: 0;
width: 100%;
top: 80px;
background: #354f52;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 100px 0px;
opacity: 0;
transform: translateX(100%);
transition: all 0.5s ease-in;
}
.nav-item,
.nav-link {
margin-right: 0;
text-shadow: none;
}
.navbar-nav li a:hover {
color: #354f52;
background: #edf0f1;
padding: 10px 20px;
text-shadow: none;
}
.nav-item {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
.navbar-nav.mobilenav-active {
transform: translateX(0%);
opacity: 0.96;
}
#navbutton {
margin-left: 0;
}
#banner-text {
font-size: 5rem;
}
}
.transition {
width: 100vw;
height: 50px;
background: #000;
}
/*IMAGE GALLERY*/
.container-fluid {
background: rgb(47,62,70);
background: radial-gradient(circle, rgba(47,62,70,1) 0%, rgba(132,169,140,1) 100%);
}
.item {
transition: all 0.5s ease-in-out;
position: relative;
text-align: center;
color: white;
}
.item img {
filter: brightness(50%);
transition: all 0.3s ease-in-out;
}
.item img:hover {
filter: brightness(100%);
}
.img-center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Oswald", sans-serif;
font-weight: 500;
font-size: 2.5rem;
color: #f5f5f5;
text-shadow: 1px 1px 2px black;
transition: all 0.3s ease-in-out;
}
/*FOOTER*/
footer {
display: flex;
flex-flow: row wrap;
padding: 60px 50px 20px 50px;
background: #2f3e46;
line-height: 1.5;
font-family: "Poppins", sans-serif;
}
.footer {
margin: auto;
position: relative;
}
.footer-container {
position: absolute;
margin: 0;
padding: 0;
top: 50%;
transform: translateY(-50%);
}
#logo {
margin: 0;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
}
.footer > * {
flex: 1 100%;
}
.footer-col-left {
margin-right: 1.25em;
margin-bottom: 2em;
}
.footer-col-right h4 {
font-size: 20px;
color: #cad2c5;
margin-bottom: 35px;
text-transform: capitalize;
font-family: "Poppins", sans-serif;
font-weight: 500;
position: relative;
}
.footer-col-right h4::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
background: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer-col-right ul li:not(:last-child) {
margin-bottom: 10px;
}
.box li a,
.box li p {
font-size: 16px;
color: #f5f5f5;
text-decoration: none;
font-weight: 300;
display: block;
font-family: "Roboto Slab", serif;
transition: all 0.3s ease;
}
.footer-col-right ul li a:hover {
color: #cad2c5;
padding-left: 10px;
}
.footer a {
text-decoration: none;
}
.footer-col-right {
display: flex;
flex-flow: row wrap;
}
.footer-col-right > * {
flex: 1 50%;
margin-right: 1.25em;
}
.footer-row-bot {
text-align: center;
color: #cad2c5;
padding-top: 45px;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 14px;
}
.footer-col-left p {
padding-right: 20%;
}
.footer-col-left .socials a {
display: inline-block;
height: 40px;
width: 40px;
background: #52796f;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: rgba(202, 210, 197, 1);
transition: all 0.5s ease;
}
.socials {
padding-top: 5px;
}
.footer-col-left .socials a:hover {
background: rgba(202, 210, 197, 1);
color: #52796f;
}
#media screen and (max-width: 780px) {
footer {
padding: 60px 10px 20px 10px;
}
}
#media screen and (min-width: 700px) {
.footer-col-right > * {
flex: 1;
}
.footer-col-left {
flex: 1 0px;
}
.footer-col-right {
flex: 2 0px;
}
}
#media screen and (max-width: 700px) {
.footer {
padding: 15px;
}
.footer-container {
position: absolute;
margin-top: 30px;
padding: 0;
top: 0;
transform: translateY(0);
}
.footer-col-right {
margin-top: 75px;
}
.footer-col-right h4 {
margin-top: 50px;
}
}
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="./css/project-style.css" rel="stylesheet" />
<link rel="shortcut icon" href="./images/fav.ico" type="image/x-icon" />
<title>Projects -BWS</title>
</head>
<body>
<div class="site">
<header>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand navbar-left" href="index.html">BrianWyann</a>
<ul class="navbar-nav navbar-light ml-lg-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html"
>Home<span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./project.html">Projects</a>
</li>
</ul>
<div class="burger navbar-center">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
<a href="./contact.html" id="contact">
<button id="navbutton">Contacts</button>
</a>
</nav>
</header>
<section class="banner">
<h1 id="banner-text">My Creations</h1>
</section>
<div class="transition"></div>
<div class="container-fluid">
<div class="row mt-4">
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img1.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img1.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img2.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img2.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img3.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img3.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img4.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img4.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img5.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img5.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img6.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img6.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img7.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img7.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img8.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img8.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
<div class="item col-sm-6 col-md-4 mb-3">
<a href="./images/projects/img9.jpg" class="fancybox" data-fancy="gallery1">
<img src="./images/projects/img9.jpg" width="100%" height="100%">
<h5 class="img-center">Coming Soon!</h5>
</a>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-col-left">
<div class="footer-container">
<a id="logobutton" href="index.html">
<h4 id="logo">BrianWyann</h4>
</a>
<div class="socials">
<a href="https://www.facebook.com/" target="blank"
><i class="fab fa-facebook-f"></i
></a>
<a href="https://twitter.com/" target="blank"
><i class="fab fa-twitter"></i
></a>
<a href="https://www.instagram.com/" target="blank"
><i class="fab fa-instagram"></i
></a>
<a href="https://www.linkedin.com/feed/" target="blank"
><i class="fab fa-linkedin-in"></i
></a>
</div>
</div>
</div>
<ul class="footer-col-right">
<li>
<h4>Myself</h4>
<ul class="box">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contacts</li>
</ul>
</li>
<li class="mooc">
<h4>MOOCs</h4>
<ul class="box">
<li>edX</li>
<li>
Coursera
</li>
<li>
<a href="https://www.futurelearn.com/" target="blank"
>FutureLearn</a
>
</li>
<li>
<a href="https://cognitiveclass.ai/" target="blank"
>CognitiveClass</a
>
</li>
</ul>
</li>
<li>
<h4>Address</h4>
<ul class="box">
<li>
<p>
C 29, Perumahan Sunter Mediterania, 14340, North Jakarta City,
Jakarta, Indonesia
</p>
</li>
</ul>
</li>
</ul>
<div class="footer-row-bot">
<p>All right reserved by ©wyannbrian 2020</p>
</div>
</footer>
<script src="./js/app.js"></script>
</div>
</body>
</html>

There is a setting with !important for margin-top buried in an SCSS file.
.mt-4, .my-4 {
margin-top: 1.5rem!important;
}
To override it for just this one instance (so as not to disturb its usage anywhere else if used) introduce this inline style:
<div class="transition"></div>
<div class="container-fluid">
<div class="row mt-4" style="margin-top: 0 !important;">

Solution for whitespace: Remove margin-top styling applied to the div class="row mt-4" inside div class="container-fluid".
.mt-4 {
margin-top: 1.5rem!important; /*remove this*/
}

My "Total Number' Will iterate different number amounts, even though I used --

I have a shopping cart and it displays how many items are in the cart. It will go up by one if you press 'Add to cart' and will go down by one when you press 'remove'. I have a bug that does this.. When I press each 'remove' button it will take away different types of amounts from the 'total number' depending on which 'remove' button I click, and I want each button to only take away one number on each click event
CODE:
HTML:
<!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">
<title>E-Commerce Website</title>
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css"><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css">
<script src="app.js"async></script>
</head>
<body>
<div class="wrapper">
<div class="p1">
<div class="topnavcont">
<ul class="topleftnav">
<li class="topnavlink">Home</li>
<li class="topnavlink">Shop</li>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<div class="carttotal">Total: <span id='actualprice'> $64.66</span></div>
</div>
</div>
<div class="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt1</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt2</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt3</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt4</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt5</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt6</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar{
display: none;
}
.wrapper{
overflow-x: hidden;
}
.topnavcont{
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav{
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li{
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle{
margin-right: 2.5%;
}
.navcartcontainer{
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber{
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i{
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover{
transform: scale(1.15);
}
.p1{
height: 100vh;
position: relative;
}
.p1 img{
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after{
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody{
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal{
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i{
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover{
transform: scale(1.15);
}
.cartbody input{
width: 2.2rem;
height: auto;
}
.cartbodyactive{
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle{
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem{
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle{
font-size: 1.2rem;
}
.cartitems{
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn{
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2{
height: 160vh;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
}
.itemcontainer{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn{
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover{
background-color: black;
color: white;
font-weight: bold;
}
JAVSCRIPT:
let TotalNumber = document.querySelector('.totalnumber');
const Atc = document.getElementsByClassName('atcbtn');
const cartbtn = document.getElementById('cartbtn')
const closeicon = document.getElementById('closeicon')
const cartbody = document.querySelector('.cartbody')
const removebtn = document.getElementsByClassName('removebtn')
const carttotal = document.querySelector('.carttotal')
cartbtn.addEventListener('click', function(){
cartbody.classList.toggle('cartbodyactive')
})
closeicon.addEventListener('click', function(){
cartbody.classList.remove('cartbodyactive')
})
function InputToDefault(){
let qinput = document.getElementsByClassName('qinput')
for(let i = 0; i < qinput.length; i++){
qinput[i].value= 1;
}
}
InputToDefault()
function RemoveItem(){
for (i = 0; i < removebtn.length; i++){
let rbutton = removebtn[i];
rbutton.addEventListener("click", function (){
//HERRE IS THE ISSUE.... HERE IS THE ISSUE...
let TotalNumbervalue = TotalNumber.innerText
if(TotalNumbervalue > 0){
// console.log(TotalNumbervalue)
TotalNumber.innerText--
}
rbutton.parentElement.parentElement.remove()
})
}
}
RemoveItem()
function AddItemtoCart(){
for (i = 0; i < Atc.length; i++){
let button = Atc[i];
button.addEventListener("click", function (){
let TotalNumbervalue = TotalNumber.innerHTML
if(TotalNumbervalue > -1){
TotalNumber.innerHTML++
}
let price = document.getElementById('actualprice')
let pricenum = price.innerText
console.log(pricenum)
let shopitem = button.parentElement
let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
let cartrow = document.createElement('div')
let cartitems = document.getElementsByClassName('cartitems')[0]
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`
cartrow.innerHTML = cartrowcontent
cartitems.append(cartrow)
qinput.value = 1
InputToDefault()
RemoveItem()
})
}
}
AddItemtoCart()

I didn't go through the rest of your code, but the way you're creating the Remove item event listeners doesn't really make sense. Why call a function when you just need run through the loop. The reason why you're not getting the result you expect is because the innerText is a string and you can't do math on strings. Instead, convert it to a number by putting a + in front of it.
for (i = 0; i < removebtn.length; i++) {
let rbutton = removebtn[i];
rbutton.addEventListener("click", function() {
let TotalNumbervalue = +TotalNumber.innerText.trim()
if (TotalNumbervalue > 0) {
TotalNumber.innerText--
}
rbutton.parentElement.parentElement.remove()
})
}

removeItem() loops through all remove button elements and adds a click listener that deletes the parent. You call this everytime a new item is added, which means eventually multiple click listeners "stack up" and you have multiple click listeners removing 1 from the total.
Instead, assign the click event listener after appending the element, ensuring only 1 click event listener will be applied
let TotalNumber = document.querySelector('.totalnumber');
const Atc = document.getElementsByClassName('atcbtn');
const cartbtn = document.getElementById('cartbtn')
const closeicon = document.getElementById('closeicon')
const cartbody = document.querySelector('.cartbody')
const removebtn = document.getElementsByClassName('removebtn')
const carttotal = document.querySelector('.carttotal')
cartbtn.addEventListener('click', function() {
cartbody.classList.toggle('cartbodyactive')
})
closeicon.addEventListener('click', function() {
cartbody.classList.remove('cartbodyactive')
})
function InputToDefault() {
let qinput = document.getElementsByClassName('qinput')
for (let i = 0; i < qinput.length; i++) {
qinput[i].value = 1;
}
}
InputToDefault()
function AddItemtoCart() {
for (i = 0; i < Atc.length; i++) {
let button = Atc[i];
button.addEventListener("click", function() {
let TotalNumbervalue = TotalNumber.innerHTML
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++
}
let price = document.getElementById('actualprice')
let pricenum = price.innerText
console.log(pricenum)
let shopitem = button.parentElement
let shoptitle = shopitem.getElementsByClassName('item-title')[0].innerText
let shopprice = shopitem.getElementsByClassName('itemprice')[0].innerText
let cartrow = document.createElement('div')
let cartitems = document.getElementsByClassName('cartitems')[0]
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`
cartrow.innerHTML = cartrowcontent;
cartitems.append(cartrow)
cartitems.lastChild.querySelector('.removebtn').addEventListener("click", function() {
let TotalNumbervalue = +TotalNumber.innerText;
console.log(TotalNumbervalue);
if (TotalNumbervalue > 0) {
TotalNumber.innerText--
}
this.parentElement.parentElement.remove()
})
qinput.value = 1
InputToDefault()
})
}
}
AddItemtoCart()
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar {
display: none;
}
.wrapper {
overflow-x: hidden;
}
.topnavcont {
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav {
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li {
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover {
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle {
margin-right: 2.5%;
}
.navcartcontainer {
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber {
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i {
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover {
transform: scale(1.15);
}
.p1 {
height: 100vh;
position: relative;
}
.p1 img {
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after {
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody {
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal {
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i {
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover {
transform: scale(1.15);
}
.cartbody input {
width: 2.2rem;
height: auto;
}
.cartbodyactive {
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle {
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem {
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle {
font-size: 1.2rem;
}
.cartitems {
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn {
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2 {
height: 160vh;
position: relative;
}
.p2title {
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img {
height: 200px;
width: 300px;
}
.itemcontainer {
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2 {
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn {
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover {
background-color: black;
color: white;
font-weight: bold;
}
<!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">
<title>E-Commerce Website</title>
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<script src="app.js" async></script>
</head>
<body>
<div class="wrapper">
<div class="p1">
<div class="topnavcont">
<ul class="topleftnav">
<li class="topnavlink">Home</li>
<li class="topnavlink">Shop</li>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<div class="carttotal">Total: <span id='actualprice'> $64.66</span></div>
</div>
</div>
<div class="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt1</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt2</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt3</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt4</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt5</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Shirt6</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
</body>
</html>

Search bar seems to be acting as if its position is sticky but I have it set to fixed yet it still moves down when I scroll

NOTE: TO VIEW SEARCH BAR BE SURE TO OPEN THE SNIPPET IN FULL SCREEN
Can someone help me fix this search button so that it doesnt move down the screen when I scroll.
I have it set to position: fixed but for some reason its still scrolling down.
Here is my website so far and I have the search bar on the far right corner. See snippet below (also please view it in full screen to see the search bar properly):
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allerta&display=swap" rel="stylesheet">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
}
.third-level-menu {
position: absolute;
top: 0;
right: -190px;
width: 190px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 45px;
background-color: #6640C1;
background: #6640C1;
}
.third-level-menu>li:hover {
background-color: gold;
}
.second-level-menu {
position: absolute;
top: 45px;
left: 0;
width: 100%;
/* width: 273.2px; */
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 45px;
background-color: #6640C1;
background: #6640C1;
width: 100%;
}
.second-level-menu>li:hover {
background-color: gold;
}
.top-level-menu {
display: flex;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100px;
z-index: 1;
justify-content: space-between;
}
.top-level-menu>li {
position: relative;
height: 30px;
/* width: 273.2px; */
background: #6640C1;
z-index: 2;
text-align: center;
flex: 1;
}
.top-level-menu>li:hover {
background-color: gold !important;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font-family: 'Fjalla One', sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
background: #6640C1;
/* Make the link cover the entire list item-container */
display: block;
line-height: 45px;
}
.top-level-menu a:hover {
color: #000000;
background-color: gold;
}
.container1 {
max-width: 1200px;
margin: auto;
background-color: white;
overflow: auto;
}
.gallery {
margin: 5px;
border: 5px solid black;
border-radius: 5%;
float: left;
width: 390px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 5%;
}
.gallery:hover {
transform: scale(1.03);
}
.desc {
padding: 15px;
text-align: center;
font-family: 'Fjalla One', sans-serif;
;
}
#main-title {
font-family: 'Alfa Slab One', cursive;
color: black;
font-size: 60px;
margin: 20px;
padding: 30px;
position: relative;
bottom: -20px;
background-color: transparent;
display: inline-block;
text-align: center;
}
.footer {
background-color: black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 100%;
color: white;
height: 300px;
}
.footer a {
text-decoration: none;
color: white;
}
.container2 {
max-width: 1500px;
margin: auto;
overflow: auto;
}
.container-top {
position: fixed;
background-color: gold;
top: 0;
width: 100%;
height: 10%;
z-index: 1;
text-align: center;
}
.top {
display: inline-block;
font-family: 'Permanent Marker', cursive;
font-size: 30px;
width: 100%;
margin: -20px;
z-index: 1;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
object-fit: cover;
width: 100%;
}
.moving-images {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: auto;
position: relative;
margin-top: -4%;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 2px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
.arrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
align-items: center;
}
.arrow i:hover {
color: black;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.title-block {
position: relative;
background-color: white;
font-family: 'Alfa Slab One', cursive;
width: 100%;
color: black;
margin: 50px 0 0 0px;
height: 20px;
text-decoration: none;
}
:root {
--line-thickness: 0.1em;
--glass-size: 50%;
--icon-height: 2.5rem;
--transition-speed: 0.15s;
--timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
--icon-color: black;
}
/* this is already done */
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
background-repeat: no-repeat;
background-attachment: fixed;
}
.search-icon {
box-sizing: border-box;
width: 30px;
height: 30px;
max-width: 20em;
transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
position: fixed;
top: 0;
right: 0;
bottom: 400px;
left: 0;
margin: auto;
border: solid var(--line-thickness);
border-color: rgba(255, 255, 255, 0);
border-radius: 100px;
padding: 0.25em;
}
.search-icon__wrapper {
width: var(--icon-height);
height: var(--icon-height);
position: absolute;
border-radius: 100px;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
transform: rotate(-45deg);
transition: all 0 linear;
}
.search-icon__wrapper:hover {
cursor: pointer;
}
.search-icon__input {
background: none;
text-align: center;
outline: none;
display: block;
border: none;
background: rgba(255, 255, 255, 0);
width: calc(90% - (var(--icon-height) / 2 + 1rem));
margin-right: 6rem;
height: 100%;
border-radius: 100px;
transition: all var(--transition-speed) linear;
font-size: 20px;
padding: 0 0.5em;
color: black;
}
.search-icon__input::placeholder {
color: grey;
}
.search-icon__glass {
width: var(--glass-size);
height: var(--glass-size);
border: solid var(--line-thickness);
border-color: var(--icon-color);
border-radius: 100px;
margin: 0 auto;
position: relative;
transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
}
.search-icon__handle {
height: calc(100% - var(--glass-size));
width: var(--line-thickness);
margin: 0 auto;
background: var(--icon-color);
position: absolute;
border-radius: 0 0 100px 100px;
left: 0;
right: 0;
bottom: 0;
transition: all var(--transition-speed) var(--timing-function);
transition-delay: var(--transition-speed);
}
.search-icon__handle::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--icon-color);
transform: rotate(0deg);
transition: all var(--transition-speed) var(--timing-function);
transition-delay: 0s;
}
.search-icon.open {
width: 200px;
border-color: var(--icon-color);
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__input {
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__glass {
width: 45%;
height: 45%;
transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
border-color: rgba(0, 0, 0, 0);
}
.search-icon.open .search-icon__handle {
bottom: calc(50% - (100% - var(--glass-size)) / 2);
border-radius: 100px;
transition-delay: 0s;
}
.search-icon.open .search-icon__handle::after {
transition-delay: var(--transition-speed);
transform: rotate(90deg);
}
</style>
<title>TheLeague.com</title>
</head>
<body>
<main>
<div class="container-top">
<div class="top">
<p>Shop 20% Off All Jerseys Now!</p>
</div>
</div>
<div class="title-block">
<div style="float:right; margin: 0 auto;">
<div class=" search-icon" style="margin-right: 50px; position: fixed;">
<input class="search-icon__input" placeholder="search ...">
<div class="search-icon__wrapper">
<div class="search-icon__glass"></div>
<div class="search-icon__handle"></div>
</div>
</div>
</div>
</div>
<div style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px;">
<a style="text-decoration: none;" href="#">
<h1 style="color: black;">The<u>League</u></h1>
</a>
</div>
</div>
<!-- <div>
<div style="text-align: center;">
<a style="text-decoration: none;" href="#">
<h1 id="main-title">The<u>League</u></h1>
</a>
</div>
</div> -->
<ul class="top-level-menu">
<li><i class="fa fa-home" style="font-size: 20px;"></i> Home</li>
<li>
<i class="fa fa-tag" style="font-size: 20px"></i> Shop All ▼
<ul class="second-level-menu">
<li>Jerseys</li>
<li>Hats</li>
<li>Gym Shorts</li>
</ul>
</li>
<li><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</li>
<li>
<i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams ▼
<ul class="second-level-menu">
<li>
Soccer
<ul class="third-level-menu">
<li>Barcelona</li>
<li>PSG</li>
<li>Real Madrid</li>
</ul>
</li>
<li>
Basketball
<ul class="third-level-menu">
<li>Golden State Warriors</li>
<li>Celtics</li>
<li>Chicago Bulls</li>
</ul>
</li>
<li>
Football
<ul class="third-level-menu">
<li>New England Patriots</li>
<li>Ravens</li>
<li>Atlanta Falcons</li>
</ul>
</li>
</ul>
<li><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us
</li>
</li>
</ul>
<div class="slideshow-container moving-images">
<div class="mySlides">
<img src="https://images.daznservices.com/di/library/sporting_news/a/fe/kobe-bryant-041315-getty-ftrjpg_hnmwtxmeqtvu1fyv5fnzn6abh.jpg?t=926331162&quality=100"
alt="kobe holding shirt" style="width:100%">
</div>
<div class="mySlides">
<img src="https://images.hdqwalls.com/download/lionel-messi-fc-art-1m-1366x768.jpg" style="width:100%">
<!-- <div class="text">Caption Two</div> -->
</div>
<div class="mySlides">
<img src="https://images.wallpapersden.com/image/download/tom-brady-new-england-patriots-football_21828_1366x768.jpg"
style="width:100%;">
<!-- <div class="text">Caption Three</div> -->
</div>
<div style="text-align: center;">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)"><strong>❮ Prev</strong>
</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)"><strong>Next ❯</strong>
</button>
</div>
</div>
<div style="text-align:center; margin: 10px;">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!-- JavaScript -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
const searchIcon = document.querySelector(".search-icon__wrapper");
searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
</script>
<!-- End of JavaScript -->
<div style="margin: 30px;">
<hr>
</hr>
</div>
<br><br>
<h3 style="text-align: center;font-size: 30px; color: black;font-family:'Fjalla One', sans-serif; ;">Featured
Jerseys</h3><br><br><br>
<div class="container1">
<div class="gallery">
<img src="https://www.teamzo.com/images/re-2019-2020-barcelona-home-nike-shirt-kids-messi-10-1559836177.png"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Barcelona 2019: Messi Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_1768000/altimages/FF_1768829ALT1_full.jpg&w=900"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Golden State Warriors 2019: StephCurry Jersey </div>
</div>
<div class="gallery">
<img src="https://images.footballfanatics.com/FFImage/thumb.aspx?i=/productimages/_3775000/altimages/ff_3775300-29e956db2213fbdbcf67alt1_full.jpg&w=325"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Canucks 2019: Customizable Jersey </div>
</div>
<div class="gallery">
<img src="https://contestimg.wish.com/api/webimage/5e86c1d100c605394a614f9c-large.jpg?cache_buster=71f3e987b756bb4df19be721d299a68b"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Patriots 2019: Tom Brady Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_3609000/altimages/ff_3609123-ef2947d2ef78011fbfc1alt3_full.jpg&w=600"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> PSG 2019: Neymar Jersey </div>
</div>
<div class="gallery">
<img src="https://cdn.shopify.com/s/files/1/0271/0975/2920/products/thumb.jpg?v=1580412625"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Lakers 2019: Kobe Bryant Jersey </div>
</div>
</div>
<div style="margin: 30px;">
<hr>
</hr>
</div>
<div class="footer">
<div style="float: left; margin: 0 auto; padding: 0 0 0 40px;">
<p><strong>Find a Store</strong></p>
<p><strong>Sign Up For Email</strong></p>
<p><strong>Become A Member</strong></p>
<p><strong>Site Feedback</strong></p>
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p>Get Help</p>
<p>Order Status</p>
<p>Shipping and Delivery</p>
<p>Returns</p>
<p>Payment Options</p>
<p>Contact Us</p>
</div>
<div style="margin:0 auto; width:200px; padding:4px 0 0 0;">
<strong>
<p>About The League</p>
</strong>
<p>News</p>
<p>Careers</p>
<p>Investors</p>
<p>Sustainability</p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
</div>
</main>
</body>
</html>

The problem seems to be the positioning of your container-top.
The position:Fixed effects the element in such a way that it follows the user's viewport. the position Absolute, on the other hand, takes the actual document into consideration.
Have a look at w3schools description here: https://www.w3schools.com/css/css_positioning.asp

You should define the position to absolute. Fixed means that it is always fixed to the same position on the screen, while absolute will force it to stay where it is in the element.

Trying to toggle class on group of items for accordion style functionality but it's acting funny

I am trying to toggle a class on the wrapper of a header (that you click to drop the body) and the body. The class changes the visibility, opacity, and max-height of the body to create the drop down effect.
This first item is dropped down by default. When another is open, all currently open items should close.
instead, when I click on a closed one it opens all of them but and closes the first one that is open by default.
here is my code:
$(".template_wrap").first().addClass("open");
$('.templates').find('.template_header').click(function(){
$(this).drop();
$('.template_header').not($(this)).drop();
});
$.fn.drop = function() {
$(this).parent(".template_wrap").toggleClass('open');
};
.page_center {
margin: 0 auto;
float: none;
}
.page_center.large {
width: 95%;
}
.page_center.medium {
width: 85%;
max-width: 1350px;
}
.page_center.small {
width: 85%;
max-width: 1130px;
}
.page_center.x-small {
width: 75%;
max-width: 680px;
}
.page_center:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .page_center { zoom: 1; } /* IE6 */
*:first-child+html .page_center { zoom: 1; } /* IE7 */
.template_wrap {
border: 1px solid #a32021;
width: 100%;
margin-bottom: 30px;
}
.template_header {
background: #a32021;
position: relative;
cursor: pointer;
padding: 1px 0 1px 2%;
}
.template_header:after {
position: absolute;
right: 2%;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 36px;
font-family:"FontAwesome";
content: "\f107";
transition: all 0.4s ease;
}
.template_wrap.open .template_header:after {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: all 0.4s ease;
content: "\f106";
top: 30%;
}
.template_header h2 {
color: #fff;
margin: 0;
line-height: 65px;
font-weight: 400;
}
.template_body {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
}
.template_wrap.open .template_body {
visibility: visible;
opacity: 1;
max-height: 10000px;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
padding: 2%;
}
.template_links {
width: 50%;
float: left;
}
.template_links_wrap {
border: 1px solid #f47628;
padding: 0;
margin: 0;
list-style: none;
}
.template_links_wrap li {
padding-left: 3%;
line-height: 52px;
}
.template_links_wrap li:nth-child(odd) {
background: #fbe4d6;
}
.template_links_wrap li a {
color: #f47628;
}
.template_img {
width: 50%;
float: right;
}
.template_img img {
margin: 0 auto;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content templates">
<div class="page_center medium">
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
</div>
</section>
Also, Something strange happens to the h2s where they move around based on various clicks. Any help would be appreciated.

This should do the trick:
$(".template_wrap").first().addClass("open");
$('.template_header').click(function(){
$('.template_wrap').removeClass("open");
$(this).parent().addClass("open");
})
Fiddle: https://jsfiddle.net/26kasg4t/

The trick here is to make all accordions close and then afterwards make this the only one open:
$('.template_wrap:first').addClass('open');
$('.template_header').click(function() {
if ($(this).parent().hasClass('open')) {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
} else {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
$(this).next('.template_body').slideDown();
$(this).parent().addClass('open');
}
});
Added a condition, should an accordion be open while it's clicked, it will just close.
SNIPPET
$('.template_wrap:first').addClass('open');
$('.template_header').click(function() {
if ($(this).parent().hasClass('open')) {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
} else {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
$(this).next('.template_body').slideDown();
$(this).parent().addClass('open');
}
});
.page_center {
margin: 0 auto;
float: none;
}
.page_center.large {
width: 95%;
}
.page_center.medium {
width: 85%;
max-width: 1350px;
}
.page_center.small {
width: 85%;
max-width: 1130px;
}
.page_center.x-small {
width: 75%;
max-width: 680px;
}
.page_center:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .page_center {
zoom: 1;
}
/* IE6 */
*:first-child+html .page_center {
zoom: 1;
}
/* IE7 */
.template_wrap {
border: 1px solid #a32021;
width: 100%;
margin-bottom: 30px;
}
.template_header {
background: #a32021;
position: relative;
cursor: pointer;
padding: 1px 0 1px 2%;
}
.template_header:after {
position: absolute;
right: 2%;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 36px;
font-family: "FontAwesome";
content: "\f107";
transition: all 0.4s ease;
}
.template_wrap.open .template_header:after {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: all 0.4s ease;
content: "\f106";
top: 30%;
}
.template_header h2 {
color: #fff;
margin: 0;
line-height: 65px;
font-weight: 400;
}
.template_body {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
}
.template_wrap.open .template_body {
visibility: visible;
opacity: 1;
max-height: 10000px;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
padding: 2%;
}
.template_links {
width: 50%;
float: left;
}
.template_links_wrap {
border: 1px solid #f47628;
padding: 0;
margin: 0;
list-style: none;
}
.template_links_wrap li {
padding-left: 3%;
line-height: 52px;
}
.template_links_wrap li:nth-child(odd) {
background: #fbe4d6;
}
.template_links_wrap li a {
color: #f47628;
}
.template_img {
width: 50%;
float: right;
}
.template_img img {
margin: 0 auto;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content templates">
<div class="page_center medium">
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
</div>
</section>

to make a div inside a div always in middle of the page

I am making a responsive gallery page but got stuck. All i want is to make my .gallery-container in middle in any width. There's a gap in right side which is not equal to left side. Is there any way to maintain the gap between left and right side equal so that the gallery div will be always in middle of the page in any width?
If there is, it will help me alot
heres my code
It's complicated because i have given width to image and without giving width i cant display bigger image while going to a link a. So, all i need is to make the half of the space of right side to left side also. I now figure out that's the work of js. If you can then do help me.
.sj-main-content-inner {
max-width: 100%;
display: block;
overflow: hidden;
min-height: 300px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
.gallery-container {
margin: 0;
}
ul {
list-style: square outside;
/* margin: 0 0 20px 20px; */
}
.gallery-list {
list-style: none;
float: left;
position: relative;
margin-right: 25px;
width: 360px;
border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
background: rgba(255,255,255,1);
}
.gallery-title {
position: absolute;
left: 50%;
bottom: 30px;
width: 302px;
margin-left: -151px;
text-align: center;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
border: 1px solid #fff;
padding: 20px 10px;
}
.gallery-title h3 {
font-size: 18px;
text-transform: none;
margin-bottom:20px;
}
.sj-read-more {
color: #000;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.sj-read-more:after {
content: '';
width: 60px;
height: 1px;
background: #a4a4a5;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
color: #e45f4d;
text-decoration: none;
}
.sj-read-more:hover:after {
width: 100%;
left: 0;
margin-left: 0;
bottom: 15px;
color: #e45f4d;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="sj-main-container">
<div class="sj-main-content">
<div class="sj-main-content-inner">
<h1>Foto Gallery</h1>
<ul class="gallery-container">
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="http://upper.dev/swiss-japon/suissejapon110216/?gallery=fotos">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>

Use this code:
.sj-main-content-inner {
width: 100%;
margin: auto;
display: block;
overflow: hidden;
min-height: 300px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
.gallery-container {
max-width: 800px;
height:100%;
background: #000;
margin:auto;
}
ul {
list-style: square outside;
/* margin: 0 0 20px 20px; */
}
.gallery-list {
list-style: none;
position: relative;
width: 360px;
margin:auto;
border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
background: rgba(255,255,255,1);
}
.gallery-title {
position: absolute;
left: 50%;
bottom: 30px;
width: 302px;
margin-left: -151px;
text-align: center;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
border: 1px solid #fff;
padding: 20px 10px;
}
.gallery-title h3 {
font-size: 18px;
text-transform: none;
margin-bottom:20px;
}
.sj-read-more {
color: #000;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.sj-read-more:after {
content: '';
width: 60px;
height: 1px;
background: #a4a4a5;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
color: #e45f4d;
text-decoration: none;
}
.sj-read-more:hover:after {
width: 100%;
left: 0;
margin-left: 0;
bottom: 15px;
color: #e45f4d;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
Now for making it responsive play with the values in his code and add it just where your CSS ends. For reference use this link
#media only screen and (max-width: 700px) {
.gallery-container{
width:500px;
margin:auto;
}
}
Whenever you have to position a body to the centre use this as a trick:
<selector>{
width:<x>px;
margin:auto;
}
You can specify the top and bottom margin using margin-top and margin-bottom below margin:auto; but once you use this you can not set margin-left or margin-right.(But then you won't be requiring margin let/right because you are positioning the div in centre).

Problem solved by using jquery
$(function() {
function updateDivPosition() {
var myWidth = $( '.gallery-title' ).width(), myHeight = $( '.gallery-title' ).height();
$( '.gallery-title' ).css( {
marginLeft: -( parseInt( myWidth, 10 ) / 2 ) + 'px',
marginTop: -( parseInt( myHeight, 10 ) / 2 ) + 'px'
});
}
updateDivPosition(); // first time set correct position on onload
$( window ).resize( updateDivPosition ); // update on window resize
});

Develop Reference

JavaScript is the programming language of the Web.

How can I execute HTML code with a Javascript for loop? - javascript

Related

Whitespace randomly appeared in site

My "Total Number' Will iterate different number amounts, even though I used --

Search bar seems to be acting as if its position is sticky but I have it set to fixed yet it still moves down when I scroll

Trying to toggle class on group of items for accordion style functionality but it's acting funny

to make a div inside a div always in middle of the page

Categories

Resources