Develop Reference

How to toggle the "parent" div when all "child" div are toggled (filtered as no result)?

I am making an instant search function using .filter() and .toggle().
It is basically working, but I would like to make the "search result" better by hiding the whole parent .char-section div section when there is no result inside (ie. no .item in the below example).
For example, when searching for banana, the script currently works like this:
https://i.stack.imgur.com/UMrbK.png
The desired result should look like this :
Here is the script:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$(".item").filter(function () {
$(this).toggle(
$(":is(.title)", this)
.text()
.toLowerCase()
.includes(value.toLowerCase())
);
});
});
});
body {
margin: 30px;
}
form {
margin-bottom: 10px;
}
.title {
display: block;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 10px;
font-size: 17px;
line-height: 1.25em;
font-weight: 700;
}
.char {
position: absolute;
left: 0%;
top: 0%;
right: auto;
bottom: auto;
z-index: 3;
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
margin-left: 2px;
padding-top: 0px;
padding-bottom: 0px;
color: #036;
font-size: 26px;
line-height: 1em;
}
.item {
position: relative;
top: -20px;
width: 100%;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 8px;
padding-bottom: 8px;
}
.list {
position: relative;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
padding: 2px 0px 2px 80px;
}
.char-section {
position: relative;
width: 100%;
height: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 30px 0px;
border-bottom: 3px solid #ddd;
}
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<form>
<input type="search" placeholder="Quick Search" class="h-filter-search" id="myInput">
<input type="reset" id="reset-btn" value="Reset">
</form>
<div class="ab-wrapper">
<div id="A" class="char-section">
<h5 class="char">A</h5>
<div class="list">
<div class="item">
<p class="title">Apple</p>
</div>
<div class="item">
<p class="title">Apple Juice</p>
</div>
<div class="item">
<p class="title">Avocado</p>
</div>
</div>
</div>
<div id="B" class="char-section">
<h3 class="char">B</h3>
<div class="list">
<div class="item">
<p class="title">Banana</p>
</div>
<div class="item">
<p class="title">Boiled Eggs</p>
</div>
<div class="item">
<p class="title">Bamboo Juice</p>
</div>
</div>
</div>
<div id="C" class="char-section">
<h3 class="char">C</h3>
<div class="list">
<div class="item">
<p class="title">Candy</p>
</div>
</div>
</div>
<div id="D" class="char-section">
<h3 class="char">D</h3>
<div class="list">
<div class="item">
<p class="title">Disco</p>
</div>
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
<div id="E" class="char-section">
<h3 class="char">E</h3>
<div class="list"></div>
</div>
<div id="F" class="char-section">
<h3 class="char">F</h3>
<div class="list">
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
</div>
On CodePen: https://codepen.io/pen/qBYbdYx
☝️ Edit: updated with the script in answer
Big thanks for any idea!
PS. Another small problem is that reset button can only reset the input field, but not reset the whole results list. The user must focus the input and hit "Esc" key. I will put this as another question later.

I have to disagree with another answer:
if (hit) {
$(this).closest(".char-section").show();
} else {
$(this).closest(".char-section").hide();
}
With this code, the "char-section" is going to be visible if and only if the last item of the section is. So the "A" section won't be visible if the search is on "Apple", for example.
My suggestion is 1/ hide all the "char-sections" 2/ show them in the same each/filter loop if one of their "item" children is visible, as follows:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
// hide all the sections
$(".char-section").hide();
// 'each' better than 'filter' here, because there's no filtering
$(".item").each(function () {
if ($("p.title", this).text().toLowerCase().includes(value))
// shows the item AND its "char-section" parent
$(this).show().parents(".char-section").show();
else
// hides the item, leaves its parent alone
$(this).hide();
});
});
});
HTH

