So originally I wanted to set the header background to red for two seconds when one of the nav buttons was clicked. Now I want to change it to a random color for two seconds every time a nav button is clicked. So I created a random hex value. but when I try to set it using
header.style.background = hexColor;
It won't work?
header.style.background = 'red';
this will work, or if hexColor = 'red' will work. I can even log hexColor and see the hex value. What's the issue?
const navLinks = document.querySelectorAll('.nav-links .link');
const linksArray = Array.from(document.querySelectorAll('.links a'));
const header = document.querySelector('header');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < linksArray.length; i++) {
linksArray[i].addEventListener('click', shuffle);
}
function changeColor() {
let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F'];
let hexColor = '#';
for(let i = 0; i <= 6; i++) {
let random = Math.floor(Math.random()*hexArray.length);
hexColor += hexArray[random];
}
header.style.background = hexColor;
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function shuffle() { // Fisher-Yates shuffle algorithm
for (let i = linksArray.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i
[linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML]; // swap elements
}
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
/** {
outline: 1px solid red;
}*/
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.brand, .nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
/*background-position: center;
background-size: cover;*/
padding-top: 7%;
padding-bottom: 25%;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 26%;
background-color: rgba(0,0,0,0.6);
padding: 25px 0 25px 55px;
margin-left: 10%;
}
header p {
margin: 8px;
}
/*-----MAIN-----*/
main {
display: flex;
background-color: #fff;
}
.col {
flex-basis: 33.33%;
padding: 50px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img, .col-3 h3, .col-3 p {
position: relative;
top: -8px;
}
.col-2 img, .col-2 h3, .col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 20%;
font-size: 1.5rem;
}
a {
text-decoration: none;
margin:2px 0;
color: #fff;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
margin-top: 30PX;
color: #fff;
}
.links {
font-size: 1.2rem;
display: flex;
flex-direction: column;
}
.form-wrap {
padding-top: 30px;
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 80%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
body {
background-color: rgba(0,0,0,0.6);
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
Page One
Another Page
Sales Page
Page Three
Keep Going
Last One
Just Kidding
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<label for="Name">Address</label>
<input type="text" id="Address">
<label for="Name">City</label>
<input type="text" id="City">
<button type="submit">Submit Form</button>
</form>
<div class="dialog-wrap">
<dialog close>
<div class="name-field">Name:<span class="name">Seth</span></div>
<div class="name-field">Address:<span class="address">1013 N Arvada</span></div>
<div class="name-field">City:<span class="city">Mesa</span></div>
</dialog>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
Inside your change color function you have a for loop that stops after 7 values are appended.
Change for loop to i < 6 or i <= 5.
const navLinks = document.querySelectorAll('.nav-links .link');
const linksArray = Array.from(document.querySelectorAll('.links a'));
const header = document.querySelector('header');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < linksArray.length; i++) {
linksArray[i].addEventListener('click', shuffle);
}
function changeColor() {
let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F'];
let hexColor = '#';
for(let i = 0; i <= 5; i++) {
let random = Math.floor(Math.random()*hexArray.length);
hexColor += hexArray[random];
}
header.style.background = hexColor;
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function shuffle() { // Fisher-Yates shuffle algorithm
for (let i = linksArray.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i
[linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML]; // swap elements
}
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
/** {
outline: 1px solid red;
}*/
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.brand, .nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
/*background-position: center;
background-size: cover;*/
padding-top: 7%;
padding-bottom: 25%;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 26%;
background-color: rgba(0,0,0,0.6);
padding: 25px 0 25px 55px;
margin-left: 10%;
}
header p {
margin: 8px;
}
/*-----MAIN-----*/
main {
display: flex;
background-color: #fff;
}
.col {
flex-basis: 33.33%;
padding: 50px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img, .col-3 h3, .col-3 p {
position: relative;
top: -8px;
}
.col-2 img, .col-2 h3, .col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 20%;
font-size: 1.5rem;
}
a {
text-decoration: none;
margin:2px 0;
color: #fff;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
margin-top: 30PX;
color: #fff;
}
.links {
font-size: 1.2rem;
display: flex;
flex-direction: column;
}
.form-wrap {
padding-top: 30px;
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 80%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
body {
background-color: rgba(0,0,0,0.6);
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
Page One
Another Page
Sales Page
Page Three
Keep Going
Last One
Just Kidding
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<label for="Name">Address</label>
<input type="text" id="Address">
<label for="Name">City</label>
<input type="text" id="City">
<button type="submit">Submit Form</button>
</form>
<div class="dialog-wrap">
<dialog close>
<div class="name-field">Name:<span class="name">Seth</span></div>
<div class="name-field">Address:<span class="address">1013 N Arvada</span></div>
<div class="name-field">City:<span class="city">Mesa</span></div>
</dialog>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
Related
I have a problem when I hover my article with class="card" name inside my div class="container", it looks like the article overlaps the nav. How do I fix this without removing my transform scale in .card:hover? I want to make it without overlapping with the nav when I hover over it.
window.onscroll = function() {
myFunction()
};
var navbar = document.querySelector(".myNav");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#400;500;700&display=swap');
* {
text-decoration: none;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-image: url('/Website/Images/SPY_X_FAMILY.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
min-height: 200vh;
margin: 0;
padding: 0;
}
.header-container {
margin: 0;
opacity: 0.885;
}
.container {
padding: 10px;
background-color: #FFA1C9;
float: left;
width: 75%;
display: flex;
flex-direction: column;
}
nav {
background-color: #F94892;
margin: 0 50px 50px 50px;
border-radius: 5px;
transition: 0.3s;
}
nav:hover {
transform: scale(1.005);
transition: 0.3s;
}
nav li {
color: rgb(227, 118, 118);
text-align: center;
padding: 10px;
}
nav ul {
margin-top: 0;
}
nav a {
color: white;
font-family: 'Quicksand';
font-size: 20px;
}
.myHeader {
text-align: center;
background-color: #FFC4C4;
margin: 20px 20px 0 20px;
border-radius: 10px;
padding: 12px;
}
header h1>img {
width: 42%;
}
nav li {
margin: 0;
}
nav a {
color: #fff;
font-size: 20px;
font-weight: 700;
position: relative;
z-index: 0;
font-family: 'Quicksand';
}
nav a::before {
content: "";
position: absolute;
width: 0;
height: 15px;
background: rgb(182, 1, 32);
bottom: 0;
left: 0;
z-index: -1;
transition: 0.2s linear;
}
nav a:hover::before {
width: 100%;
}
.card {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
}
.card:hover {
transform: scale(1.0025);
transition: 0.2s;
position: relative;
}
.content-container>h2 {
margin: 10px;
}
/* text font-size */
h2 {
font-size: 2.25em;
color: rgb(212, 27, 58);
font-family: sans-serif;
font-weight: 700;
margin: 20px;
}
p {
font-size: 1.25em;
color: F94892;
}
h3 {
font-size: 1.25em;
color: rgb(212, 27, 58);
}
h1 {
margin: 0;
}
/* image */
.image-style {
text-align: center;
width: 100%;
max-height: 300%;
object-fit: cover;
object-position: center;
}
/* sticky navbar */
.sticky {
position: fixed;
top: 0;
width: 100%;
margin: 0;
transition: 0.3s;
transform: scale(1.0025);
}
.sticky li {
display: inline-block;
padding-left: 50px;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky+nav {
padding-top: 60px;
}
/* profile things */
.card-v2 {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
}
.card-v2:hover {
transform: scale(1.0025);
transition: 0.2s;
box-shadow: 0 5px 10px 5px #F94892;
}
.profile {
background-color: #FFA1C9;
padding: 5px;
margin: 0;
float: right;
width: 25%
}
.profile img {
width: 200px;
}
.profile header {
text-align: center;
}
.profile-head {
display: inline;
}
#aside {
background-color: #FFA1C9;
margin: 0;
}
.card-v3 {
background-color: #FFC4C4;
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
}
.card-v3:hover {
box-shadow: 0 4px 8px 8px #efd6d6;
}
/* table */
.table-style {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My Problem</title>
</head>
<body>
<header class="header-container header-scroll">
<div class="myHeader">
<h1>
<img src="/Website/Images/Spy_×_Family_logo.png" alt="header">
</h1>
</div>
<nav class="myNav">
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about'>About<a/></li>
<li><a href='#other'>Other</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<article id="home" class="content-container-column card ">
<h2>Header 2</h2>
<img src="/Website/Images/3774625814.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum architecto culpa ab enim tempora atque corporis nam rem, exercitationem quasi cumque et quam quisquam odio, labore fugit molestias, quo quod?</p>
<p>Lorem</p>
<h3>Header 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto inventore nisi provident quasi reiciendis odit reprehenderit ut non, voluptatum perspiciatis blanditiis illo a! Rem, recusandae ab commodi provident ex praesentium.</p>
</article>
<article id="about" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/357396304.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi expedita soluta nihil, praesentium perferendis cum rerum similique ab? Natus saepe molestias reiciendis voluptas voluptatibus consectetur adipisci praesentium asperiores deleniti
odio.</p>
</article>
<article id="other" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/spy-x-family-yor-forger.gif" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores tempora doloribus dicta quibusdam, corrupti quam maiores laboriosam quo voluptatum autem ea ad quaerat id suscipit magnam unde cupiditate, voluptates harum.</p>
</article>
</div>
<aside id="aside" class="profile">
<article class="card-v2">
<header class="profile-head">
<h2>About Me</h2>
<figure class="card-v3">
<img src="/Website/Images/Dwiki_Yulian.jpg" alt="">
</figure>
</header>
<section>
<table class="table-style">
<tr>
<th>Name:</th>
<td></td>
</tr>
<tr>
<th>Tempat, tanggal lahir:</th>
<td></td>
</tr>
<tr>
<th>Alamat:</th>
<td></td>
</tr>
<tr>
<th>Agama:</th>
<td></td>
</tr>
<tr>
</tr>
</table>
</section>
</article>
</aside>
</main>
<script src="muscle.js"></script>
</body>
</html>
If anything is missing from the snippet, you can check my jsfiddle here
What you're experiencing is something referred to as The Stacking Context which, if you think about it from a top-down perspective, is how elements are rendered in the browser. To solve this, you can set the parent element -- in this case the header-container -- to position: relative; and give it a z-index of 1 to override the default of 0. That will elevate it above the card which is using the default of 0 even when hovered.
Here's another good explanation for it as well: https://www.joshwcomeau.com/css/stacking-contexts/
window.onscroll = function() {
myFunction()
};
var navbar = document.querySelector(".myNav");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#400;500;700&display=swap');
* {
text-decoration: none;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-image: url('/Website/Images/SPY_X_FAMILY.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
min-height: 200vh;
margin: 0;
padding: 0;
}
.header-container {
margin: 0;
opacity: 0.885;
position: relative;
z-index: 1;
}
.container {
padding: 10px;
background-color: #FFA1C9;
float: left;
width: 75%;
display: flex;
flex-direction: column;
}
nav {
background-color: #F94892;
margin: 0 50px 50px 50px;
border-radius: 5px;
transition: 0.3s;
z-index: 2;
}
nav:hover {
transform: scale(1.005);
transition: 0.3s;
}
nav li {
color: rgb(227, 118, 118);
text-align: center;
padding: 10px;
}
nav ul {
margin-top: 0;
}
nav a {
color: white;
font-family: 'Quicksand';
font-size: 20px;
}
.myHeader {
text-align: center;
background-color: #FFC4C4;
margin: 20px 20px 0 20px;
border-radius: 10px;
padding: 12px;
}
header h1>img {
width: 42%;
}
nav li {
margin: 0;
}
nav a {
color: #fff;
font-size: 20px;
font-weight: 700;
position: relative;
z-index: 0;
font-family: 'Quicksand';
}
nav a::before {
content: "";
position: absolute;
width: 0;
height: 15px;
background: rgb(182, 1, 32);
bottom: 0;
left: 0;
z-index: -1;
transition: 0.2s linear;
}
nav a:hover::before {
width: 100%;
}
.card {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
transition: 0.2s;
}
.card:hover {
transform: scale(1.0025);
transition: 0.2s;
}
.content-container>h2 {
margin: 10px;
}
/* text font-size */
h2 {
font-size: 2.25em;
color: rgb(212, 27, 58);
font-family: sans-serif;
font-weight: 700;
margin: 20px;
}
p {
font-size: 1.25em;
color: F94892;
}
h3 {
font-size: 1.25em;
color: rgb(212, 27, 58);
}
h1 {
margin: 0;
}
/* image */
.image-style {
text-align: center;
width: 100%;
max-height: 300%;
object-fit: cover;
object-position: center;
}
/* sticky navbar */
.sticky {
position: fixed;
top: 0;
width: 100%;
margin: 0;
transition: 0.3s;
transform: scale(1.0025);
z-index: 1;
}
.sticky li {
display: inline-block;
padding-left: 50px;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky+nav {
padding-top: 60px;
}
/* profile things */
.card-v2 {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
z-index: 0;
}
.card-v2:hover {
transform: scale(1.0025);
transition: 0.2s;
box-shadow: 0 5px 10px 5px #F94892;
}
.profile {
background-color: #FFA1C9;
padding: 5px;
margin: 0;
float: right;
width: 25%
}
.profile img {
width: 200px;
}
.profile header {
text-align: center;
}
.profile-head {
display: inline;
}
#aside {
background-color: #FFA1C9;
margin: 0;
}
.card-v3 {
background-color: #FFC4C4;
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
z-index: 0;
}
.card-v3:hover {
box-shadow: 0 4px 8px 8px #efd6d6;
}
/* table */
.table-style {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My Problem</title>
</head>
<body>
<header class="header-container header-scroll">
<div class="myHeader">
<h1>
<img src="/Website/Images/Spy_×_Family_logo.png" alt="header">
</h1>
</div>
<nav class="myNav">
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about'>About</a>a></li>
<li><a href='#other'>Other</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<article id="home" class="content-container-column card ">
<h2>Header 2</h2>
<img src="/Website/Images/3774625814.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum architecto culpa ab enim tempora atque corporis nam rem, exercitationem quasi cumque et quam quisquam odio, labore fugit molestias, quo quod?</p>
<p>Lorem</p>
<h3>Header 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto inventore nisi provident quasi reiciendis odit reprehenderit ut non, voluptatum perspiciatis blanditiis illo a! Rem, recusandae ab commodi provident ex praesentium.</p>
</article>
<article id="about" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/357396304.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi expedita soluta nihil, praesentium perferendis cum rerum similique ab? Natus saepe molestias reiciendis voluptas voluptatibus consectetur adipisci praesentium asperiores deleniti
odio.
</p>
</article>
<article id="other" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/spy-x-family-yor-forger.gif" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores tempora doloribus dicta quibusdam, corrupti quam maiores laboriosam quo voluptatum autem ea ad quaerat id suscipit magnam unde cupiditate, voluptates harum.</p>
</article>
</div>
<aside id="aside" class="profile">
<article class="card-v2">
<header class="profile-head">
<h2>About Me</h2>
<figure class="card-v3">
<img src="/Website/Images/Dwiki_Yulian.jpg" alt="">
</figure>
</header>
<section>
<table class="table-style">
<tr>
<th>Name:</th>
<td></td>
</tr>
<tr>
<th>Tempat, tanggal lahir:</th>
<td></td>
</tr>
<tr>
<th>Alamat:</th>
<td></td>
</tr>
<tr>
<th>Agama:</th>
<td></td>
</tr>
<tr>
</tr>
</table>
</section>
</article>
</aside>
</main>
<script src="muscle.js"></script>
</body>
</html>
try to set the z-index of the nav to 100
nav {
z-index: 100;
}
So I'm trying to create a sliding function for a section in my html. But I noticed that the JavaScript isn't acknowledged by the html/browser. I'm using Eclipse editor. I have done everything I can... Please take a look. I won't say that the code is the problem, cuz everything looks good. Or is it where I stored the JavaScript file? Could the problem be from the directory?
Bad code or not, if I update a work, it should show on the launch, but like I said, it doesn't even acknowledge the presence of a JavaScript file. (Some elements has been removed from the html codes. The customer testimonial are four cards)
const leftArrow = document.getElementsByClassName("leftArrow");
const rightArrow = document.getElementsByClassName("rightArrow");
const slider = document.getElementsByClassName("slider");
let a = 0;
rightArrow.style.visibility = "hidden";
leftArrow.onclick = function() {
a = a - 550;
slider.style.left = a + "px";
//right arrow
if (a = 0) {
rightArrow.style.visibility = "hidden";
} else {
rightArrow.style.visibility = "visible";
}
// left arrow
if (a = -1650) {
leftArrowt.style.visibility = "hidden";
} else {
leftArrow.style.visibility = "visible";
}
};
rightArrow.onclick = function() {
a = a + 550;
slider.style.left = a + "px";
//right arrow
if (a = 0) {
rightArrow.style.visibility = "hidden";
} else {
rightArrow.style.visibility = "visible";
}
// left arrow
if (a = -1650) {
leftArrowt.style.visibility = "hidden";
} else {
leftArrow.style.visibility = "visible";
}
};
customer-testimonials {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/customer-testimonialbg.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/*.row h2{
font-size: 21px;
margin-bottom: 70px;
position: relative;
}
*/
/*
.row h2::after{
content: " ";
position: absolute;
width: 50%;
height: 5px;
background-color: #0066ac;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
border-radius: 10px;
}
*/
.container {
width: 550px;
height: 330px;
border-radius: 12px;
box-shadow: 0 5px 55px rgba(51, 51, 51, 0.336);
position: relative;
overflow: hidden;
}
.slider {
width: auto;
height: 100%;
display: flex;
position: absolute;
top: 0;
left: 0;
transition: all .5s;
}
.slideBar {
width: 100%;
height: 60px;
position: absolute;
background-color: #f09f07;
bottom: 0;
left: 0;
padding: 0 60px;
display: flex;
align-items: center;
justify-content: space-between;
}
.slideBar span {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
display: grid;
place-items: center;
color: green;
cursor: pointer;
}
.card {
width: 550px;
height: 290px;
padding: 40px 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.card::after {
content: " ";
position: absolute;
width: 110px;
height: 110px;
background-color: green;
top: 0;
right: 0;
border-bottom-left-radius: 100%;
}
.profile {
display: flex;
align-items: center;
}
.profile img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 25px;
}
.name_job h2 {
color: #0066ac;
margin-bottom: 4px;
}
.card p {
font-size: 15px;
line-height: 22px;
opacity: .9;
}
<html>
<body>
<section class="customer-testimonials">
<div class="row">
<h2>Customer Testimonials</h2>
</div>
<div class="container">
<div class="slider">
<div class="card">
<div class="profile">
<img src="resources/img/danny-blinks.jpg" alt="dannyblinks">
<div class="name_job">
<h3>Danny Blinks</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p>
</div>
<div class="card">
<div class="profile">
<img src="resources/img/jenny%20lawrence.jpg" alt="jennylawrence">
<div class="name_job">
<h3>Jenny Lawrence</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p>
</div>
</div>
<div class="slideBar">
<span class="leftArrow"><i class="ion-ios-arrow-thin-left"></i></span>
<span class="rightArrow"><i class="ion-ios-arrow-thin-right"></i></span>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="resources/js/main.js"></script>
</body>
</html>
There is a couple of error and typos in your logic, let's fix them:
document.getElementsByClassName() returns a collection of elements with specified class, you're trying to access style property without indicating what item in the resulted collection you need to modify.
For this to work, access the element in the resulted array by indicating the index document.getElementsByClassName("leftArrow")[0];, or simply get the element by its id.
There is a typo trying to use leftArrow, you typed leftArrowt, fix that.
You are assigning values instead of comparing in your conditionals. if(a = 0) is assignment and your in block is expecting a condition. Use == or === depending your needs for this specific case. See this documentation
const leftArrow = document.getElementsByClassName("leftArrow")[0];
const rightArrow = document.getElementsByClassName("rightArrow")[0];
const slider = document.getElementsByClassName("slider")[0];
let a = 0;
rightArrow.style.visibility = "hidden";
leftArrow.onclick = function() {
a = a - 550;
slider.style.left = a + "px";
//right arrow
if (a == 0) {
rightArrow.style.visibility = "hidden";
} else {
rightArrow.style.visibility = "visible";
}
// left arrow
if (a == -1650) {
leftArrow.style.visibility = "hidden";
} else {
leftArrow.style.visibility = "visible";
}
};
rightArrow.onclick = function() {
a = a + 550;
slider.style.left = a + "px";
//right arrow
if (a == 0) {
rightArrow.style.visibility = "hidden";
} else {
rightArrow.style.visibility = "visible";
}
// left arrow
if (a == -1650) {
leftArrow.style.visibility = "hidden";
} else {
leftArrow.style.visibility = "visible";
}
};
.slider{
width: auto;
height: 100%;
display: flex;
position: absolute;
top: 0;
left: 0;
transition: all .5s;
}
.slideBar {
width: 100%;
height: 60px;
position: absolute;
background-color: #f09f07;
bottom: 0;
left: 0;
padding: 0 60px;
display: flex;
align-items: center;
justify-content: space-between;
}
.slideBar span{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
display: grid;
place-items: center;
color: green;
cursor: pointer;
}
.card {
width: 550px;
height: 290px;
padding: 40px 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.card::after{
content: " ";
position: absolute;
width: 110px;
height: 110px;
background-color: green;
top: 0;
right: 0;
border-bottom-left-radius: 100%;
}
.profile {
display: flex;
align-items: center;
}
.profile img{
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 25px;
}
.name_job h2{
color: #0066ac;
margin-bottom: 4px;
}
.card p{
font-size: 15px;
line-height: 22px;
opacity: .9;
}
customer-testimonials {
background-image:linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/customer-testimonialbg.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container{
width: 550px;
height: 330px;
border-radius: 12px;
box-shadow: 0 5px 55px rgba(51, 51, 51, 0.336);
position: relative;
overflow: hidden;
}
<section class="customer-testimonials">
<div class="row">
<h2>Customer Testimonials</h2>
</div>
<div class="container">
<div class="slider">
<div class="card">
<div class="profile">
<img src="resources/img/danny-blinks.jpg" alt="dannyblinks">
<div class="name_job">
<h3>Danny Blinks</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p>
</div>
<div class="card">
<div class="profile">
<img src="resources/img/jenny%20lawrence.jpg" alt="jennylawrence">
<div class="name_job">
<h3>Jenny Lawrence</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p>
</div>
</div>
<div class="slideBar">
<span class="leftArrow"><i class="ion-ios-arrow-thin-left"></i></span>
<span class="rightArrow"><i class="ion-ios-arrow-thin-right"></i></span>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="resources/js/main.js"></script>
Keep working, is almost done!
I have a task to make a blog thumbnail and blog content from input that looks like this: blog.html
This is the thumbnails which is located in the same HTML file as the input form: blog.html
This is the blog content and what I'm trying to achieve which is located in the different HTML file: blog-detail.html
I have 2 js files, blog.js for blog.html and blog-detail.js for blog-detail.html. All of the blog value is saved in let blogs = [] in blog.js
This is the snippet from the blog input and thumbnails:
let blogs = []
let month = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
]
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage").files[0]
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
inputImage = URL.createObjectURL(inputImage)
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
renderCard()
}
function renderCard() {
let containerBlog = document.getElementById("contents")
containerBlog.innerHTML = '';
for (let i = 0; i < blogs.length; i++) {
containerBlog.innerHTML += `
<div id="contents" class="mp-card">
<!--MPC = My Project Card-->
<div class="mpc-img">
<img src="${blogs[i].image}" alt="">
</div>
<div class="mpc-title">
<a href="blog-detail.html">
<p>${blogs[i].title}</p>
</a>
</div>
<div class="mpc-duration">
<small>Durasi: 1 Bulan</small>
</div>
<div class="mpc-content">
${blogs[i].content}
</div>
<div class="mpc-icons">
${(blogs[i].icons.html === true) ? '<i class="fa-brands fa-html5"></i>' : ''}
${(blogs[i].icons.css === true) ? '<i class="fa-brands fa-css3-alt"></i>' : ''}
${(blogs[i].icons.nodeJs === true) ? '<i class="fa-brands fa-node-js"></i>' : ''}
${(blogs[i].icons.reactJs === true) ? '<i class="fa-brands fa-react"></i>' : ''}
</div>
<div class="mpc-mod">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
`
}
}
/* My Project */
/* FORM */
.mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
/* x FORM */
/* CARDS */
.mp-container {
width: 100%;
background-color: #f8f8f8;
padding-bottom: 70px;
}
.mp-card-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 20px 140px;
padding: 0px 70px 0px 70px;
}
.mp-title {
width: 100%;
display: flex;
font-size: 30px;
font-weight: bold;
justify-content: center;
padding: 40px 0px;
}
.mp-card {
width: 320px;
height: 440px;
max-width: 280px;
max-height: 440px;
padding: 10px 15px 10px 15px;
border: none;
border-radius: 10px;
background-color: white;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.mpc-img img {
border-radius: 10px;
width: 100%;
height: 200px;
object-fit: cover;
}
.mpc-title {
overflow: hidden;
margin-top: 10px;
font-weight: 900;
}
.mpc-title a {
text-decoration: none;
color: black;
}
.mpc-title a:hover {
text-decoration: underline
}
.mpc-content {
height: 60px;
overflow: hidden;
margin: 20px 0px 20px 0px;
text-align: justify;
word-wrap: break-word;
text-align: justify;
}
.mpc-icons {
display: flex;
font-size: 32px;
gap: 15px;
}
.mpc-mod {
display: flex;
gap: 10px;
text-align: center;
margin-top: 20px;
}
.mpc-mod button {
padding: 5px 10px;
border: 0;
border-radius: 4px;
background: var(--btn);
color: #fff;
cursor: pointer;
width: 50%;
}
.mpc-mod button:hover {
background-color: var(--btn-hover)
}
/* x CARDS x */
/* x My Project x */
<!--MPI = My Project Input-->
<div class="mpi-title">
<p>ADD BLOG</p>
</div>
<!--Form-->
<div class="mpi-form-container">
<div class="mpi-form">
<!--MP = My Project Input-->
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkReact" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="inputImage">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
</div>
</div>
<!--xFormx-->
<div class="mp-container">
<div class="mp-title">
<p>MY PROJECT</p>
</div>
<div id="contents" class="mp-card-container">
<div class="mp-card">
<!--MPC = My Project Card-->
<div class="mpc-img">
<img src="assets/phone1.jpg" alt="">
</div>
<div class="mpc-title">
<a href="blog-detail.html">
<p>Dumbways Mobile App - 2022</p>
</a>
</div>
<div class="mpc-duration">
<small>Duration: 2 Month</small>
</div>
<div class="mpc-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque temporibus excepturi deserunt consequuntur molestias adipisci corporis neque error. Delectus, dolorum dolorem neque vel earum ipsam ut fugiat quos distinctio blanditiis.
</div>
<div class="mpc-icons">
<i class="fa-brands fa-html5"></i>
<i class="fa-brands fa-css3-alt"></i>
<i class="fa-brands fa-node-js"></i>
<i class="fa-brands fa-react"></i>
</div>
<div class="mpc-mod">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
</div>
</div>
This is the snippet from the blog detail:
document.getElementById("blog-detail").innerHTML = `
<div class="bd-title">
<p>${blogs[i].title}</p>
</div>
<div class="bd-idc">
<div class="idc-left">
<img src="${blogs[i].image}" alt="Blog Image">
</div>
<div class="idc-right">
<p>Duration</p>
<div class="bd-duration">
<div style="padding-left: 2px;">
<i class="fa-solid fa-calendar-days"></i>
<p>1 Jan 2021 - 1 Feb 2021</p>
</div>
<div>
<i class="fa-solid fa-clock"></i>
<p>1 Month</p>
</div>
</div>
<div class="bd-tech">
<p>Technologies</p>
<div class="i-tech">
<!--TI = Tech Icon-->
<div class="ti-left">
<div>
${(blogs[i].icons.html === true) ? '<i class="fa-brands fa-html5"></i>' : ''}
<p>HTML</p>
</div>
<div>
${(blogs[i].icons.nodeJs === true) ? '<i class="fa-brands fa-node-js"></i>' : ''}
<p>nodeJs </p>
</div>
</div>
<div class="ti-right">
<div>
${(blogs[i].icons.css === true) ? '<i class="fa-brands fa-css3-alt"></i>' : ''}
<p>CSS</p>
</div>
<div>
${(blogs[i].icons.reactJs === true) ? '<i class="fa-brands fa-react"></i>' : ''}
<p>ReactJs</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bd-content">
<p>
${blogs[i].content}
</p>
</div>
`;
/* Blog Detail */
.bd-title {
margin: 50px 0px;
text-align: center;
font-size: 40px;
font-weight: bold;
}
.bd-idc {
width: 100%;
display: flex;
padding: 0px 50px;
gap: 20px;
}
.idc-left {
flex: 55%;
overflow: hidden;
object-fit: cover;
padding: 0px 20px
}
.idc-left img {
width: 100%;
height: 400px;
object-fit: cover;
}
.idc-right {
flex: 45%
}
.idc-right p {
font-size: 30px;
font-weight: bold;
}
.bd-duration {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.bd-duration p {
font-size: 30px;
font-weight: bold;
}
.bd-duration div {
display: flex;
align-items: center;
gap: 10px;
}
.bd-duration div p {
font-size: 20px;
}
.bd-duration div i {
font-size: 30px;
}
.bd-tech {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.bd-tech p {
font-size: 30px;
font-weight: bold;
}
.i-tech {
display: flex;
gap: 0px 60px;
}
.ti-left div {
display: flex;
gap: 0px 20px;
margin-bottom: 20px;
}
.ti-right div {
display: flex;
gap: 0px 20px;
margin-bottom: 20px;
}
.bd-tech div p {
font-size: 20px;
}
.bd-tech div i {
font-size: 30px;
}
.bd-content {
margin-top: 50px;
padding: 0px 68px;
}
.bd-content p {
font-size: 20px;
text-align: justify;
}
/* x Blog Detail x */
<!--Blog Detail-->
<div id="blog-detail">
<!--BD = Blog Detail-->
<div class="bd-title">
<p>Blog Title</p>
</div>
<!--IDC = Image, Duration, Categories-->
<div class="bd-idc">
<div class="idc-left">
<img src="assets/phone5.jpg" alt="Blog Image">
</div>
<div class="idc-right">
<p>Duration</p>
<div class="bd-duration">
<div style="padding-left: 2px;">
<i class="fa-solid fa-calendar-days"></i>
<p>1 Jan 2022 - 1 Aug 2022</p>
</div>
<div>
<i class="fa-solid fa-clock"></i>
<p>8 Month</p>
</div>
</div>
<div class="bd-tech">
<p>Technologies</p>
<div class="i-tech">
<!--TI = Tech Icon-->
<div class="ti-left">
<div>
<i class="fa-brands fa-html5"></i>
<p>HTML</p>
</div>
<div>
<i class="fa-brands fa-node-js"></i>
<p>nodeJs </p>
</div>
</div>
<div class="ti-right">
<div>
<i class="fa-brands fa-css3-alt"></i>
<p>CSS</p>
</div>
<div>
<i class="fa-brands fa-react"></i>
<p>ReactJs</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bd-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente,
minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque
a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse.
</p>
</div>
</div>
<!--xBlog Detailx-->
What I'm trying to achieve is when I click the thumbnail title and when directed I want the blog-content.html to show the value that I input from blog.html using innerHTML
I've tried to use module.exports, script type="module" and importing both js files in blog-detail.html but nothing work :(
and I've tried to browse for more solutions but my English isn't very good for browsing, I don't know the keyword to search for more solutions.
Sorry for the long question, Thanks.
you can use local Storage. You can pass you blogs array to from you blogs.js file to local Storage by using localStorage.setItem(); function and now you can retrive value from your another js file (blog-detail.js) by using localStorage.getItem().
If you want to learn more about how to use them Go Here
I hope this solves your problem.
I have a problem. I made the following tabbedPage, but the hidden content still takes up space. Here is the code:
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}
/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active {
opacity: 1;
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
/*------------------------------------------*/
<div class="container">
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="active">
statistics
</div>
<div>
user management
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div class="active">
<h2>This is statistics section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
</div>
<div>
<h2>This is the user management section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>
Now the TabbedPage is working the way I want, except that the content of a tab always uses space while not being showed. I can fix it by setting position: absolute;, but then the content goes trough the footer, which is also not allowed. So how can I remove the space that a hidden tab uses, while not going trough the footer?
You should use display instead of opacity.
But you should also set div to display: block; in div.active as below:
.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
display: block; /* show it */
}
Pay attention that if you want to set div into div.active with a different displaythan you need to add !important to make sure that it will be taken correctly.
You also need to change some js in your for loop as below:
/** IF to point to the right div **/
if(tabsPane[i].className.match(/\bstat\b/)){
document.getElementById("stat").classList.add('active');
document.getElementById("userManagement").classList.remove('active');
}else if(tabsPane[i].className.match(/\buserManagement\b/)){
document.getElementById("userManagement").classList.add('active');
document.getElementById("stat").classList.remove('active');
}
And to make it works I was adding classes and id such as stat and userManagement because it was not identifying correctly the div anymore.
DEMO (Simple example):
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
/*tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");*/
/** IF to point to the right div **/
if(tabsPane[i].className.match(/\bstat\b/)){
document.getElementById("stat").classList.add('active');
document.getElementById("userManagement").classList.remove('active');
}else if(tabsPane[i].className.match(/\buserManagement\b/)){
document.getElementById("userManagement").classList.add('active');
document.getElementById("stat").classList.remove('active');
}
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}
/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
display: none; /* hide it */
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
display: block; /* show it */
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
/*------------------------------------------*/
<div class="container">
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="stat active">
statistics
</div>
<div class="userManagement">
user management
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div id="stat" class="active">
<h2>This is statistics section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
<div>DIV IN DIV 2</div>
</div>
<div id="userManagement">
<h2>This is the user management section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>
DEMO (Large example):
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
/*tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");*/
/** IF to point to the right div **/
if(tabsPane[i].className.match(/\bstat\b/)){
document.getElementById("stat").classList.add('active');
document.getElementById("userManagement").classList.remove('active');
}else if(tabsPane[i].className.match(/\buserManagement\b/)){
document.getElementById("userManagement").classList.add('active');
document.getElementById("stat").classList.remove('active');
}
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}
/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
display: none; /* hide it */
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
display: block; /* show it */
}
/*--------------------------------------*/
/*-------------Statistics---------------*/
.activity-24h-title {
color: #000000;
font-size: 30px;
font-weight: bold;
}
.activity-24h {
width: 100%;
height: 125px;
background-color: #F6F6F6;
display: flex !important; /** Add !important **/
align-items: center;
justify-content: center;
}
.activity-24h .stat-frame {
position: relative;
width:calc(100% / 5 - (4 * 2px));
display: flex !important; /** Add !important **/
flex-direction: column
}
.activity-24h .stat-frame-title {
color: #000000;
font-size: 22px;
font-weight: bold;
text-align: center;
padding-bottom: 15px;
}
.activity-24h .stat-frame-value {
color: #d81e05;
font-size: 42px;
font-weight: bold;
width: 100%;
text-align: center;
}
.activity-24h .seperation-border {
width: 2px;
height: 80%;
background-color: #C4C4C4;
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="stat active">
Statistieken
</div>
<div class="userManagement">
Gebruikersbeheer
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div id="stat" class="active">
<span class="activity-24h-title">Afgelopen 24 uur</span>
<div class="activity-24h">
<div class="stat-frame">
<span class="stat-frame-title">Nieuwe gebruikers</span>
<span class="stat-frame-value">513</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Actieve gebruikers</span>
<span class="stat-frame-value">1054</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Matches</span>
<span class="stat-frame-value">1577</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Gerapporteerd</span>
<span class="stat-frame-value">33</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Geblokkeerd</span>
<span class="stat-frame-value">9</span>
</div>
</div>
</div>
<div id="userManagement">
<h2>This is about section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>
You can achieve that by using display: none and display: block instead of opacity: 0 and opacity: 1 to hide the inactive element:
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}
/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
display: none; /* hide it */
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active {
display: block; /* show it */
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
/*------------------------------------------*/
<div class="container">
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="active">
statistics
</div>
<div>
user management
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div class="active">
<h2>This is statistics section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
</div>
<div>
<h2>This is the user management section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>
You can use document.write() to edit the document so you can remove add the div when required. Example:
function runcode(){
document.write("<div> hi </div>")
}
#button{
background-color: red;
padding: 15px 32px;
}
#button:hover{
background-color: pink;
}
<button onclick="runcode()" id="button">replace with a div with hi inside</button>
I think you should be using display instead of opacity, just as #MaxiGui wrote. You can be a bit fancy too, and create a tag for it:
invisible {
display:none;
}
As a quick workaround you can modify footer style as following.
footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
}
I have created a website, where the starting navbar is towards the middle of the first section.
However, I want to create something where, as you scroll through the first section, the navbar and title move up to the top, until it reaches the top, and then acts like a normal Title and navbar at the top (fixed positioning at the end, versus absolute positioning at the beginning).
Here is my HTML and CSS Code. Do I need javascript for this?
Thanks!
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
background: url(https://images.squarespace-cdn.com/content/v1/5b47dd31a9e028b8190b6ad4/1577742949961-Y1FS4223B1A76MMFL9JP/ke17ZwdGBToddI8pDm48kHH9S2ID7_bpupQnTdrPcoF7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0nQwvinDXPV4EYh2MRzm-RRB5rUELEv7EY2n0AZOrEupxpSyqbqKSgmzcCPWV5WMiQ/marc+show.jpg) no-repeat center center/cover fixed;
}
html {
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.navbar {
position: fixed;
top: 63.5%;
left: 0px;
width: 100vw;
justify-content: flex-end;
display: flex;
}
.navbar ul {
display: flex;
flex-direction: row-reverse;
margin: 0 70px;
}
.navbar ul li a {
text-decoration: none;
color: white;
transition: color 0.5s;
}
.navbar ul li {
list-style: none;
padding: 0px 10px;
margin: 5px;
font-family: 'Roboto', sans-serif;
font-size: 17px;
}
section {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
scroll-snap-align: center;
color: white;
background: rgba(0, 0, 0, 0.1);
}
.navbar ul li a:hover {
color: rgba(200, 200, 200, 0.8);
}
.Marc {
position: absolute;
top: 62.5%;
left: 65px;
font-family: 'Roboto', sans-serif;
font-size: 40px;
color: white;
}
.Marc a {
text-decoration: none;
color: white;
}
.List {
position: absolute;
top: 63%;
left: 29%;
}
.List ul li {
list-style: none;
margin: 0 0 25px 0;
}
.List ul li a {
color: white;
font-family: 'Roboto', sans-serif;
}
<div id="container">
<nav class="navbar">
<ul>
<li>ABOUT</li>
<li>BOOKING</li>
<li>MERCH</li>
<li>TICKETS</li>
</ul>
</nav>
<div class="Marc">
MARC'S PAGE
</div>
<div class="List">
<ul>
<li>youtube</li>
<li>instagram</li>
<li>facebook</li>
<li>twitter</li>
</ul>
</div>
<section>
</section>
<section id="TICKETS">
<h1>Tickets</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium odit quae, sequi sit ex numquam.</p>
</section>
<section id="MERCH">
<h1>Merch</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium odit quae, sequi sit ex numquam.</p>
</section>
<section id="BOOKING">
<h1>Booking</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium odit quae, sequi sit ex numquam.</p>
</section>
<section id="ABOUT">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium odit quae, sequi sit ex numquam.</p>
</section>
</div>
Use position sticky
body {
height: 300vh;
border: 4px dashed #000;
}
.spacer {
height: calc(50vh - 1em);
}
nav {
position: sticky;
top: 0;
}
<div class="spacer"></div>
<nav>NAVIGATION</nav>
Example with your code - a bit simplified
* {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
body {
background: url(https://images.squarespace-cdn.com/content/v1/5b47dd31a9e028b8190b6ad4/1577742949961-Y1FS4223B1A76MMFL9JP/ke17ZwdGBToddI8pDm48kHH9S2ID7_bpupQnTdrPcoF7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0nQwvinDXPV4EYh2MRzm-RRB5rUELEv7EY2n0AZOrEupxpSyqbqKSgmzcCPWV5WMiQ/marc+show.jpg) no-repeat center center/cover fixed;
font: 14px/1.4 'Roboto', sans-serif;
color: white;
}
ul {
list-style: none;
}
a {
color: white;
transition: 0.24s;
text-decoration: none;
}
a:hover {
opacity: 0.7;
}
section {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
justify-content: center;
scroll-snap-align: center;
color: white;
background: rgba(0, 0, 0, 0.1);
}
section#MENU {
position: sticky;
top: 0;
z-index: 10;
flex-flow: row nowrap;
height: 60px;
}
section.MENU--pre {
height: calc(65vh - 30px); /* 100vh - 60px, so use -30px */
}
section.MENU--post {
height: calc(35vh - 30px); /* 100vh - 60px, so use -30px */
}
.Marc {
font-size: 30px;
padding: 0 30px;
}
.Navbar {
padding: 0 30px;
}
.Navbar ul {
display: flex;
}
.Navbar ul li a {
display: block;
font-size: 17px;
padding: 0px 10px;
}
<section id="HOME" class="MENU--pre"></section>
<section id="MENU">
<div class="Marc">
MARC
</div>
<nav class="Navbar">
<ul>
<li>ABOUT</li>
<li>BOOKING</li>
<li>MERCH</li>
<li>TICKETS</li>
</ul>
</nav>
</section>
<section class="MENU--post"></section>
<section id="ABOUT">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium odit quae, sequi sit ex numquam.</p>
</section>
<section id="BOOKING">
<h1>Booking</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium odit quae, sequi sit ex numquam.</p>
</section>
<section id="MERCH">
<h1>Merch</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium odit quae, sequi sit ex numquam.</p>
</section>
<section id="TICKETS">
<h1>Tickets</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium odit quae, sequi sit ex numquam.</p>
</section>