Splide slider disappearing class

Splide slider disappearing class - javascript

I've got little issue with finding right class. I'm making slider and I want to set margin-left on the last element of class called "is-active". I'm not able to find this class in js, but in the web's console it's avabile. What's the reason and how Can I get last class of elements?
document.addEventListener('DOMContentLoaded', function () {
new Splide('.splide', {
perPage: 5,
perMove: 1,
breakpoints: {
500: {
perPage: 2,
},
640: {
perPage: 3,
},
780: {
perPage: 4,
}
}
// autoWith: true,
}).mount();
});
const list = document.querySelectorAll('.splide__slide')
list.forEach(li => {
console.log(li.classList.contains('is-visible'));
});
.splide img {
height: 20vh;
}
.splide__arrow--prev {
margin-right: 100px;
}
.splide__slide__container {
text-align: center;
}
.splide__list {
width: 100px;
}
.info {
display: grid;
grid-template-columns: 57.12vw 14.28vw 28.56vw;
grid-template-rows: 20vh;
}
.info__logo-wrapper {
background: #cecece;
justify-self: center;
width: 100%;
}
.info__logo {
height: 100%;
width: 100%;
padding: 0 2vw;
}
.description {
display: flex;
flex-direction: column;
text-transform: uppercase;
}
.description--flex {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.description__header {
font-weight: 700;
font-family: 'Lato', sans-serif;
color: grey;
font-size: 1.25rem;
}
#media (min-width: 1000px) {
.description__header {
font-size: 1.75rem;
}
}
.description__color {
font-size: 0.75rem;
}
#media (min-width: 1000px) {
.description__color {
font-size: 1.25rem;
}
}
.description__size {
font-weight: 700;
font-size: 1rem;
color: black;
}
#media (min-width: 1000px) {
.description__size {
font-size: 1.5rem;
}
}
.description--background {
background-color: #ebebeb;
}
<!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>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/css/splide.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="info">
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/0000FF ">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/FF0000">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/0000FF/808080 ">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/FF0000">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/0000FF/808080 ">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/FF0000">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/0000FF/808080 ">
</div>
</li>
</ul>
</div>
</div>
<div class="info__logo-wrapper">
</div>
<div class="description">
<div class="description--flex">
</div>
<div class="description--flex">
</div>
<div class="description--flex description--background">
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/js/splide.min.js"></script>
</body>
</html>
If I type the same what's in js to the console there're 5 true and 2 false. Why these elements aren't available in script?

Related

My hamburger menu isn't displaying correctly

Hello I'm working on a frontend mentor challenge and encountered a bug when I click my hamburger menu it seems to remove the middle bar, my intentions were to make an X appear and have the li's come easing in from the left, can anyone tell me what I did wrong? I'm teaching myself how to develop and maintain sites.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>Angel News</title>
</head>
<body>
<div id="con">
<nav class="navbar">
W.
<ul class="nav-menu">
<li class="nav-menu">
Home
</li>
<li class="nav-menu">
News
</li>
<li class="nav-menu">
Popular
</li>
<li class="nav-menu">
Trending
</li>
<li class="nav-menu">
Catergories
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
<div class="section1">
<img src="" alt="">
<h2 class="section1-h2">The Bright Future of Web 3.0?</h2>
<p class="section1-p">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people. But is it really fulfilling it's promise?</p>
Read More
</div>
<div class="section2">
<div class="section2-inside">
<h3 class="section2-h3">New</h3>
<div class="insidesection2-1">
<h4>Hydrogen VS Electric Cars</h4>
<p>Will hydrogen-fueled cars ever catch up to EV's?</p>
</div>
<div class="insidesection2-2">
<h4>The Downsides og AI Artistry</h4>
<p>What are the possible adverse effects of on-demand AI image generation?</p>
</div>
<div class="insidesection2-3">
<h4>Is VC Funding Drying Up?</h4>
<p>Private funding by VC firms is down 50% YOY. We take a look at what that means.</p>
</div>
</div>
</div>
<div class="section3">
<div class="section3-1">
<img src="" alt="">
<div class="insidesection3-1">
<h4 class="insidesection3-1-h4">01</h4>
<h5 class="insidesection3-1-h5">Reviving Retro PCs</h5>
<p>What happens when old PCs are given modern upgrades?</p>
</div>
</div>
<div class="section3-2">
<img src="" alt="">
<div class="insidesection3-2">
<h4 class="insidesection3-2-h4">02</h4>
<h5 class="insidesection3-2-h5">Top 10 Laptops of 2023</h5>
<p>Our best picks for various needs and budgets.</p>
</div>
</div>
<div class="section3-3">
<img src="" alt="">
<div class="insidesection3-3">
<h4 class="insidesection3-3-h4">03</h4>
<h5 class="insidesection3-3-h5">The Growth of Gaming</h5>
<p>How the pandemic has sparked fresh opportunities.</p>
</div>
</div>
</div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.navbar {
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
.nav-branding {
font-size: 2rem;
}
.nav-link {
transition: 0.7s ease;
}
.nav-link:hover {
color: hsl(35deg, 77%, 62%);
}
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 768px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: rotateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: rotateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
gap: 0;
flex-direction: column;
width: 100%;
background-color: black;
text-align: center;
transition: 0.3s;
}
.nav-item {
margin: 16px 0;
}
.nav-menu.active {
left: 0;
}
}
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active')
navMenu.classList.toggle('active')
})