This can be done rather easily. If we look at your html structure, we realize that the main 'container' <div> for an item, is of class char-section. So if we're searching through your title DIVs, we can get a reference to it's parent using:
.closest(".char-section")
on the object in question.
Now all we have to do is hide or show the whole container using the equally named show()/hide() methods in case the search was successful or not.
Here's an example:
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".item").filter(function(e) {
let hit = $(":is(.title)", this).text().toLowerCase().includes(value.toLowerCase());
$(this).toggle(hit);
if (hit) {
$(this).closest(".char-section").show();
} else {
$(this).closest(".char-section").hide();
}
});
});
});
body {
margin: 30px;
}
form {
margin-bottom: 10px;
}
.title {
display: block;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 10px;
font-size: 17px;
line-height: 1.25em;
font-weight: 700;
}
.char {
position: absolute;
left: 0%;
top: 0%;
right: auto;
bottom: auto;
z-index: 3;
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
margin-left: 2px;
padding-top: 0px;
padding-bottom: 0px;
color: #036;
font-size: 26px;
line-height: 1em;
}
.item {
position: relative;
top: -20px;
width: 100%;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 8px;
padding-bottom: 8px;
}
.list {
position: relative;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
padding: 2px 0px 2px 80px;
}
.char-section {
position: relative;
width: 100%;
height: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 30px 0px;
border-bottom: 3px solid #ddd;
}
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<form>
<input type="search" placeholder="Quick Search" class="h-filter-search" id="myInput">
<input type="reset" id="reset-btn" value="Reset">
</form>
<div class="ab-wrapper">
<div id="A" class="char-section">
<h5 class="char">A</h5>
<div class="list">
<div class="item">
<p class="title">Apple</p>
</div>
<div class="item">
<p class="title">Apple Juice</p>
</div>
<div class="item">
<p class="title">Avocado</p>
</div>
</div>
</div>
<div id="B" class="char-section">
<h3 class="char">B</h3>
<div class="list">
<div class="item">
<p class="title">Banana</p>
</div>
<div class="item">
<p class="title">Boiled Eggs</p>
</div>
<div class="item">
<p class="title">Bamboo Juice</p>
</div>
</div>
</div>
<div id="C" class="char-section">
<h3 class="char">C</h3>
<div class="list">
<div class="item">
<p class="title">Candy</p>
</div>
</div>
</div>
<div id="D" class="char-section">
<h3 class="char">D</h3>
<div class="list">
<div class="item">
<p class="title">Disco</p>
</div>
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
<div id="E" class="char-section">
<h3 class="char">E</h3>
<div class="list"></div>
</div>
<div id="F" class="char-section">
<h3 class="char">F</h3>
<div class="list">
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
</div>

My JavaScript won't work before i resize my browser window, and almost all my CSS is working, except for a few lines (idk what's the problem here)

I am trying to make the second page of my Website, but some of the CSS and JS seem to not work.
I have 4 files, and 4 folders (all located in 1 same folder). The first folder is view, which contains index.html (the main page of the website), and links.html (the file that isn't working). Then there is the js folder which contains script.js. The third folder is css and inside of it is style.css. The final folder is asset which has image assets for my Website.
Here is the content of index.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>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
Home
Links
Account
About
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Linkeld</h1>
<h2>With over 1.000.000 links worldwide</h2>
<div id="signup">
Sign-Up Now!
</div>
</div>
</div>
<div id="main">
<div id="aboutWebsite">
<div class="wrapper">
<div class="card">
<h1><i class="fas fa-share-alt"></i> Share</h1>
<p>Share links to people across the globe to discover, the limitation is only your imagination</p>
<div class="image" id="image1">
<img src="../asset/brooke-cagle-g1Kr4Ozfoac-unsplash-removebg-preview.png" alt="image1">
</div>
</div>
<div class="card">
<h1><i class="fas fa-search"></i> Discover</h1>
<p>Discover new websites from other people via links, you can visit all of the internet's website!
</p>
<div class="image" id="image2">
<img src="../asset/grzegorz-walczak-yoIIPcrWhjI-unsplash-removebg-preview.png" alt="image2">
</div>
</div>
<div class="card">
<h1><i class="fas fa-times-circle"></i> No Restrictions</h1>
<p>No restricted links or banned sites, share whatever you like</p>
<div class="image" id="image3">
<img src="../asset/cdd20-vR6bNYTVlpo-unsplash-removebg-preview.png" alt="image3">
</div>
</div>
</div>
</div>
<div id="whySignup">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Why Sign-Up?</h1>
<p>Firstly, you'll be able to share links with others! Not just click them.</p>
<p>Secondly, you can like and save links to your account, so you can view at them later.</p>
<p>Thirdly, you'll be able to customize your Username! No more plain old nicknames.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="phishing">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Would i fall to phishing?</h1>
<p>Well technically, yes, you will at some point fall into a phishing scam.</p>
<p>But, you can check the domain first, before clicking the link.</p>
<p>Check for any typos, or weird characters. A site that has a suspicious looking domain may be a
phishing website so be careful.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="nfsw">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Can I post NFSW related stuff?</h1>
<p>There is no limitation to what website you want to share here.</p>
<p>So yes you absolutely can post NFSW related content here and not get banned.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="signupCall">
<div class="wrapper">
<div class="section">
<h1>What are you waiting for?</h1>
</div>
<div class="section">
<div>
<a class="button" href="">Sign-Up Now!</a>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
Home
Copyright
Terms
Policy
Sources
</div>
<div class="section">
<h2>About us</h2>
Team
About
Site Stats
</div>
</div>
</div>
</body>
</html>
And here is links.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>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
Home
Links
Account
About
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Links</h1>
<h2 style="margin-bottom: 100px;">This is where you'll find links to Websites!</h2>
</div>
</div>
<div id="main">
<div id="linksList">
<div class="wrapper">
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
Home
Copyright
Terms
Policy
Sources
</div>
<div class="section">
<h2>About us</h2>
Team
About
Site Stats
</div>
</div>
</div>
</body>
</html>
Now for the CSS (style.css) :
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
:root {
/* CSS HEX */
--lime-green: #1ec90eff;
--metallic-sunburst: #9b7e46ff;
--mellow-apricot: #f4b266ff;
--dark-liver-horses: #544343ff;
}
html {
scroll-behavior: smooth;
}
a {
color: var(--lime-green);
text-decoration: none;
transition: text-decoration 0.3s ease-in-out;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: var(--lime-green);
}
#topnav {
position: fixed;
width: 100%;
z-index: 99;
background: white;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
transition: all 0.2s ease-in-out;
}
#topnav.transparent {
background: transparent;
box-shadow: none;
}
#topnav .wrapper.main {
display: flex;
justify-content: stretch;
}
#topnav .wrapper {
display: flex;
}
#topnav .wrapper#navLogo {
width: 70%;
}
#topnav .wrapper#navLogo img {
padding: 10px;
width: 60px;
margin-left: 40px;
}
#topnav .wrapper#navLinks {
flex: 1;
justify-content: space-evenly;
}
#topnav.transparent .wrapper#navLinks a {
padding: 20px;
text-decoration: none;
color: white;
text-align: center;
transition: all 0.2s ease-in-out;
}
#topnav .wrapper#navLinks a {
color: black;
padding: 20px;
text-decoration: none;
text-align: center;
transition: all 0.2s ease-in-out;
}
#head {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
margin-bottom: 30px;
}
#head .wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#head .wrapper h1,
#head .wrapper h2 {
color: white;
}
#head .wrapper img {
width: 40px;
margin: 100px 0 20px 0;
}
#head .wrapper h1 {
font-size: 90px;
}
#head .wrapper h2 {
font-size: 18px;
}
#head #signup {
margin: 80px 0 100px 0;
}
#head #signup a {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
#head #signup a:hover {
text-decoration: none;
transform: scale(1.1);
}
#aboutWebsite .wrapper {
display: flex;
flex-direction: row;
justify-content: center;
}
#aboutWebsite .wrapper .card {
width: 400px;
margin: 20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
padding: 80px 60px;
}
#aboutWebsite .wrapper .card h1 {
font-size: 40px;
margin-bottom: 20px;
font-weight: 300;
}
#aboutWebsite .wrapper .card p {
font-size: 18px;
}
#aboutWebsite .wrapper .card .image {
display: flex;
justify-content: center;
}
#aboutWebsite .wrapper .card .image img {
width: 300px;
}
#aboutWebsite .wrapper .card .image#image1,
#aboutWebsite .wrapper .card .image#image2 {
margin-top: 130px;
}
#foot {
margin-top: 50px;
background: rgb(235, 235, 235);
}
#foot .wrapper {
display: flex;
}
#foot .wrapper .section {
flex: 1;
padding: 50px 30px;
}
#foot .wrapper .section a {
display: block;
color: black;
margin-bottom: 30px;
width: max-content;
}
#foot .wrapper .section h2 {
margin-bottom: 30px;
}
#loader {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
background: white;
z-index: 999;
}
#loader.loaded {
display: none;
}
#loader span {
font-size: 100px;
}
a.button {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
a.button:hover {
text-decoration: none;
transform: scale(1.1);
}
#whySignup {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#whySignup .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#whySignup .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#whySignup .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#whySignup .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#whySignup .wrapper .section img {
width: 450px;
height: 500px;
}
#phishing {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#phishing .wrapper {
display: flex;
justify-content: start;
flex-direction: row-reverse;
transition: all 0.5s ease-in-out;
}
#phishing .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#phishing .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#phishing .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#phishing .wrapper .section img {
width: 450px;
height: 500px;
}
#nfsw {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#nfsw .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#nfsw .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#nfsw .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#nfsw .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#nfsw .wrapper .section img {
width: 450px;
height: 500px;
}
#signupCall {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#signupCall .wrapper {
display: flex;
flex-direction: column;
transition: all 0.5s ease-in-out;
}
#signupCall .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background: transparent;
}
#signupCall .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
font-size: 50px;
}
#signupCall .wrapper .section:first-child h2 {
font-size: 20px;
margin-bottom: 10px;
}
#signupCall .wrapper .section {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
background-position: -45%;
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 300px;
}
#linksList {
padding: 50px;
}
#linksList .wrapper {
display: flex;
}
#linksList .wrapper .cards {
padding: 30px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
width: 120px;
margin: 30px;
background: cyan;
}
Here's script.js :
window.addEventListener("load", () => {
const loader = document.getElementById("loader");
loader.classList.add("loaded");
})
window.addEventListener("scroll", () => {
let scrollY = window.scrollY;
let posY = 450;
let topnav = document.getElementById("topnav");
if (scrollY < posY) {
topnav.classList.add("transparent");
} else {
topnav.classList.remove("transparent");
}
});
Now the problem is that #linksList doesn't seem to change even though I've written the CSS in style.css. What's wrong about it? I can't seem to find anything that could've conflicted with the CSS. I even gave the .card in #linksList a cyan background to test if it works, but to no result.
Then there's the #topnav, the JS won't add the class .transparent when the user scrolled to the #topnav in links.html until the browser's screen was resized (I'm using Chrome). I have no actual clue about what is going on here. Maybe it's just my browser acting weird or is it because I made some kind of mistake in the scripting?
(sorry for the long question)