Please try to use translateY instead of RotateY in your css #media tag as follows:
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

How to make cool scroll transition

im making my profile websites want make scroll transition like here https://olaolu.dev,how can I do that?There will be 5 pages, and transition between them should be like in link above, also it should relater to buttons as well, when I press button it should have this scroll effect too
my html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/b/cs.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<section class="section-top active">
<div class="details">
<div class="top">
<h2>Faxraddin</h2>
<div class="lists">
<button><i class="bi bi-list-check"></i></button>
</div>
</div>
<div class="first-info">
<div class="first-sec">
<h1>Frontend</br> Developer.</h1>
<h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
</div>
<img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
</div>
<div class="some-info">
<div class="a1">
<span>Highly skilled at progressive
enhancement, design systems &
UI Engineering.
</span>
<span>Over a decade of experience
building products for clients
across several countries.
</span>
</div>
<div class="btn-container">
<ul>
<button class="btn active"><i class="bi bi-app"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
</ul>
</div>
</div>
</div>
</section>
<section class="what-do" id="s2">
</section>
<script src="/b/js.js"></script>
</body>
</html>

HTML + CSS can be achieved, but the scrolling effect is slow
body {
margin: 0;
height: 100vh;
overflow-x: hidden;
}
.wrap {
scroll-behavior: smooth;
overflow-x: hidden;
height: 100%;
scroll-snap-type: y mandatory;
}
.section {
color: #fff;
font-size: 30px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
.section1 {
background-color: #111;
}
.section2 {
background-color: #333;
}
.section3 {
background-color: #555;
}
.section4 {
background-color: #777;
}
.section5 {
background-color: #999;
}
.point {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
flex-direction: column;
}
.point a {
display: block;
width: 8px;
height: 8px;
margin: 8px 0;
background-color: #fff;
}
<div class="wrap">
<section id="s1" class="section section1">page 1</section>
<section id="s2" class="section section2">page 2</section>
<section id="s3" class="section section3">page 3</section>
<section id="s4" class="section section4">page 4</section>
<section id="s5" class="section section5">page 5</section>
<div class="point">
</div>
</div>

Javascript stopped working after switching to another display [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Each time I change displays within one HTML file JS stops working (I've tried to replace HTML onclick call with JS function, but it's still the same)
UPD: Sorry for bad explanation. The problem is that if I move from the main display of this site by clicking links on nav panel (e.g. from #main to #contacts or #cart) JS script stops responding on burger icon click (clicking on burger nav panel for screen max-width of 800px doing nothing)
Code:
const burger = document.querySelector('.burger i');
const nav = document.querySelector('.nav');
function toggleNav() {
burger.classList.toggle('fa-bars');
burger.classList.toggle('fa-times');
nav.classList.toggle('nav-active');
}
burger.addEventListener('click', function() {
toggleNav();
});
html,
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: #ffffff;
color: #343434;
border-bottom: 1px solid #343434;
border-top: 1px solid #343434;
}
.logo {
letter-spacing: 3px;
}
.nav {
display: flex;
justify-content: space-around;
width: 30%;
}
.navlink {
list-style: none;
margin: 0;
}
.navlink a {
color: #343434;
text-decoration: none;
font-size: 1.2em;
}
.burger {
font-size: 1.2em;
display: none;
}
#media screen and (max-width: 800px) {
.burger {
display: block;
}
.nav {
margin: 0;
background: #ffffff;
position: absolute;
right: -100%;
top: 70px;
width: 50%;
height: calc(100% - 70px);
flex-direction: column;
justify-content: space-around;
padding: 0;
transition: all 400ms;
}
.navlink {
text-align: center;
}
.nav-active {
right: 0;
}
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="./site.css">
<script src="site.js" type="javascript"></script>
<title>Атлас</title>
</head>
<body>
<div id="main" style="display:block">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('main').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="contacts" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('contacts').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="delivery" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('about').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="cart" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('cart').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
<script src="./site.js"></script>
</header>
</div>
<div id="payment" style="display:none">
</div>
<script src="./site.js"></script>
</body>
</html>

The problem is that you have several .burger in your HTML and you only define a Javascript event for the very first one. You could remedy this via:
const burgers = document.querySelectorAll('.burger i');
and
for (let burger of burgers) {
//define your event
}
but it's not the best approach. The very best thing that you could do is to refactor your HTML and have a single item with the .burger class, but with more reliable event.

Stuck on navbar function

I am trying to create collapsed navbar I did the HTML and CSS part but when I do the javascript part it gives me an uncaught reference error. My code is below I provided the HTML CSS and Javascript. I would appreciate it if someone can please help. Thank you in advance. I provided all the code below.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <img src="logo/logo.png" alt="" />
      <div class="container" onclick="btnOpen()">
        <div class="line-1"></div>
        <div class="line-2"></div>
        <div class="line-3"></div>
      </div>
      <nav>
        <ul>
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
            >×</a
          >
          <li><a href="index.html">Home</a></li>
          <li><a href="pages/about.html">About us</a></li>
          <li><a href="pages/contact.html">How to reach me</a></li>
          <li><a href="pages/portfolio.html">Portfolio</a></li>
        </ul>
      </nav>
      <section class="sm">
        <a href="#"><i class="fab fa-facebook-f" class="facebook"></i></a>
        <a href="#"><i class="fab fa-twitter" class="twitter"></i></a>
        <a href="#"><i class="fab fa-google" class="google"></i></a>
      </section>
      <main></main>
      <section></section>
      <footer></footer>
    </header>
  </body>
  <script src="js/script.js"></script>
  <script
    src="https://kit.fontawesome.com/dd4d991431.js"
    crossorigin="anonymous"
  ></script>
</html>
* {
  box-sizing: border-box;
}
header {
  width: 100%;
  background-color: #e1e1e1;
}
header img {
  width: 100px;
  height: 100px;
}
header .container {
  display: inline-block;
  float: right;
}
.container .line-1,
.line-2,
.line-3 {
  width: 35px;
  height: 5px;
  background-color: #111;
  margin: 6px 0;
}
nav {
  display: flex;
  position: absolute;
  top: 100;
  right: 0;
  background-color: #e1e1e1;
  width: 40vw;
  height: 30vh;
}
nav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  text-decoration: none;
  color: #111;
}
nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}
nav ul li {
  margin: 10px;
}
nav ul li a {
  text-decoration: none;
  color: #111;
  font-style: bold;
  font-weight: 600;
  font-size: 15px;
  font-family: Roboto;
}
function openBtn() {
  document.getElementsByName("nav").style.width = "40vw";
  document.getElementsByName("nav").style.height = "30vh";
}
openBtn();
function closeNav() {
  document.getElementsByName("nav").style.width = "0";
  document.getElementsByName("nav").style.height = "0";
}
closeNav();