Closing margn gap in between elements

I am currently working on a website I am in the midst of creating. However, I am having some trouble closing the gap of margin that is on the far right side of the page As seen in this picture I tried setting the body to margin 0px, but that didn't help. Any help would definitely be appreciated and detail, where I went wrong, will be insightful. Thank you!
body {
margin: 0px;
background-color: #1a1a1a;
font-weight: 100;
line-height: 1.7857;
letter-spacing: .075em max-width: 100%;
}
.nav {
border-width: 1px 0;
list-style: none;
background: linear-gradient(to top right, #0b0b0b, #494848);
overflow: hidden;
width: 100%;
height: 77px;
background-color: #000000;
margin-top: 0px margin-bottom: 0px;
margin: 0 auto;
}
.nav li {
display: inline;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: 100 line-height: 1.7857;
letter-spacing: .075em;
float: right !important;
margin: 20px;
margin-right: 4%;
line-height: 1.7857;
letter-spacing: .075em;
}
.nav a {
color: white;
text-decoration: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav img {
margin-left: 4%;
}
/*
Bootstrap Image Carousel Slider with Animate.css
Code snippet by Hashif (http://hashif.com) for Bootsnipp.com
Image credits: unsplash.com
*/
#import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
body {
font-family: 'Quicksand', sans-serif;
font-weight: 700;
}
/********************************/
/* Main CSS */
/********************************/
#first-slider .main-container {
padding: 0;
}
#first-slider .slide1 h3,
#first-slider .slide2 h3,
#first-slider .slide3 h3,
#first-slider .slide4 h3 {
color: #fff;
font-size: 30px;
text-transform: uppercase;
font-weight: 700;
}
#first-slider .slide1 h4,
#first-slider .slide2 h4,
#first-slider .slide3 h4,
#first-slider .slide4 h4 {
color: #fff;
font-size: 30px;
text-transform: uppercase;
font-weight: 700;
}
#first-slider .slide1 .text-left,
#first-slider .slide3 .text-left {
padding-left: 40px;
}
#first-slider .carousel-indicators {
bottom: 0;
}
#first-slider .carousel-control.right,
#first-slider .carousel-control.left {
background-image: none;
}
#first-slider .carousel .item {
min-height: 425px;
height: 100%;
width: 100%;
}
.carousel-inner .item .container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0px;
top: 0;
left: 0;
right: 0;
}
#first-slider h3 {
animation-delay: 1s;
}
#first-slider h4 {
animation-delay: 2s;
}
#first-slider h2 {
animation-delay: 3s;
}
#first-slider .carousel-control {
width: 6%;
text-shadow: none;
}
#first-slider h1 {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
}
#first-slider .p {
padding-top: 125px;
text-align: center;
}
#first-slider .p a {
text-decoration: underline;
}
#first-slider .carousel-indicators li {
width: 14px;
height: 14px;
background-color: rgba(255, 255, 255, .4);
border: none;
}
#first-slider .carousel-indicators .active {
width: 16px;
height: 16px;
background-color: #fff;
border: none;
}
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
.carousel-control .fa-angle-right,
.carousel-control .fa-angle-left {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .fa-angle-left {
left: 50%;
width: 38px;
height: 38px;
margin-top: -15px;
font-size: 30px;
color: #fff;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 53px;
}
.carousel-control .fa-angle-right {
right: 50%;
width: 38px;
height: 38px;
margin-top: -15px;
font-size: 30px;
color: #fff;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 53px;
}
.carousel-control {
opacity: 1;
filter: alpha(opacity=100);
}
/********************************/
/* Slides backgrounds */
/********************************/
#first-slider .slide1 {
background-image: url(https://i.imgur.com/LUIbnzG.png);
background-size: cover;
background-repeat: no-repeat;
}
#first-slider .slide2 {
background-image: url(https://i.imgur.com/agI540K.png);
background-size: cover;
background-repeat: no-repeat;
}
#first-slider .slide3 {
background-image: url(https://i.imgur.com/owkaQW7.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#first-slider .slide4 {
background-image: url(https://i.imgur.com/MpzqHnf.png);
background-size: cover;
background-repeat: no-repeat;
}
/********************************/
/* Media Queries */
/********************************/
#media screen and (min-width: 980px) {}
#media screen and (max-width: 640px) {}
.carousel-inner {
margin-top: 0px;
}
/***Site article**********/
.article-container {
margin-top: 6.0em;
background-color: red;
}
.articletitle h3 {
color: white;
font-family: 'Allerta', Helvetica, Arial, sans-serif;
font-weight: bold;
margin-left: 45px;
margin-top: 25px;
border-style: 3px solid;
border-radius: 1px;
background-color: black;
width: 640px;
padding-left: 10px;
text-shadow: 0.5px 0.5px;
}
#pg1p {
font-family: 'Allerta', Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: normal;
text-transform: none;
width: 80%;
color: white;
margin-top: 4.0em;
margin-left: 10px;
line-height: 29px;
}
#pg1img img {
margin-left: 5%;
margin-top: 50px;
position: static;
border-radius: 8px;
}
/*****HOW IT WORKS***/
#employment {
background-color: #f5f5f5;
padding-top: 70px;
padding-bottom: 70px;
}
.section-title {
margin-bottom: 50px;
font-size: 14px;
font-weight: 200;
}
.st-service {
margin-top: 30px;
}
/*********FOOTER****/
footer {
width: 100%;
background-color: red;
padding: 60px 0px;
}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Hayat Express</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
</head>
<body>
<ul class="nav">
<img src="logos/navbar-logo.png">
<li><a class="hover" href="#Contact">Contact</a></li>
<li><a class="active" href="#Careers">Careers</a></li>
<li><a class="active" href="#Services">Services</a></li>
<li><a class="active" href="#Drivers">Drivers</a></li>
</ul>
</div>
<div id="first-slider">
<div id="carousel-example-generic" class="carousel slide carousel-fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- Item 1 -->
<div class="item active slide1">
<div class="row">
<div class="container">
<div class="col-md-3 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://i.imgur.com/JeFTT4W.png">
</div>
<div class="col-md-9 text-left">
<h3 data-animation="animated bounceInDown">Partnership with Hayat Express ®</h3>
<h4 data-animation="animated bounceInUp">Deliver packages in your area</h4>
</div>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item slide2">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">
<h3> Global Critical Delivery</h3>
<h4 data-animation="animated bounceInUp">For your most challenged delivery </h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s18.postimg.org/l8cplxczd/forklift.png">
</div>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item slide3">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">Residencial E-Commerce</h3>
<h4 data-animation="animated bounceInUp">Providing Service to Consumers Worldwide</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/eq8xvxeq5/globe_network.png">
</div>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="item slide4">
<div class="row">
<div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">Global Critical Delivery</h3>
<h4 data-animation="animated bounceInUp">For your most challenged delivery </h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/9vf8xngel/internet_speed.png">
</div>
</div>
</div>
</div>
<!-- End Item 4 -->
</div>
<!-- End Wrapper for slides-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i><span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-angle-right"></i><span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="article-container">
<div class="articletitle">
<h3>CONNECTING YOU TO THE PRODUCTS YOU NEED</h3>
</div>
</div>
<div class="row">
<div class="container-fluid">
<div id="pg1img">
<div class="col-md-6">
<img src="logos/section1.png">
</div>
</div>
<div class="row">
<div class="col-md-5">
<div id="pg1p">
<p>You deserve a great delivery experience. You want your favorite products delivered to you fast, with free shipping and no hassles.
<br>
<p>We help leading and emerging internet retailers get you what you want. Whether we’re delivering your meal kits to help you quickly prepare dinner, or helping you avoid a last-minute trip to the store, our goal is to give you more time for
what’s important by delivering your favorite products to you — fast.</p>
</div>
</div>
</div>
</div>
</div>
<!--How it works-->
<section id="employment">
<div class="container">
<div class="row" align="center">
<div class="section-title">
<h1>How it works</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-7 st-service">
<br>
<p>
HyatExpress operates within the largest and fastest growing metro areas in the eastern United States. Our 60+ operational facilities and four sorting hubs are staffed by people who take pride in supporting you with consistent performance, and are excited
to be a part of the newly-emerging and sophisticated logistics economy. LaserShip parcels are brought to you by people with a passion for improving the delivery experience. Many have made a career as delivery professionals, others may deliver
as a supplemental job, and some are gig-economy millennials delivering parcels throughout their busy schedules. Together, we’re able to deliver packages to you faster than national carriers. </p>
</div>
<div class="col-md-6 col-sm-7 st-service">
<br>
<img src="https://www.lasership.com/img/section/customer.jpg">
</div>
</div>
</div>
</section>
<script>
(function($) {
//Function to animate slider captions
function doAnimations(elems) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function() {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function() {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function(e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
$('#carousel-example-generic').carousel({
interval: 3000,
pause: "false"
});
})(jQuery);
</script>
<footer>
</footer>
</body>
</html>

I just found out the solution by adding padding 0px and overflow-x hidden;
html,body {
;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}

Header is not staying in the absolute center of its container

I am a student attempting to learn how to create websites.
My header ("This Will Be The Day") appears centered, however when I change the resolution and size of the page, it doesn't stay centered relative to the content below it. Below I have the CSS and HTML content of my page.
body {
margin: 0;
padding: 0;
color: #000;
background-color: #eee;
font-size: 1em;
font-family: Helvetica, Arial, Geneva, sans-serif;
line-height: 1.3;
}
h1 {
margin: 0;
line-height: 1;
}
h2, h3, h4, h5, h6 {
width: 100%;
margin: 0 auto;
text-align: center;
}
p {
margin: 0 0 1em;
}
.container {
margin: 0;
background-color: #FFF;
}
.banner {
color: #fff;
padding: 2em;
background-color: #000;
border-bottom: 1px solid #333;
}
.nav {
float: left;
width: 20%;
margin-left: 5%;
padding-top: 2em;
padding-bottom: 2em;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 75%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
font-size: 14px;
}
.content {
float: left;
width: 50%;
padding-top: 2em;
padding-bottom: 2em;
margin: 0 0 0 10%;
}
.footer {
clear: both;
color: #fff;
background-color: #000;
padding: 2em;
text-align: right;
border-top: 1px solid #333;
}
ol {
float: left;
width: 90%;
margin: auto;
text-align: center;
}
ul {
float: left;
width: 90%;
margin: auto;
text-align: center;
padding-bottom: 1em;
}
iframe {
float: left;
align: center;
padding-left: 10%;
}
<div class="container">
<div class="banner">
<h1>RWBY Lyrics</h1>
</div>
<div class="nav">
<button class="accordion">Volume One</button>
<div class="panel">
This Will Be The Day
</div><button class="accordion">Volume Two</button>
<div class="panel">
<p>Volume Two Songs Here</p>
</div><button class="accordion">Volume Three</button>
<div class="panel">
<p>Volume Three Songs Here</p>
</div><button class="accordion">Volume Four</button>
<div class="panel">
<p>Volume Four Songs Here</p>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
<div class="content">
<h2>This Will Be The Day</h2>
<div style="margin-left: 2em">
They see you as small and helpless;
</div>
<div style="margin-left: 2em">
They see you as just a child.
</div>
<div style="margin-left: 2em">
Surprise when they find out that a warrior will soon run wild.
</div>
<div style="margin-left: 2em">
Prepare for your greatest moments;
</div>
<div style="margin-left: 2em">
Prepare for your finest hour.
</div>
<div style="margin-left: 2em">
The dream that you've always dreamed is suddenly about to flower.
</div>
<div style="margin-left: 2em">
We are lightning,
</div>
<div style="margin-left: 2em">
Straying from the thunder,
</div>
<div style="margin-left: 2em">
Miracles of ancient wonder.
</div>
<div style="margin-left: 2em">
This will be the day we've waited for.
</div>
<div style="margin-left: 2em">
This will be the day we open up the door.
</div>
<div style="margin-left: 2em">
I don't wanna hear your absolution;
</div>
<div style="margin-left: 2em">
Hope you're ready for a revolution.
</div>
<div style="margin-left: 2em">
Welcome to a world of new solutions.
</div>
<div style="margin-left: 2em">
Welcome to a world of bloody evolution.
</div>
<div style="margin-left: 2em">
In time, your heart will open minds,
</div>
<div style="margin-left: 2em">
A story will be told,
</div>
<div style="margin-left: 2em">
And victory is in a simple soul
</div>
<div style="margin-left: 2em">
Your world needs a great defender.
</div>
<div style="margin-left: 2em">
Your world's in the way of harm.
</div>
<div style="margin-left: 2em">
You want a romantic life; a fairytale that's full of charm.
</div>
<div style="margin-left: 2em">
Beware that the light is fading;
</div>
<div style="margin-left: 2em">
Beware if the dark returns.
</div>
<div style="margin-left: 2em">
This world's unforgiving; even brilliant lights will cease to burn.
</div>
<div style="margin-left: 2em">
Legends scatter.
</div>
<div style="margin-left: 2em">
Day and night will sever.
</div>
<div style="margin-left: 2em">
Hope and peace are lost forever.
</div>
<div style="margin-left: 2em">
This will be the day we've waited for...
</div>
<div style="margin-left: 2em">
We are lightning...
</div>
<div style="margin-left: 2em">
Welcome to a world of new solutions...
</div>
<div style="margin-left: 2em">
This will be the day we've waited for.
</div>
<div style="margin-left: 2em">
This will be the day we open up the door.
</div>
<div style="margin-left: 2em">
I don't wanna hear your absolution;
</div>
<div style="margin-left: 2em">
Hope you're ready for a revolution.
</div>
<div style="margin-left: 2em">
Welcome to a world of new solutions.
</div>
<div style="margin-left: 2em">
Welcome to a world of bloody evolution.
</div>
<div style="margin-left: 2em">
In time, your heart will open minds,
</div>
<div style="margin-left: 2em">
A story will be told,
</div>
<div style="margin-left: 2em">
And victory is in a simple soul
</div><iframe align="center" allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/Tb1_93M8SXA?rel=0&showinfo=0" width="560"></iframe>
</div>
<div class="footer">
I highly recommend taking a look at the RWBY Wiki located at rwby.wikia.com for more information.
</div>
</div>
Note that I'm using the h2 tag in order to put my header on the page, so it most likely lies in that CSS.

The problem is not with the header, it's because you're using ols and uls inappropriately -- they place an indentation on the elements inside them.
Change your html from
<h2>
This Will Be The Day
</h2>
<ol>They see you as small and helpless;</ol>
<ol>They see you as just a child.</ol>
<ul>Surprise when they find out that a warrior will soon run wild. </ul>
to
<h2>
This Will Be The Day
</h2>
<p class="poem">
They see you as small and helpless;<br>
They see you as just a child.<br>
Surprise when they find out that a warrior will soon run wild.<br>
</p>
and add this to your CSS
p.poem {
text-align: center;
}

The ul and ol are unnecessary, you can omit those. Put the whole lyrics in a paragraph p, then put <br> at the end of each line to break to new line.
If you want the heading (This Will Be The Day) h2 and the lyrics p go together when you resize the window, you should give them same style. For example:
h2 {
margin: 2em;
text-align: left;
padding: auto;
}
p {
margin: 2em;
text-align: left;
padding: auto;
}
Here's the result:
body {
margin: 0;
padding: 0;
color: #000;
background-color: #eee;
font-size: 1em;
font-family: Helvetica, Arial, Geneva, sans-serif;
line-height: 1.3;
}
h1 {
margin: 0;
line-height: 1;
}
h2, h3, h4, h5, h6 {
margin: 2em;
text-align: left;
padding: auto;
}
p {
margin: 2em;
text-align: left;
padding: auto;
}
.container {
margin: 0;
background-color: #FFF;
}
.banner {
color: #fff;
padding: 2em;
background-color: #000;
border-bottom: 1px solid #333;
}
.nav {
float: left;
width: 20%;
margin-left: 5%;
padding-top: 2em;
padding-bottom: 2em;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 75%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
font-size: 14px;
}
.content {
float: left;
width: 50%;
padding-top: 2em;
padding-bottom: 2em;
margin: 0 0 0 10%;
}
.footer {
clear: both;
color: #fff;
background-color: #000;
padding: 2em;
text-align: right;
border-top: 1px solid #333;
}
iframe {
float: middle;
margin: 2em;
text-align: center;
padding: auto;
}
}
<body>
<div class="container">
<div class="banner">
<h1>RWBY Lyrics</h1>
</div>
<div class="nav">
<button class="accordion">Volume One</button>
<div class="panel">
This Will Be The Day
</div><button class="accordion">Volume Two</button>
<div class="panel">
<p>Volume Two Songs Here</p>
</div><button class="accordion">Volume Three</button>
<div class="panel">
<p>Volume Three Songs Here</p>
</div><button class="accordion">Volume Four</button>
<div class="panel">
<p>Volume Four Songs Here</p>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
<div class="content">
<h2>This Will Be The Day</h2>
<p>
They see you as small and helpless; <br>
They see you as just a child.<br>
Surprise when they find out that a warrior will soon run wild.<br>
Prepare for your greatest moments;<br>
Prepare for your finest hour.<br>
The dream that you've always dreamed is suddenly about to flower.<br>
We are lightning,<br>
Straying from the thunder,<br>
Miracles of ancient wonder.<br>
This will be the day we've waited for.<br>
This will be the day we open up the door.<br>
I don't wanna hear your absolution;<br>
Hope you're ready for a revolution.<br>
Welcome to a world of new solutions.<br>
Welcome to a world of bloody evolution.<br>
In time, your heart will open minds,<br>
A story will be told,<br>
And victory is in a simple soul<br>
Your world needs a great defender<br>
Your world's in the way of harm.<br>
You want a romantic life; a fairytale that's full of charm.<br>
Beware that the light is fading;<br>
Beware if the dark returns.<br>
This world's unforgiving; even brilliant lights will cease to burn.<br>
Legends scatter.<br>
Day and night will sever.<br>
Hope and peace are lost forever.<br>
This will be the day we've waited for...<br>
We are lightning...<br>
Welcome to a world of new solutions...<br>
This will be the day we've waited for.<br>
This will be the day we open up the door.<br>
I don't wanna hear your absolution;<br>
Hope you're ready for a revolution.<br>
Welcome to a world of new solutions.<br>
Welcome to a world of bloody evolution.<br>
In time, your heart will open minds,<br>
A story will be told,<br>
And victory is in a simple soul
</p>
<iframe align="center" allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/Tb1_93M8SXA?rel=0&showinfo=0" width="560"></iframe>
</div>
<div class="footer">
I highly recommend taking a look at the RWBY Wiki located at rwby.wikia.com for more information.
</div>
</div>
</body>

Bottom-always (non-sticky) footer working with different window sizes

I'm working on a footer which always be on the bottom of the page BUT isn't sticky. It's demand It'll be responsive. At the moment it's only on the bottom in two cases: first when I set bottom property to -350px (giving bottom:0px causing my footer lands somewhere in the middle of the page) or second when I manually change it's window size (as you probably notice I'm using Bootstrap).
Because I want to set a dynamic gallery in the future (when you scroll down the
more images will be appearing) I've tried to cope with this using JQuery but ... it seems to have some bugs I can't see. What should I do ?
$(document).ready(function() {
var currentHeight = $(document).height();
/*alert(currentHeight);*/
var currentFooter = currentHeight - 50;
$('footer').css("bottom", currentFooter);
$(window).on('scroll', function() {
/*var navHeight = $(window ).height() - 67;*/
var heHeight = $('.header').height();
if ($(window).scrollTop() > heHeight) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
});
nav {
margin-bottom: -10px;
margin-top: 0px;
width: 100%;
height: 80px;
display: inline-block;
position: relative;
z-index: 3;
top: -75px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
}
.sticky {
position: fixed;
top: 0;
}
section {
background-color: rgb(242, 242, 242);
width: 100%;
height: 130px;
padding-top: 10px;
padding-bottom: 15px;
}
nav h2 {
font-weight: 700;
display: inline-block;
padding-right: 15px;
margin-left: 39px;
}
nav p {
font-weight: bold;
display: inline-block;
letter-spacing: 2px;
}
nav p .yours {
letter-spacing: 3px;
}
section ul li {
list-style: none;
display: inline-block;
font-size: 12px;
margin-right: 9px;
}
section ul li a {
color: rgb(132, 132, 132);
text-decoration: none;
}
section li a:hover {
text-decoration: none;
color: black;
}
/*#lorem{
width:640px;
height:500vh;
font-size:14px;
padding-top:50px;
margin:0 auto 0;
}
*/
.bg-grey {
margin-top: 35px;
}
#their {
display: block;
/* padding-left: 10px;
margin-left:40px;
padding-right:500px;
margin-bottom: 60px;
padding-top:5px;
padding-bottom:5px;*/
width: 342px;
height: 15px;
background: rgb(242, 242, 242);
position: relative;
left: 250px;
margin-bottom: 60px;
}
p {
display: inline-block;
padding-left: 22px;
margin-top: 60px;
padding-top: 10px;
font-weight: bold;
}
#th p {
margin-top: 30px;
}
#th p:first-of-type {
margin-top: -20px;
}
.thumbnail {
border: none;
border-radius: 0;
background: rgb(85, 102, 119);
!important
}
#own {
position: absolute;
top: -100px;
padding: 20px 102px;
margin-right: -190px;
border-radius: 5px;
font-size: 13px;
font-weight: bold;
}
#own:hover {
/*background:rgba(255, 196, 0, 0.18); */
background: rgba(244, 97, 19, 0.72);
color: black;
}
#th {
/*
display: block;
position:relative;
top:-70px;
padding-top:20px;
right:-10px;
width:500px;
height: 2000px;
*/
display: block;
position: absolute;
top: 330px;
left: 810px;
margin-bottom: 30px;
}
#th input {
margin-left: 15px;
}
footer {
background-color: rgb(175, 175, 175);
position: relative;
width: 100%;
height: 80px;
/*bottom:-350px;*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="header">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>TEAM</li>
<li>CONTACT</li>
</ul>
</section>
<nav>
<h2>TRAVEL MOOD</h2>
<p><span class="yours">what</span> is <span class="yours">your's ?</span></p>
</nav>
<div class="container-fluid all">
<div class="container-fluid">
<div class="row">
<p class="to_know">GET TO KNOW THEIR STORIES</p>
<div id="their"></div>
</div>
</div>
<div class="container-fluid bg-grey" id="portfolio">
<div class="row text-center">
<div class="col-md-2">
<div class="thumbnail">
<img src="china.jpeg" alt="china" class="img-responsive">
<p>Donald & Ronald</p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="tatry.jpeg" alt="tatry" class="img-responsive">
<p>Louis</p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="vienna.jpeg" alt="vienna" class="img-responsive">
<p>Alejandra</p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-2">
<div class="thumbnail">
<img src="croatia.jpeg" alt="croatia" class="img-responsive">
<p>Marlene & Rita</p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="almostcolorado.jpeg" alt="almostcolorado" class="img-responsive">
<p>X & Y </p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="country.jpeg" alt="county" class="img-responsive">
<p>Mr Doe & Mrs Doe</p>
</div>
</div>
</div>
<form id="th">
<div class="form-group row">
<div class="col-md-6">
<button type="submit" class="btn btn-sm active" id="own">CREATE YOUR OWN !</button>
</div>
</div>
<p>WEATHER</p><br>
<input type="radio" name="weather" value="no_matter" checked> no matter<br>
<input type="radio" name="weather" value="warmer"> warmer<br>
<input type="radio" name="weather" value="colder"> colder<br>
<input type="radio" name="weather" value="the_same"> the same<br>
<p>COMPANY</p><br>
<input type="radio" name="company" value="some_time_alone" checked> no matter<br>
<input type="radio" name="company" value="couple"> couple<br>
<input type="radio" name="company" value="with_family"> with family<br>
<input type="radio" name="company" value="girls_boys_adventure"> girls/boys adventure<br>
<p>HOW FAR</p><br>
<input type="radio" name="location" value="another city" checked> another city<br>
<input type="radio" name="location" value="another country"> another country<br>
<input type="radio" name="location" value="another continent"> another continent<br>
<p>PLACE WHERE YOU CAN</p><br>
<input type="radio" name="activity" value="active"> stay active<br>
<input type="radio" name="activity" value="leisure"> have some leisure time<br>
<input type="radio" name="activity" value="party"> part..y/cipate<br>
<input type="radio" name="activity" value="culture"> bite some culture<br>
</form>
</div>
<footer></footer>
</div>