I have added Id to nav and corrected js. Please review.
function btnOpen() {
document.getElementById("nav").style.width = "40vw";
document.getElementById("nav").style.height = "30vh";
}
btnOpen();
function closeNav() {
document.getElementById("nav").style.width = "0";
document.getElementById("nav").style.height = "0";
}
closeNav();
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="btnOpen()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav id='nav'>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
</html>

A couple things need to be fixed, and you don't need any external libraries to do so. First, you have a syntax error on your first div. Your onclick attribute should point to the function openBtn(), not btnOpen().
Secondly, your reference error stemmed from your two functions, openBtn() and closeNav(). When you called document.getElementsByName('nav') you cannot edit the style properties of a NodeList, which is what was being returned. Here's what I changed.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
closeNav()
By using a for-of loop, you can edit each nav element in the HTMLCollection returned by document.getElementsByTagName('nav').
Here's a working example.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
nav {
display: flex;
position: absolute;
top: 100;
right: 0;
background-color: #e1e1e1;
width: 40vw;
height: 30vh;
}
nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
text-decoration: none;
color: #111;
}
nav ul {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: #111;
font-style: bold;
font-weight: 600;
font-size: 15px;
font-family: Roboto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="openBtn()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>

Sections appears smaller than intended

I'm having an issue with HTML sections. As shown in the screenshot the blue spot are the sections and they should include the grey space. The white space is what lays inside the section tags in HTML.
The problem was discovered when trying to add some space between each section, but everything we tried it wouldn't do anything.
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let lastId;
let cur = [];
// This should probably be throttled.
// Especially because it triggers during smooth scrolling.
// https://lodash.com/docs/4.17.10#throttle
// You could do like...
// window.addEventListener("scroll", () => {
// _.throttle(doThatStuff, 100);
// });
// Only not doing it here to keep this Pen dependency-free.
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
html {
scroll-behavior: smooth;
}
body {
margin: 0;
display: grid;
grid-template-columns: min-content 1fr;
font-family: 'Roboto';
background-color: grey;
/* this breaks position sticky in Firefox */
/* overflow-x: hidden; */
}
header {
grid-column: 1 / 3;
background: #5D5C61;
background-image: url("../Assets/Images/headerImage.jpg");
image-resolution: 1200x1400;
color: white;
padding: 4rem;
text-align: center;
font-family: 'Chivo';
font-size: 22px;
}
header a {
padding-right: 20px;
color: white;
text-decoration: underline;
}
header h1 {
color: #fb6542;
}
nav {
white-space: nowrap;
background: #37474F;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Only stick if you can fit */
#media (min-height: 300px) {
nav ul {
position: sticky;
top: 0;
}
}
nav ul li a {
display: block;
padding: 0.5rem 1rem;
color: white;
font-size: 20px;
text-decoration: none;
}
nav ul li a.current {
background: #51656E;
}
main {
padding-top: -30px;
}
section {
padding: 2rem;
margin: 0 0 10% 0;
background-color: lightblue;
display: block;
}
footer {
grid-column: 1 / 3;
background: #252E39;
padding: 5rem 1rem;
}
a {
color: black;
text-decoration: none;
}
main a {
display: inline-block;
padding-bottom: 20px;
}
a:hover {
color: #6B7B83;
text-decoration: underline;
}
a:active {
color: #6B7B83;
}
.socialIcon {
height: 20px;
width: 20px;
}
#socialMedia {
text-align: center;
}
.CALink:hover {
color: #202F36;
}
.container {
width: 70%;
height: 100%;
float: left;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-group {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: left;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
padding: 30px;
width: 100%;
height: 100%;
margin: 1%;
align-items: center;
}
.containerRight {
width: 20%;
height: 20%;
float: right;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-groupRight {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: center;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
width: 100%;
height: 100%;
align-items: center;
margin: 4% 1% 1% 1%;
}
.navTitle {
text-decoration: underline;
}
.endOfModule {
margin-bottom: 20px;
}
.sectionHolder {
width: 100%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
<link href="CSS/linkHover.css" rel="stylesheet" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="icon" href="Assets/Images/faviconTTT.png"/>
<title>Silverflame</title>
</head>
<body>
<header>
<div id="socialMedia">
<img class="socialIcon" src="Assets/Images/mark-github.svg" alt="logo" />
<img class="socialIcon" src="Assets/Images/twitterSVG.svg" alt="twitter logo"/>
</div>
<h1>SilverFlame</h1>
<h5>Jesper Christensen</h5>
<a target="headerLink" href="https://www.thesilverflame.dk/">Home</a>
<a target="headerLink" href="https://www.thesilverflame.dk/CA.html">CA</a>
<a target="headerLink" href="">About</a>
Contact
</header>
<nav>
<ul>
<li>Module 1</li>
<li>Maven</li>
<li>Network and HTTP</li>
<li>JavaScript & CA1</li>
<li>Module 2</li>
<li>ORM with JPA</li>
<li>Rest webservices with JAX-RS</li>
<li>JavaScript</li>
<li>CA2</li>
<li>Module 3</li>
<li>SYS 1</li>
<li>?</li>
<li>SYS 2</li>
<li>Module 4</li>
<li>SPA with React (TBD)</li>
<li>React routing, Security and RN</li>
<li>CA3 (TBD)</li>
<li>Module 5</li>
<li>Project - Week 1</li>
<li>Project - Week 2</li>
<li>Project - Week 3</li>
</ul>
</nav>
<main>
<section id="section-1">
<div class="container">
<div class="control-group">
<h2>Module 1 - Maven, Test & Network</h2>
</div>
</div>
</section>
<section id="section-2">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Maven</h2>
<div class="tooltip">
Simple Calculator
<span class="tooltiptext">Github link</span>
</div>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-3">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Network & HTTP</h2>
Exercises - Network stack
<br>
Exercise HTTP
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-4">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript and CA1</h2>
The JS array
<br>
JavaScript Exercice 1
<br>
Course Assignment 1
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-5">
<div class="container">
<div class="control-group">
<h2>Module 2 - Webstack</h2>
</div>
</div>
</section>
<section id="section-6">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<h2>Study Point Exercise 3 - JPA, JPQL and Testing </h2>
<h3>Part 1</h3>
Exercise - JPA Entity Mappings - 1
<br>
Exercise - Java Persistence - Querying - 3
<h3>Part 2</h3>
Studypoint part two
<h3>Part 3</h3>
Exam Preparation Exercise on relations and queries
<br>
Exam Preparation Exercise on JPQL
<br>
Object Relational Mapping and Inheritance
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-7">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Rest webservices with JAX-RS</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-8">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-9">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Course Assignment 2</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-10">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
</main>
<footer>
©2022
</footer>
<script src="Assets/JS/hoverEffect.js" type="text/javascript"></script>
<script src="Assets/JS/frontpage.js" type="text/javascript"></script>
</body>
</html>

You are applying a float to the container which takes the item out of the document flow. Consider using flexbox instead of floats for layout.
.sectionHolder {
width: 100%;
margin: auto;
display: flex;
}
.container {
flex: 1 1 70%;
height: 100%;
font-family: 'Alegreya Sans', sans-serif;
}
.containerRight {
flex: 0 0 20%;
height: 20%;
font-family: 'Alegreya Sans', sans-serif;
}

This is a well-known issue when working with floated content. The height of the section elements are not being properly calculated because the floated content is not in the normal document flow.
Add overflow:auto; to the section elements which should correct the issue by forcing the rendering engine to recalculate the height of the element and once it does that, it should recognize the child content and factor it in.
Here's more on the issue and other solutions.

Develop Reference

JavaScript is the programming language of the Web.

Splide slider disappearing class - javascript

Related

My hamburger menu isn't displaying correctly

How to make cool scroll transition

Javascript stopped working after switching to another display [closed]

Stuck on navbar function

Sections appears smaller than intended

Categories

Resources