Vanilla JS left to right toggle animation - javascript

I am a newbie to code and I am learning vanilla JS. I created this drawer navigation with a circle that moves from left tor right, but there is an issue. I uploaded the current state here: http://setup.industries/masquarade/
The issue that gets me stuck:
The first click on the hamburger nav icon doesn't open the drawer and the animation is switched. I suspect the problem to be in the if(open) as the open var doesn't truly capture the toggle state with open = header.style.width == '0%' After the initial bug, it works fine. A real head scratcher for me.
If you have other tips for better code, or point out my bad practices, I'd be happy to learn.
--
Edit 1: I have added the full code to this question. I am not sure how I can make the ellipse visible, i linked directly to hosted url.
// open sidenav //
function openNav() {
let header = document.getElementById("header");
let open = header.style.width == '0%'
let width = document.body.clientWidth;
var ellipse = document.getElementById("ellipse");
function moveEllipseRight() {
ellipse.animate([
// keyframes
{ transform: 'translateX(0px)' },
{ transform: 'translateX('+ width + 'px)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
function moveEllipseLeft() {
ellipse.animate([
// keyframes
{ transform: 'translateX('+ width + 'px)' },
{ transform: 'translateX(0px)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
// open sidenav //
if (open) {
header.style.width = "100%";
moveEllipseRight();
} else {
header.style.width = '0%';
moveEllipseLeft();
}
}
// if (open) {
// ellipse.classList.remove("ellipse_left");
// ellipse.classList.add("ellipse_right");
// } else {
// ellipse.classList.remove("ellipse_right");
// ellipse.classList.add("ellipse_left");
// }
// let ellipse = document.getElementById("ellipse");
// let pos = 0;
// let id = setInterval(frame, 5);
// function myMove() {
// console.log('Hello')
// var ellipse = document.getElementById("ellipse");
// var pos = -200;
// var id = setInterval(frame, 1);
// let width = document.body.clientWidth; // - $('#mydiv').width();
//
// function frame() {
// if (pos == width - 200) {
// clearInterval(id);
// } else {
// pos++;
// ellipse.style.left = pos + "px";
// }
// }
// }
// information tabs //
function openTab(evt, tab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tab).style.display = "block";
evt.currentTarget.className += " active";
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
background: black;
color: white;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.2em;
line-height: 1.4em;
}
a {
color: white;
}
.clear {
clear: both; float: none; height: 40px;
}
/* Ellipse */
#ellipse {
position: absolute;
top: 120px;
z-index:99;
animation: 3s linear 0s slide 1;
left: -200px;
}
/*
.ellipse_left {left: -200px;}
.ellipse_right {right: -200px;}
*/
/* Masquarede Logo */
img.masquarade_events {
opacity: 0.3;
position: absolute;
bottom: 20px;
right: 20px;
}
img.masquarade_events:hover {
opacity: 0.9;
}
/* Content */
.content {
margin: 150px 0 0 300px;
width: 700px;
height: 400px;
}
#media screen and (max-width: 992px) {
.content {
margin: 150px 0 0 0;
width: 700px;
height: 400px;
}
}
.date {
font-weight: bold;
margin-bottom: -10px;
}
.location {
}
ul.lineup {
list-style-position: inside;
padding: 0;
list-style-type: none;
width: 100%
overflow: hidden;
margin-bottom: 100px;
}
ul.lineup li {
margin-right: 50px;
line-height: 2.5em;
float: left;
}
/* Buttons */
a.button {
margin-right: 10px;
padding: 10px 50px 10px 50px;
text-decoration: none;
border-radius: 200px;
font-size: 0.7em;
transition: 0.3s;
}
a.white {
background: white;
color: black;
}
a.white:hover {
color: white;
background: #D90E46;
}
a.black {
border: 2px white solid;
color: white;
}
a.black:hover {
border: 2px #FCF454 solid;
color: #FCF454;
}
/* Header */
header {
position: absolute;
background-color: black;
top:0;
left:0;
width: 0;
height: 100%;
z-index: 1;
}
/* Navigation */
header nav {
position: absolute;
top: 100px;
right:300px;
}
nav ul {
list-style-position: inside;
width: 400px;
padding: 0;
list-style-type: none;
font-size: 1em;
}
nav ul li{
border-bottom: 1px solid white;
padding: 10px 0 10px 0;
}
nav ul li:hover{
font-weight: bold;
padding: 10px 0 10px 10px;
}
li.active {
font-weight: bold;
}
nav ul li:first-child{
/* border-top: 1px solid white;*/
}
nav ul li a{
text-decoration: none;
}
nav ul h2{
margin-bottom: 10px;
}
.tabcontent {
display: none;
}
/* Header Icon */
img.icon {
position: absolute;
z-index: 999;
top:60px;
right:70px;
}
/* Display */
.display {
width: 400px;
height: 400px;
position: absolute;
top: 100px;
right:750px;
}
.display p {
margin:0 30px 30px 0;
}
<!doctype html>
<html lang="en">
<head>
<!-- SETUP Industries - FUNCTIONAL DESIGN -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="shortcut icon" type="image/png" href="favicon.png"/> -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700,900" rel="stylesheet">
<!-- JS -->
<script src="assets/javascript.js"></script>
<title>Masquarade Classix 2019</title>
</head>
<body>
<!-- Navigation -->
<!-- Icon -->
<img onclick="openNav()"id="icon" src="http://setup.industries/masquarade/assets/icon.svg" class="icon" width="40" alt="Expand Navigation" />
<header id="header">
<nav>
<ul>
<h2>Information</h2>
<li class="tablinks" onmouseover="openTab(event, 'Tickets')">Tickets and pricing </li>
<li class="tablinks" onmouseover="openTab(event, 'Location')">Location</li>
<li class="tablinks" onmouseover="openTab(event, 'Transportation')">Transportation</li>
<li class="tablinks" onmouseover="openTab(event, 'Amenities')"><a href="#">Ameneties</li>
<li class="tablinks" onmouseover="openTab(event, 'HouseRules')">House rules</li>
<li class="tablinks" onmouseover="openTab(event, 'TermsAndConditions')">Terms and conditions</li>
<li class="tablinks" onmouseover="openTab(event, 'Contact')">Contact</li>
<li class="tablinks" onmouseover="openTab(event, 'Partners')">Partners</li>
</ul>
</nav>
<div class="display">
<div id="Tickets" class="tabcontent">
<h2>Tickets and pricing</h2>
<p>Saturday day tickets cost 45 EUR incl. service costs and 21% BTW. You can buy tickets online via the button below or at one of the resellers listed below.</p>
Buy Tickets
<br><br>
<p style="font-size:0.8em;"> <strong>Paperpoint</strong><br>
3930 Hamont-achel<br><br>
<strong>Dag en nachtwinkel </strong><br>
3900 Overpelt<br><br>
<strong>VDM bvba, Q8 tankstation</strong> <br>
Peer<br><br>
<strong>Frituur De Kromme Draai</strong> <br>
Eksel<br><br>
<strong>’t frituurke</strong> <br>
Haag 22, 3910 Achel<br></p>
</div>
<div id="Location" class="tabcontent">
<h2>Location</h2>
</div>
<div id="Transportation" class="tabcontent">
<h2>Transportation</h2>
</div>
<div id="Amenities" class="tabcontent">
<h2>Amenities</h2>
</div>
<div id="HouseRules" class="tabcontent">
<h2>House Rules</h2>
</div>
<div id="TermsAndConditions" class="tabcontent">
<h2>Terms And Conditions</h2>
</div>
<div id="Contact" class="tabcontent">
<h2>Contact</h2>
</div>
<div id="Partners" class="tabcontent">
<h2>Partners</h2>
</div>
</div>
</header>
<!-- Navigation End -->
<div class="container">
<div id="ellipse" class="ellipse_left">
<img src="assets/ellipse.svg" alt="ellipse" width="400" height="400"/>
</div>
<img class="masquarade_events" src="assets/masquarade_events.png" alt="Masquarade Events" width="125" height=""/>
<div class="content">
<p class="date">25 mei 2019</p>
<p class="location">Hennemeeuwis Neerpelt</p>
<h1>Masquarade Classix </h1>
<ul class="lineup">
<li>Nina Kraviz</li>
<li>Recondite</li>
<li>Mind Against</li>
<li>Âme</li>
<li>Vince Watson</li>
<li>Kölsch</li>
<li>Rodriguez Jr. </li>
<li></li>
</ul>
<div class="clear"></div>
Buy Tickets
More Information
</div>
</div>
</body>
</html>


The value for element.style is set by using either javascript or inline style attribute, css will not set the value for you. Therefore, if you are using a css to style the header's width, the value for header.style.width would be an empty string initially, making the expression header.style.width == '0%' to be falsy.
You can add a console.log(document.getElementById('header').style.width) to check the value yourself.
As a result, the first time you click the hamburger, the else block in the conditional will always be ran.
After the first time you click the hamburger, document.getElementById('header').style.width is now being set through javascript, so the subsequent clicks will behave as expected.
To solve the problem, you can either use an inline style attribute to style your header's width, or you can get the style using javascript with
const headerWidth = getComputedStyle(document.getElementById('header')).width;
const open = headerWidth === '0px' || headerWidth === '0%';


You had your open logic reversed. Simply changing the order of 100% / 0% fixes this.
Improvement tips:
checking the elements state by using a class instead of the actual CSS. (Adding an open class to the element when it is open, and removing it when it is not open)
By doing the above, you can move the manipulation of width to the CSS class open: header.open {width: 100%}
By using "`" and encapsulating your variables in ${} you can get rid of many "+" like so: { transform: `translateX(${width}px)` }
Can be seen in the snippet:
// open sidenav //
function openNav() {
let header = document.getElementById("header");
let open = header.className.includes('open')
let width = document.body.clientWidth;
var ellipse = document.getElementById("ellipse");
function moveEllipseRight() {
ellipse.animate([
// keyframes
{ transform: 'translateX(0)' },
{ transform: `translateX(${width}px)` }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
function moveEllipseLeft() {
ellipse.animate([
// keyframes
{ transform: `translateX(${width}px)` },
{ transform: 'translateX(0)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
// open sidenav //
if (open) {
moveEllipseLeft();
header.classList.remove("open");
} else {
moveEllipseRight();
header.classList.add("open");
}
}
// information tabs //
function openTab(evt, tab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tab).style.display = "block";
evt.currentTarget.className += " active";
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
background: black;
color: white;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.2em;
line-height: 1.4em;
}
a {
color: white;
}
.clear {
clear: both; float: none; height: 40px;
}
/* Ellipse */
#ellipse {
position: absolute;
top: 120px;
z-index:99;
animation: 3s linear 0s slide 1;
left: -200px;
}
/*
.ellipse_left {left: -200px;}
.ellipse_right {right: -200px;}
*/
/* Masquarede Logo */
img.masquarade_events {
opacity: 0.3;
position: absolute;
bottom: 20px;
right: 20px;
}
img.masquarade_events:hover {
opacity: 0.9;
}
/* Content */
.content {
margin: 150px 0 0 300px;
width: 700px;
height: 400px;
}
#media screen and (max-width: 992px) {
.content {
margin: 150px 0 0 0;
width: 700px;
height: 400px;
}
}
.date {
font-weight: bold;
margin-bottom: -10px;
}
.location {
}
ul.lineup {
list-style-position: inside;
padding: 0;
list-style-type: none;
width: 100%
overflow: hidden;
margin-bottom: 100px;
}
ul.lineup li {
margin-right: 50px;
line-height: 2.5em;
float: left;
}
/* Buttons */
a.button {
margin-right: 10px;
padding: 10px 50px 10px 50px;
text-decoration: none;
border-radius: 200px;
font-size: 0.7em;
transition: 0.3s;
}
a.white {
background: white;
color: black;
}
a.white:hover {
color: white;
background: #D90E46;
}
a.black {
border: 2px white solid;
color: white;
}
a.black:hover {
border: 2px #FCF454 solid;
color: #FCF454;
}
/* Header */
header {
position: absolute;
background-color: black;
top:0;
left:0;
width: 0;
height: 100%;
z-index: 1;
}
/* Header animation css */
header.open {
width: 100%;
}
/* Navigation */
header nav {
position: absolute;
top: 100px;
right:300px;
}
nav ul {
list-style-position: inside;
width: 400px;
padding: 0;
list-style-type: none;
font-size: 1em;
}
nav ul li{
border-bottom: 1px solid white;
padding: 10px 0 10px 0;
}
nav ul li:hover{
font-weight: bold;
padding: 10px 0 10px 10px;
}
li.active {
font-weight: bold;
}
nav ul li:first-child{
/* border-top: 1px solid white;*/
}
nav ul li a{
text-decoration: none;
}
nav ul h2{
margin-bottom: 10px;
}
.tabcontent {
display: none;
}
/* Header Icon */
img.icon {
position: absolute;
z-index: 999;
top:60px;
right:70px;
}
/* Display */
.display {
width: 400px;
height: 400px;
position: absolute;
top: 100px;
right:750px;
}
.display p {
margin:0 30px 30px 0;
}
<!doctype html>
<html lang="en">
<head>
<!-- SETUP Industries - FUNCTIONAL DESIGN -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="shortcut icon" type="image/png" href="favicon.png"/> -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700,900" rel="stylesheet">
<!-- JS -->
<script src="assets/javascript.js"></script>
<title>Masquarade Classix 2019</title>
</head>
<body>
<!-- Navigation -->
<!-- Icon -->
<img onclick="openNav()"id="icon" src="http://setup.industries/masquarade/assets/icon.svg" class="icon" width="40" alt="Expand Navigation" />
<header id="header">
<nav>
<ul>
<h2>Information</h2>
<li class="tablinks" onmouseover="openTab(event, 'Tickets')">Tickets and pricing </li>
<li class="tablinks" onmouseover="openTab(event, 'Location')">Location</li>
<li class="tablinks" onmouseover="openTab(event, 'Transportation')">Transportation</li>
<li class="tablinks" onmouseover="openTab(event, 'Amenities')"><a href="#">Ameneties</li>
<li class="tablinks" onmouseover="openTab(event, 'HouseRules')">House rules</li>
<li class="tablinks" onmouseover="openTab(event, 'TermsAndConditions')">Terms and conditions</li>
<li class="tablinks" onmouseover="openTab(event, 'Contact')">Contact</li>
<li class="tablinks" onmouseover="openTab(event, 'Partners')">Partners</li>
</ul>
</nav>
<div class="display">
<div id="Tickets" class="tabcontent">
<h2>Tickets and pricing</h2>
<p>Saturday day tickets cost 45 EUR incl. service costs and 21% BTW. You can buy tickets online via the button below or at one of the resellers listed below.</p>
Buy Tickets
<br><br>
<p style="font-size:0.8em;"> <strong>Paperpoint</strong><br>
3930 Hamont-achel<br><br>
<strong>Dag en nachtwinkel </strong><br>
3900 Overpelt<br><br>
<strong>VDM bvba, Q8 tankstation</strong> <br>
Peer<br><br>
<strong>Frituur De Kromme Draai</strong> <br>
Eksel<br><br>
<strong>’t frituurke</strong> <br>
Haag 22, 3910 Achel<br></p>
</div>
<div id="Location" class="tabcontent">
<h2>Location</h2>
</div>
<div id="Transportation" class="tabcontent">
<h2>Transportation</h2>
</div>
<div id="Amenities" class="tabcontent">
<h2>Amenities</h2>
</div>
<div id="HouseRules" class="tabcontent">
<h2>House Rules</h2>
</div>
<div id="TermsAndConditions" class="tabcontent">
<h2>Terms And Conditions</h2>
</div>
<div id="Contact" class="tabcontent">
<h2>Contact</h2>
</div>
<div id="Partners" class="tabcontent">
<h2>Partners</h2>
</div>
</div>
</header>
<!-- Navigation End -->
<div class="container">
<div id="ellipse" class="ellipse_left">
<img src="assets/ellipse.svg" alt="ellipse" width="400" height="400"/>
</div>
<img class="masquarade_events" src="assets/masquarade_events.png" alt="Masquarade Events" width="125" height=""/>
<div class="content">
<p class="date">25 mei 2019</p>
<p class="location">Hennemeeuwis Neerpelt</p>
<h1>Masquarade Classix </h1>
<ul class="lineup">
<li>Nina Kraviz</li>
<li>Recondite</li>
<li>Mind Against</li>
<li>Âme</li>
<li>Vince Watson</li>
<li>Kölsch</li>
<li>Rodriguez Jr. </li>
<li></li>
</ul>
<div class="clear"></div>
Buy Tickets
More Information
</div>
</div>
</body>
</html>

Related

How to make useable delete button to delete comments

I will like to know how to make my delete button work it has the id's of the comments and i just need to know how to get the button to delete the comments.I would also like to make it so the user can only delete there comment not other users i would also like to know how to put a date on a comments.
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
function up(){
window.scrollTo({top:0,behavior:'smooth'});
}
function dark(){
var element = document.body;
element.classList.toggle("dark-mode");
}
const Comments = [{user:'Nice guy',title:'Love this movie',id:'id1'},{user:'cool guy', title:'Best DBS movie ever',id:'id2'},{user:'Random guy' ,title: 'Borly was sooooooooo cooooool',id:'3'}];
render();
function addComments() {
const textbox = document.getElementById('comment-title');
const title = textbox.value;
const userName = document.getElementById('user-name');
const user = userName.value;
const id = new Date().getTime();
Comments.push({
title:title,
user:user,
id:id
});
render();
}
function deleteComment(event){
const deleteButton = event.target;
const idToDelete = deleteButton.id;
Comments= Comments.filter(function(Comment){
if (comment.id === idToDelete){
return false
}else{
return true;
}
});
}
function render() {
// reset our list
document.getElementById('comment-List').innerHTML = '';
Comments.forEach(function (comment) {
const element = document.createElement('div');
element.innerText = comment.user +': '+comment.title;
element.style.textAlign = 'center'
element.style.marginLeft='30%'
element.style.marginRight='30%'
element.style.padding='20px'
element.style.fontFamily = 'Albert Sans, sans-serif';
element.style.marginBottom = '20px'
element.style.border='1px solid'
element.style.borderRadius='20px'
element.style.borderColor='blue'
const deleteButton = document.createElement('button');
deleteButton.innerText = 'Delete';
deleteButton.onclick = deleteComment;
deleteButton.id = comment.id;
element.appendChild(deleteButton);
const commmentsList = document.getElementById('comment-List');
commmentsList.appendChild(element);
});
}
body{
margin: 0px;
background-color: #f0833a;
}
h1,h2,h3,h4,h5{
text-align: center;
font-family: 'Poppins', sans-serif;
}
p{
font-family: 'Albert Sans', sans-serif;
margin-left: 10%;
margin-right: 10%;
}
.logo{
width: 150px;
}
/* Dropdown Button */
.dropbtn {
padding: 16px;
background-color: #f0833a;
color: white;
font-size: 16px;
font-family: 'Albert Sans', sans-serif;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #f0833a;}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #1dc40a;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
#footer{
margin-top: 20px;
background-color: black;
padding-bottom: 100px;
color: #f0833a;
}
.copyright{
float: right;
}
.made{
float: left;
}
.button{
background-color: #f0833a;
margin-left: auto;
margin-right: auto;
color: white;
border-width: 0px;
height: 36px;
width: 74px;
font-size: 15px;
cursor: pointer;
transition: box-shadow 0.15s;
color: 0.15s;
}
html {
scroll-behavior: smooth;
}
#nav{
min-height: 150px;
position: relative;
}
.dark-mode {
background-color: black;
color: white;
}
#add-comment{
background-color: black;
color: white;
border-width: 0px;
cursor: pointer;
vertical-align: top;
border-radius: 20px;
padding: 10px;
display: inline-block;
}
#add-comment:active{
opacity: 0.7;
}
#comment-title{
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
#user-name{
margin-left: 20%;
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
<!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>Rahim reviews</title>
<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=Albert+Sans&family=Poppins:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="DBS.css">
</head>
<body>
<div id="nav" style="background-color: black">
<img class="logo" src="pngwing.com.png" alt="">
<div class="dropdown">
<button id="dropbtn" class="dropbtn">Home</button>
<div class="dropdown-content">
Overview
Review
Footer
</div>
</div>
<button id="darkButton" style="position: absolute;
bottom: 0; margin-left: 10%;" class="button" onclick="dark()">Dark mode</button>
</div>
<br>
<!-- Slideshow container -->
<h1 > Dragon Ball Super: Broly Review</h1>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%;height: 500px;">
<div class="text">Poster</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%;height: 500px;">
<div class="text">Broly rage</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%;height: 500px;">
<div class="text">Gogeta kamehameha</div>
</div>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div>
<h2 id="overview">Overview</h2>
<p> <b>Ball Super: Broly</b> is essentially broken up into <b>two halves,</b> the first of which covers Broly&apos; s traumatic childhood and the end of the Saiyan race. What&apos; s exciting here is that this is familiar territory
that would make most Dragon Ball fans groan on any other occasion, yet Dragon Ball Super: Broly finds an<b> entertaining and efficient </b>way to condense all of that clutter. Broly takes this opportunity to rewrite
all of <b> Dragon Ball&apos; s</b> lingering plotlines and attempts to resolve several storylines that the series has hinted at in the past, like Frieza&apos; s relationship with the Saiyan race, Bardock&apos; s history, and the whole
Broly debacle.</p>
</div>
<div>
<iframe class="center" width="1000px" height="500px" src="https://www.youtube.com/embed/FHgm89hKpXU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="review">The review</h2>
<p>Dragon Ball Super: Broly knows how much its fans want Gogeta and that there are nearly as many expectations behind Gogeta as there are with Broly. The film makes a meal out of the fusion sequence and doesn&apos; t shy away from the technique&apos; s tricky learning curve and that the process can sometimes be full of imperfections. It basically takes everything that Fusion Reborn did with the character, but does it better. The super-powered character makes for the perfect climax to an already exciting film. During the whole trial and error section of the fusion process, Frieza successfully holds down the fort and gets to engage in an aggressive fight against Broly. It&apos; s an effective way to add some variety to the movie&apos; s battle scenes as well as a way to not lose any action during the more comedic fusion training sequence.
<br><br>
All of these fights are so entertaining because of the outstanding animation that&apos; s featured in the film. Sequences like baby Goku&apos; s arrival on Earth, Vegeta and Goku&apos; s first sparring match, and all of the Broly fights just look gorgeous. Dragon Ball Super has started to feature more engaging, impressive fight choreography throughout the end of its run, but the material here is on a whole other level. The camera weaves through and around battles without restriction, making it feel like the action never stops moving. It&apos; s really quite something.
<br><br>
<img class="center" src="fight.webp" alt="">
<br><br>
The animation, action, and character development are the film&apos; s priorities, but there&apos; s still a lively sense of humor in the movie. Bulma and Frieza&apos; s similar Dragon Ball wishes are not only the best potential wishes from the entire series but the strongest gags from the film, too. All of this is further punctuated by Norihito Sumitomo&apos; s incredible score. Sumitomo&apos; s work on Dragon Ball movies has only gotten better, but Broly&apos; s score is definitely the strongest of the lot. The theme for Gogeta, “Gogeta Vs. Broly,” is not only a memorable track but it also repeatedly shouts Gogeta&apos; s name out in celebration. The film&apos; s major theme song by Daichi Miura, “Blizzard,” is grand stuff, too.
<br><br>
Dragon Ball Super: Broly is an absolute triumph on every front. It sets a new standard for what&apos; s possible in Dragon Ball movies and not only does it present an effective new story, it fills in gaps in old ones, too. It&apos; s packed with fan service for dedicated viewers, but still features plenty of surprises. It&apos; s a pleasure to watch and it&apos; s extremely gratifying to see that there&apos; s still lots of life left in this franchise, even if it just becomes a film series.
</p>
</div>
<div class="center" >
<input type="text" id="user-name" placeholder="Enter Username">
<input id="comment-title" type="text" placeholder="Enter comment" />
<button id="add-comment" onclick="addComments()">Add Comment</button>
</div>
<div style="margin-top: 30px;" id="comment-List"></div>
<div id="footer">
<div>
<p class="made">Made by Guy</p>
</div>
<div>
<p class="copyright">© Guy reviews· All rights reserved</p>
</div>
<div>
<button id="button" style="display: block;" class="button" class="center" onclick="up()">Top</button>
</div>
</div>
<script src="DBS.js"></script>
</body>
</html>

This works, changed render(), deleteComment() and const -> let Comments
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
function up(){
window.scrollTo({top:0,behavior:'smooth'});
}
function dark(){
var element = document.body;
element.classList.toggle("dark-mode");
}
let Comments = [{user:'Nice guy',title:'Love this movie',id:'id1'},{user:'cool guy', title:'Best DBS movie ever',id:'id2'},{user:'Random guy' ,title: 'Borly was sooooooooo cooooool',id:'3'}];
render();
function addComments() {
const textbox = document.getElementById('comment-title');
const title = textbox.value;
const userName = document.getElementById('user-name');
const user = userName.value;
const id = new Date().getTime().toString();
Comments.push({
title:title,
user:user,
id:id
});
render();
}
function deleteComment(event){
const deleteButton = event.target;
const idToDelete = deleteButton.id;
Comments= Comments.filter(function(comment){
if (comment.id === idToDelete){
document.getElementById(comment.id).style.display = "none"
return false
}else{
return true;
}
});
}
function render() {
// reset our list
document.getElementById('comment-List').innerHTML = '';
Comments.forEach(function (comment) {
const element = document.createElement('div');
element.innerText = comment.user +': '+comment.title;
element.style.textAlign = 'center'
element.style.marginLeft='30%'
element.style.marginRight='30%'
element.style.padding='20px'
element.style.fontFamily = 'Albert Sans, sans-serif';
element.style.marginBottom = '20px'
element.style.border='1px solid'
element.style.borderRadius='20px'
element.style.borderColor='blue'
element.setAttribute("id", comment.id);
const deleteButton = document.createElement('button');
deleteButton.innerText = 'Delete';
deleteButton.onclick = deleteComment;
deleteButton.id = comment.id;
element.appendChild(deleteButton);
const commmentsList = document.getElementById('comment-List');
commmentsList.appendChild(element);
});
}
body{
margin: 0px;
background-color: #f0833a;
}
h1,h2,h3,h4,h5{
text-align: center;
font-family: 'Poppins', sans-serif;
}
p{
font-family: 'Albert Sans', sans-serif;
margin-left: 10%;
margin-right: 10%;
}
.logo{
width: 150px;
}
/* Dropdown Button */
.dropbtn {
padding: 16px;
background-color: #f0833a;
color: white;
font-size: 16px;
font-family: 'Albert Sans', sans-serif;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #f0833a;}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f0833a;
font-family: 'Albert Sans', sans-serif;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #1dc40a;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
#footer{
margin-top: 20px;
background-color: black;
padding-bottom: 100px;
color: #f0833a;
}
.copyright{
float: right;
}
.made{
float: left;
}
.button{
background-color: #f0833a;
margin-left: auto;
margin-right: auto;
color: white;
border-width: 0px;
height: 36px;
width: 74px;
font-size: 15px;
cursor: pointer;
transition: box-shadow 0.15s;
color: 0.15s;
}
html {
scroll-behavior: smooth;
}
#nav{
min-height: 150px;
position: relative;
}
.dark-mode {
background-color: black;
color: white;
}
#add-comment{
background-color: black;
color: white;
border-width: 0px;
cursor: pointer;
vertical-align: top;
border-radius: 20px;
padding: 10px;
display: inline-block;
}
#add-comment:active{
opacity: 0.7;
}
#comment-title{
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
#user-name{
margin-left: 20%;
width: 250px;
border-radius: 20px;
border-width: 0px;
padding: 10px;
}
<!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>Rahim reviews</title>
<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=Albert+Sans&family=Poppins:wght#600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="DBS.css">
</head>
<body>
<div id="nav" style="background-color: black">
<img class="logo" src="pngwing.com.png" alt="">
<div class="dropdown">
<button id="dropbtn" class="dropbtn">Home</button>
<div class="dropdown-content">
Overview
Review
Footer
</div>
</div>
<button id="darkButton" style="position: absolute;
bottom: 0; margin-left: 10%;" class="button" onclick="dark()">Dark mode</button>
</div>
<br>
<!-- Slideshow container -->
<h1 > Dragon Ball Super: Broly Review</h1>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%;height: 500px;">
<div class="text">Poster</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%;height: 500px;">
<div class="text">Broly rage</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%;height: 500px;">
<div class="text">Gogeta kamehameha</div>
</div>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div>
<h2 id="overview">Overview</h2>
<p> <b>Ball Super: Broly</b> is essentially broken up into <b>two halves,</b> the first of which covers Broly&apos; s traumatic childhood and the end of the Saiyan race. What&apos; s exciting here is that this is familiar territory
that would make most Dragon Ball fans groan on any other occasion, yet Dragon Ball Super: Broly finds an<b> entertaining and efficient </b>way to condense all of that clutter. Broly takes this opportunity to rewrite
all of <b> Dragon Ball&apos; s</b> lingering plotlines and attempts to resolve several storylines that the series has hinted at in the past, like Frieza&apos; s relationship with the Saiyan race, Bardock&apos; s history, and the whole
Broly debacle.</p>
</div>
<div>
<iframe class="center" width="1000px" height="500px" src="https://www.youtube.com/embed/FHgm89hKpXU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="review">The review</h2>
<p>Dragon Ball Super: Broly knows how much its fans want Gogeta and that there are nearly as many expectations behind Gogeta as there are with Broly. The film makes a meal out of the fusion sequence and doesn&apos; t shy away from the technique&apos; s tricky learning curve and that the process can sometimes be full of imperfections. It basically takes everything that Fusion Reborn did with the character, but does it better. The super-powered character makes for the perfect climax to an already exciting film. During the whole trial and error section of the fusion process, Frieza successfully holds down the fort and gets to engage in an aggressive fight against Broly. It&apos; s an effective way to add some variety to the movie&apos; s battle scenes as well as a way to not lose any action during the more comedic fusion training sequence.
<br><br>
All of these fights are so entertaining because of the outstanding animation that&apos; s featured in the film. Sequences like baby Goku&apos; s arrival on Earth, Vegeta and Goku&apos; s first sparring match, and all of the Broly fights just look gorgeous. Dragon Ball Super has started to feature more engaging, impressive fight choreography throughout the end of its run, but the material here is on a whole other level. The camera weaves through and around battles without restriction, making it feel like the action never stops moving. It&apos; s really quite something.
<br><br>
<img class="center" src="fight.webp" alt="">
<br><br>
The animation, action, and character development are the film&apos; s priorities, but there&apos; s still a lively sense of humor in the movie. Bulma and Frieza&apos; s similar Dragon Ball wishes are not only the best potential wishes from the entire series but the strongest gags from the film, too. All of this is further punctuated by Norihito Sumitomo&apos; s incredible score. Sumitomo&apos; s work on Dragon Ball movies has only gotten better, but Broly&apos; s score is definitely the strongest of the lot. The theme for Gogeta, “Gogeta Vs. Broly,” is not only a memorable track but it also repeatedly shouts Gogeta&apos; s name out in celebration. The film&apos; s major theme song by Daichi Miura, “Blizzard,” is grand stuff, too.
<br><br>
Dragon Ball Super: Broly is an absolute triumph on every front. It sets a new standard for what&apos; s possible in Dragon Ball movies and not only does it present an effective new story, it fills in gaps in old ones, too. It&apos; s packed with fan service for dedicated viewers, but still features plenty of surprises. It&apos; s a pleasure to watch and it&apos; s extremely gratifying to see that there&apos; s still lots of life left in this franchise, even if it just becomes a film series.
</p>
</div>
<div class="center" >
<input type="text" id="user-name" placeholder="Enter Username">
<input id="comment-title" type="text" placeholder="Enter comment" />
<button id="add-comment" onclick="addComments()">Add Comment</button>
</div>
<div style="margin-top: 30px;" id="comment-List"></div>
<div id="footer">
<div>
<p class="made">Made by Guy</p>
</div>
<div>
<p class="copyright">© Guy reviews· All rights reserved</p>
</div>
<div>
<button id="button" style="display: block;" class="button" class="center" onclick="up()">Top</button>
</div>
</div>
<script src="DBS.js"></script>
</body>
</html>

Hide elements using drag and drop

i was wandering how i can hide elements in a div, which has the same class name as another div. i do not want to change the class name, because it will effect my JavaScript. So i want one div acting as like a folder, it is kinda like a drag and drop system. I used a tutorial from Web Dev Simplified. Here is the tutorial if anyone is interested. https://www.youtube.com/watch?v=jfYWwQrtzzY&ab_channel=WebDevSimplified
const draggables = document.querySelectorAll('.draggable')
// create const with class draggable what you can drag
const containers = document.querySelectorAll('.container')
const containerx =document.querySelector('.containerx')
// containers where to drop.
// loop through each pages
draggables.forEach(draggable => {
//DRAGSTRT EVENT
draggable.addEventListener('dragstart',()=> {
draggable.classList.add('dragging')
})//what happends when we start draghging element
// DRAGEND EVENT
draggable.addEventListener('dragend', () => {
draggable.classList.remove('dragging')
})
})
// Allow elements to be dropped in containers
containers.forEach(container=>{
container.addEventListener('dragover', e =>{
e.preventDefault() // enable dropping remove default
const draggable = document.querySelector('.dragging')
//1 element willl have 'dragging' bc one selected
container.appendChild(draggable)
//SORT
const afterElement = getDragAfterElement(container, e.clientY)
if(afterElement ==null){
container.appendChild(draggable)
}else{
container.insertBefore(draggable,afterElement)
}
})
})
//sorting mouse position
function getDragAfterElement(container, y)
{ //every draggable that we are not dragging
const draggableelements = [...container.querySelectorAll('.draggable:not(.dragging)')]
return draggableelements.reduce((closest,child)=> {
const box = child.getBoundingClientRect()
const offset =(( y - box.top) - box.height) / 2 //mouse position between center boxes
if (offset < 0 && offset > closest.offset)
{
return{offset: offset,element: child}
}else{
return closest
}
},{offset: Number.NEGATIVE_INFINITY}).element
}
body{
margin:0;
background-color: rgb(29, 29, 29);
;
}
/* NAV */
/* NAV STRT */
nav {
list-style-type: none;
font-family:sans-serif;
margin: 0;
padding: 0;
width: 240px;
background-color: #3a3a3a;
height: 100%; /*full height */
position:absolute; /* Make it stick, even on scroll */
overflow: auto; /* enable scrolling if the sidenav has too much content */
left: 0;
font-size: 16px;
}
li a {
display: block; /* links as block elements, whole link area click */
color:white;
padding: 8px 1px; /*padding between pages*/
padding-top:20px;
text-decoration: none;
text-align: center;
background-color: #3a3a3a;
}
li h1,h3{
background-color: #3a3a3a;
}
ul{
list-style-type: none;
background-color: #3a3a3a;
}
/* change link color on hover */
li a:hover {
background-color:#555;
color: #F3ECEC;
}
li:hover {
background-color: aqua;
}
.title {
text-align: center;
color:white;
}
.title1
{
text-align: center;
color:white;
background-color: #3C3939;
padding-top: 20px;
}
.divider{
border-top: 3px solid #bbb;
}
/* NAV END */
/* Nav end */
/* FOLDER CONTAINER */
.container {
background-color: #333;
padding: 1rem;
margin-top: 1rem;
position: relative;
left:0;
min-height: 274px;
max-height: 800px;
min-width:1000px;
display: grid;
grid-template-columns: auto auto auto auto;
overflow-y: scroll;
overflow-x: hidden;
}
.draggable{
background-color:rgba(255, 245, 245, 0.945);
padding: 1rem;
margin-top: 1rem;
border:solid black;
cursor: move; /* change cursor */
width:128px;
height: 174px;
display: grid;
}
.draggable.dragging{
opacity: 0.5;
}
.containerx{
background-color: #3a3a3a;
position: absolute;
left:35%;
top: 30%;
height:600px;
}
.containery{
background-color: #3a3a3a;
width: 1032px;
position: relative;
left:35%;
height:400px;
}
/* END FOLDERS */
/* SCROLLBAR */
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* SCrollbar end */
<!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="test.css">
<script src="test.js" defer></script>
</head>
<body>
<nav>
<ul>
<li><div class="title"><h1>Organize</h1></div></li>
<li>Folders</li>
<li>Timeline</li>
<li>Pages</li>
<li>Meetings</li>
<li><div class="title1"><h3>documents</h3></div></li>
<li></li>
</ul>
</nav>
<div class="containery">
<div class="container" id="hidden" name="test">
</div>
</div>
<div class="containerx">
<div class="container">
<p class="draggable" draggable="true">3</p>
<p class="draggable" draggable="true">4</p>
<p class="draggable" draggable="true">1</p>
<p class="draggable" draggable="true">2</p>
<p class="draggable" draggable="true">3</p>
<p class="draggable" draggable="true">4</p>
<p class="draggable" draggable="true">1</p>
<p class="draggable" draggable="true">2</p>
</div>
</div>
</body>
</html>

Change fixed navigation text color when over certain divs

Apologies if this is a repeat question. I've scanned the internet but haven't found a viable solution to this. My website has varying background colours, blue and white. My nav's copy is primarily set to white but I'd like it to change to black when over a div with a white background.
Initially, I found this bit of JS on here:
$(document).ready(function(){
$(window).scroll(function(){
var lightPos = $('#light').offset().top;
var lightHeight = $('#light').height();
var menuPos = $('.desktop-menu').offset().top;
var menuHeight = $('.desktop-menu').height();
var menuPos = $('.logo').offset().top;
var menuHeight = $('.logo').height();
var scroll = $(window).scrollTop();
if(menuPos > lightPos && menuPos < (lightPos + lightHeight)) {
$('.desktop-menu').addClass('menu-secondary');
$('.desktop-menu').removeClass('menu-primary');
}
else {
$('.desktop-menu').removeClass('menu-secondary');
$('.desktop-menu').addClass('menu-primary');
}
})
})
But this seems to not work beyond 3 containers. If I continue scrolling to other divs, no matter what id I attach to a div (#light or #dark), the text stops changing after the first 3 div containers on a page.
Thanks to anyone who can help!
EDIT:
Struggled to get codepen to work so here's an example below.
Example HTML:
<div class="container">
<header>
<nav>
<ul class="menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</header>
<div class="hero-container dark-background">
</div>
<div class="content-container light-background" id="light">
</div>
<div class="content-container dark-background">
</div>
<div class="content-container light-background" id="light">
</div>
<div class="content-container dark-background">
</div>
<div class="content-container light-background" id="light">
</div>
<div class="content-container dark-background">
</div>
</div>
Example CSS:
body {
margin: 0;
font-family: 'Poppins', sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header {
display: flex;
}
.container {
text-align: center;
}
/*-------------------- COLORS */
.dark-background {
background: #313747;
}
.light-background {
background: #f4f4f4;
}
.dark-color {
color: #303030;
}
.light-color {
color: #f4f4f4;
}
/*-------------------- NAVIGATION */
nav {
position: fixed;
height: auto;
width: 100%;
margin: auto;
z-index: 10;
}
.menu {
display: flex;
padding: 2em 0 2em 3em;
text-align: left;
float: left;
}
.menu li a {
margin-right: 2em;
font-size: 1.2em;
font-weight: 700;
text-decoration: none;
}
/*-------------------- HERO CONTAINER */
.hero-container {
position: relative;
height: 100vh;
width: 100%;
}
/*-------------------- CONTENT CONTAINER */
.content-container {
position: relative;
display: flex;
width: 100%;
height: 100vh;
margin: auto;
}
Example JS:
$(document).ready(function(){
$(window).scroll(function(){
var lightPos = $('#light').offset().top;
var lightHeight = $('#light').height();
var menuPos = $('.menu-btn').offset().top;
var menuHeight = $('.menu-btn').height();
var scroll = $(window).scrollTop();
if(menuPos > lightPos && menuPos < (lightPos + lightHeight)) {
$('.menu-btn').addClass('dark-color');
$('.menu-btn').removeClass('light-color');
}
else {
$('.menu-btn').removeClass('dark-color');
$('.menu-btn').addClass('light-color');
}
})
})

Ok, I had to change a bit your code because you were checking on ids (you shouldn't have multiple elements with the same ID),
This should be ok for your case,
so basically i create an array of light-sections and then check if scroll position is inside one of them
var $ = jQuery;
$(document).ready(function () {
var lightPos = [];
$(".light-background").each(function () {
lightPos.push({
start: $(this).offset().top,
end: $(this).offset().top + $(this).height()
});
});
$(window).scroll(function () {
var menuPos = $(".menu-btn").offset().top;
var isInLight = !!lightPos.some((light) => {
return light.start < menuPos && light.end > menuPos;
});
if (isInLight) {
$(".menu-btn").addClass("dark-color");
$(".menu-btn").removeClass("light-color");
} else {
$(".menu-btn").removeClass("dark-color");
$(".menu-btn").addClass("light-color");
}
});
});
body {
margin: 0;
font-family: "Poppins", sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header {
display: flex;
}
.container {
text-align: center;
}
/*-------------------- COLORS */
.dark-background {
background: #313747;
}
.light-background {
background: #f4f4f4;
}
.dark-color {
color: #303030;
}
.light-color {
color: #f4f4f4;
}
/*-------------------- NAVIGATION */
nav {
position: fixed;
height: auto;
width: 100%;
margin: auto;
z-index: 10;
}
.menu {
display: flex;
padding: 2em 0 2em 3em;
text-align: left;
float: left;
}
.menu li a {
margin-right: 2em;
font-size: 1.2em;
font-weight: 700;
text-decoration: none;
}
/*-------------------- HERO CONTAINER */
.hero-container {
position: relative;
height: 100vh;
width: 100%;
}
/*-------------------- CONTENT CONTAINER */
.content-container {
position: relative;
display: flex;
width: 100%;
height: 100vh;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<header>
<nav>
<ul class="menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</header>
<div class="hero-container dark-background"></div>
<div class="content-container light-background"></div>
<div class="content-container dark-background"></div>
<div class="content-container light-background"></div>
<div class="content-container dark-background"></div>
<div class="content-container light-background"></div>
<div class="content-container dark-background"></div>
</div>

html responsive textarea / button / table

I'm working on a site with a textarea / button / table in the body content.
My content is responsive enough, except for very thin displays (like mobile) in which case the table does not wrap and becomes unusable, and the button doesn't expand to fill the entire area.
(in line code element doesn't seem to be playing nice, but this jsfiddle is a better example)
https://jsfiddle.net/martinradio/b4z735tk/40/
How can I make the table more responsive so that when my window gets resized, the table has some sort of word wrap (like a scroll) similar to the textarea
button {
border: 2px solid black;
}
table, th, td {
border: 2px solid black;
background: white;
color:black;
height: 100%;
}
table {
table-layout:fixed;
width:100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
<title>tagger.site</title>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- Style -->
<style>
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
/*
#sidebar ul li a:hover { background: rgb(6, 255, 193); color: rgb(247, 1, 255); } `;
*/
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
.btn-info {
color: #fff;
background-color: #b81717;
border-color: #52b817;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
/*
padding: 15px 10px;
margin-right: 77px;
*/
/* background: rgb(11, 223, 212); */
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
margin-left:11px
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
/* background: #63c23e; NAVBAR BACKGROUND */
color: rgb(0, 0, 0);
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
display: inline-flex;
padding: 20px;
/* background: #6d7fcc; */
position: relative;
width: 100%;
}
#sidebar ul.components {
/* padding: 20px 0; */
/* border-bottom: 1px solid #47748b; */
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
color: pink
display: inline;
}
}
#imageModal{
z-index:3;
}
/* Sidebar expand/collapse button */
#sidebarCollapse{
position: fixed;
z-index: 2;
margin-left: 84%;
box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
border: none;
height: 40px;
width: 40px;
border-radius: 50%;
cursor: pointer;
position: absolute;
}
/* Bottom of sidebar image stuff */
.responsive {
width: 90%;
bottom:20px;
margin-left:5%;
margin-right:5%;
}
/* image footer color text center */
.sidebar-footer{
text-align: center;
font-size: 1.1rem;
/*font-family:'Consolas' */
}
/* image footer color boxes */
.colorBox {
/*float: left;*/
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
vertical-align: middle;
display: inline-block;
}
</style>
<style>
/* Style the Image Used to Trigger the Modal */
#colorImageDisplay {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#colorImageDisplay:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- Page Content -->
<div class="wrapper" class="toggled">
<!-- Sidebar -->
<nav id="sidebar" style='background: #f8f0e8; color:#000000;'>
<!-- sidenav top title -->
<div id='sidebarTop' class="sidebar-header" style='background: #513e2a'>
<!-- sidebar top title text -->
<h3 style='color: #ffffff' style='font-weight: bold; text-size:12px'><strong>asdasdr</strong></h3>
<!-- sidebar expand/collapse button -->
<button id='sidebarCollapse'>
<img src="https://img.icons8.com/ios-filled/24/000000/menu.png"/>
</button>
</div>
<!-- sidenav list of items -->
<ul class="list-unstyled components sideBarOption" style='background: #180d04; color: #ffffff;'>
<!-- about page -->
<li>
About
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" style='background: #cec5ac;'>
<div class="col-sm-12">
<div class="col" >
<div class="row" style=' overflow: auto; margin: auto; background: #917e73; color: #ffffff'>
<div class="col" style=''>
<h1 class="widgettitle"><strong>page title</strong></h1>
</div>
<div class="w-100"></div>
<div class="col" style=''>
<a id='githubUrl' target="_blank" href='https://www.youtube.com/watch?v=0df7k__KEHw'>Github</a>
</div>
</div>
</div>
<div class="col" >
<br>
<br>
<div class="row" style=' margin: auto;'>
<!-- page main content -->
<div class="container-fluid" style='color: #000000'>
<div style="margin-top:-30px;">
<!-- discogstagger output -->
<hr>
<h3>Comma-Separated Metadata Tags:</h3>
<div class='outputDiscogstaggerBox' style='margin-left:15px;'>
<div class='row'>
<textarea class="inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta Song,Why,Mississippi Voodoo,Cool Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,"></textarea>
<button class="btn default copyButton" style="cursor: pointer;" id='copyToClipboarad' onclick="copyToClipboard('#inputBox')" type="button">Copy</button>
<div>
<table class="fixed h-100" align="left" style="white-space:nowrap; table-layout: fixed; width: 533px; " height="100" id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
<th style="text-align:center; width: 25%;">Tags Type</th>
<th style="text-align:center; width: 46%;">Tags</th>
</tr>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Artist(s)</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseArtistsSliderValue">100%</div>
<div class='float-right' id='releaseArtistsNumber'>0 chars </div>
</div>
</td>
</tr>
<!-- Release Info -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Info</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseInfoSliderValue">100%</div>
<div class='float-right' id='releaseInfoNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Tracklist -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Tracklist</td>
<td>
<div style="text-align:center;">
<input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="tracklistSliderValue">100%</div>
<div class='float-right' id='tracklistNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Combinations</td>
<td>
<div style="text-align:center;">
<input type="range" class="combinationsSlider" id="combinationsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="combinationsSliderValue">100%</div>
<div class='float-right' id='combinationsNumber'>0 chars</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setHoverColor();
//setColors()
async function setHoverColor(){
var sheet = document.createElement('style')
//create css style rule for on-hover tab and on hover github url
let innerHTMLHoverColorStyle = `
/* githubUrl hover */
#githubUrl:hover{
color:blue;
}
#sidebar ul li a:hover {
background: #8c743c;
color: #ffffff;
} `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
}
async function setColors(){
console.log('setcolors()')
let colors = await getColors()
let imgPath = colors.imgPath
//6 possible colors:
//Vibrant
//LightVibrant
//DarkVibrant
//Muted
//LightMuted
//DarkMuted
//get high contrast colors for text
/*
let sidebarColorBackground = colors.colors['DarkVibrant']
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.substring(4, sidebarColorBackground.length-1);
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.split(',');
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground_hex = rgbToHex(213, 23, 36)
console.log("sidebarColorBackground_hex = ", sidebarColorBackground_hex)
let sidebarColorBackground_text = invertColor(sidebarColorBackground_hex)
console.log("sidebarColorBackground_text = ", sidebarColorBackground_text)
*/
//change color display text and set color box hex value
//make all colors visible
//document.getElementById('pageColorsText').style.display = "block";
/*
//color 1
var color1 = colors.colors['Vibrant']
var color1_hex = rgbToHex(color1)
document.getElementById("color1Hex").innerText = `Color 1: ${color1_hex}`
//color 2
var color2 = colors.colors['LightVibrant']
var color2_hex = rgbToHex(color2)
document.getElementById("color2Hex").innerText = `Color 2: ${color2_hex}`
//color 3
var color3 = colors.colors['DarkVibrant']
var color3_hex = rgbToHex(color3)
document.getElementById("color3Hex").innerText = `Color 3: ${color3_hex}`
//color 4
var color4 = colors.colors['Muted']
var color4_hex = rgbToHex(color4)
document.getElementById("color4Hex").innerText = `Color 4: ${color4_hex}`
//color 5
var color5 = colors.colors['LightMuted']
var color5_hex = rgbToHex(color5)
document.getElementById("color5Hex").innerText = `Color 5: ${color5_hex}`
//color 6
var color6 = colors.colors['DarkMuted']
var color6_hex = rgbToHex(color6)
document.getElementById("color6Hex").innerText = `Color 6: ${color6_hex}`
*/
//change display image source
//document.getElementById('colorImageDisplay').src=`${imgPath}`
//setup image modal popup
//imageModalSetup()
//change colors
var sheet = document.createElement('style')
let hoverColor = `#8c743c`;
let innerHTMLHoverColorStyle = `#sidebar ul li a:hover { background: ${hoverColor}; } `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
let innerHTMLStyle = `
/* main page body background color solid
body { background: red; } */
/* sidebar_header_background_color
#sidebarTop {background: ${colors.colors['LightMuted']};} */
/* sidebar_background_color
#sidebar { background: linear-gradient(0deg, ${colors.colors['LightVibrant']}, ${colors.colors['Muted']}); } */
/* active tab color
#currentPage { background: ${colors.colors['LightVibrant']}; } */
/* main page body background color gradient
body { background: linear-gradient(2deg, color3_hex, color6_hex);} */
/* ul ul a { expanded tab background color
.sideBarOption { background: ${colors.colors['Muted']}; } */
/* sidebar hover color */
#sidebar ul li a:hover { background: ${colors.colors['DarkVibrant']}; } `;
//console.log("innerHTMLStyle = ", innerHTMLStyle)
//sheet.innerHTML = innerHTMLStyle
//document.head.appendChild(sheet);
}
function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
// invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
// pad each with zeros and return
return '#' + padZero(r) + padZero(g) + padZero(b);
}
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
//rgb to hex
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(color) {
//color = string like rgb(a,b,c)
//remove string parts
color = color.substring(4, color.length-1);
//turn into arr
color = color.split(',');
return "#" + componentToHex(parseInt(color[0])) + componentToHex(parseInt(color[1])) + componentToHex(parseInt(color[2]));
}
//setup image modal popup
imageModalSetup()
async function imageModalSetup(){
// Get the modal
var modal = document.getElementById("imageModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("colorImageDisplay");
//make image visible
img.style.display = "block";
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
//captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
$('#imageModal').fadeOut(500);
}
}
$(document).ready(function () {
//refresh button
const refreshButton = document.getElementById('refreshButton');
const refreshPage = () => {
location.reload();
}
refreshButton.addEventListener('click', refreshPage)
//if clicking outside modal, close modal
$(document).click(function (e) {
console.log('close modal')
if ($(e.target).is('#imageModal')) {
$('#imageModal').fadeOut(500);
}
});
//on escape key click, close modal
$(document).keydown(function(event) {
if (event.keyCode == 27) {
$('#imageModal').fadeOut(500);
}
});
//side bar collapse event
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
//make request to colors backend
function getColors(){
return new Promise(async function (resolve, reject) {
$.ajax({
type: 'POST',
url: '/getColors',
data: {
type: "varValue",
},
}).then((data) => {
resolve(data)
}).catch((err) => {
reject(err)
});
})
}
</script>
</html>

I have edited your code here: https://jsfiddle.net/r0bny6h7/
To make the table itself responsive on smaller screens, I changed the fix width of 553px to "max-width: 553px". Essentially what this does is on larger screens, makes sure that the element does not go over 553px, but on smaller screens, it will automatically reduce in size to fit the screen.
To expand the button on smaller screens, just add a max-width (in this case, "max-width: 553px" to match the table) and "width: 100%" to ensure that it takes up the full width on smaller screens.
To make the table contents have word wrap, just add "word-wrap: break-word;" and "white-space: normal;" to the table, th, td.
Just a small note, but it was a bit difficult to navigate through your code since you mixed inline and declarative CSS styles. I would suggest sticking to one type, especially if you have styles that will be reused throughout the code (for example, you add "text-align: center" to a lot of the table contents. You can clean it up by applying it to the whole element instead, or a specific class.)
button {
border: 2px solid black;
}
table, th, td {
border: 2px solid black;
background: white;
color:black;
height: 100%;
white-space: normal;
word-wrap: break-word;
}
table {
table-layout:fixed;
width:100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
<title>tagger.site</title>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- Style -->
<style>
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
/*
#sidebar ul li a:hover { background: rgb(6, 255, 193); color: rgb(247, 1, 255); } `;
*/
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
.btn-info {
color: #fff;
background-color: #b81717;
border-color: #52b817;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
/*
padding: 15px 10px;
margin-right: 77px;
*/
/* background: rgb(11, 223, 212); */
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
margin-left:11px
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
/* background: #63c23e; NAVBAR BACKGROUND */
color: rgb(0, 0, 0);
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
display: inline-flex;
padding: 20px;
/* background: #6d7fcc; */
position: relative;
width: 100%;
}
#sidebar ul.components {
/* padding: 20px 0; */
/* border-bottom: 1px solid #47748b; */
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
color: pink
display: inline;
}
}
#imageModal{
z-index:3;
}
/* Sidebar expand/collapse button */
#sidebarCollapse{
position: fixed;
z-index: 2;
margin-left: 84%;
box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
border: none;
height: 40px;
width: 40px;
border-radius: 50%;
cursor: pointer;
position: absolute;
}
/* Bottom of sidebar image stuff */
.responsive {
width: 90%;
bottom:20px;
margin-left:5%;
margin-right:5%;
}
/* image footer color text center */
.sidebar-footer{
text-align: center;
font-size: 1.1rem;
/*font-family:'Consolas' */
}
/* image footer color boxes */
.colorBox {
/*float: left;*/
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
vertical-align: middle;
display: inline-block;
}
</style>
<style>
/* Style the Image Used to Trigger the Modal */
#colorImageDisplay {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#colorImageDisplay:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- Page Content -->
<div class="wrapper" class="toggled">
<!-- Sidebar -->
<nav id="sidebar" style='background: #f8f0e8; color:#000000;'>
<!-- sidenav top title -->
<div id='sidebarTop' class="sidebar-header" style='background: #513e2a'>
<!-- sidebar top title text -->
<h3 style='color: #ffffff' style='font-weight: bold; text-size:12px'><strong>asdasdr</strong></h3>
<!-- sidebar expand/collapse button -->
<button id='sidebarCollapse'>
<img src="https://img.icons8.com/ios-filled/24/000000/menu.png"/>
</button>
</div>
<!-- sidenav list of items -->
<ul class="list-unstyled components sideBarOption" style='background: #180d04; color: #ffffff;'>
<!-- about page -->
<li>
About
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" style='background: #cec5ac;'>
<div class="col-sm-12">
<div class="col" >
<div class="row" style=' overflow: auto; margin: auto; background: #917e73; color: #ffffff'>
<div class="col" style=''>
<h1 class="widgettitle"><strong>page title</strong></h1>
</div>
<div class="w-100"></div>
<div class="col" style=''>
<a id='githubUrl' target="_blank" href='https://www.youtube.com/watch?v=0df7k__KEHw'>Github</a>
</div>
</div>
</div>
<div class="col" >
<br>
<br>
<div class="row" style=' margin: auto;'>
<!-- page main content -->
<div class="container-fluid" style='color: #000000'>
<div style="margin-top:-30px;">
<!-- discogstagger output -->
<hr>
<h3>Comma-Separated Metadata Tags:</h3>
<div class='outputDiscogstaggerBox' style='margin-left:15px;'>
<div class='row'>
<textarea class="inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta Song,Why,Mississippi Voodoo,Cool Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,"></textarea>
<button class="btn default copyButton" style="cursor: pointer; max-width: 553px; width: 100%;" id='copyToClipboarad' onclick="copyToClipboard('#inputBox')" type="button">Copy</button>
<div>
<table class="fixed h-100" align="left" style="white-space:nowrap; table-layout: fixed; max-width: 533px;" height="100" id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
<th style="text-align:center; width: 25%;">Tags Type</th>
<th style="text-align:center; width: 46%;">Tags</th>
</tr>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Artist(s)</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseArtistsSliderValue">100%</div>
<div class='float-right' id='releaseArtistsNumber'>0 chars </div>
</div>
</td>
</tr>
<!-- Release Info -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Info</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseInfoSliderValue">100%</div>
<div class='float-right' id='releaseInfoNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Tracklist -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Tracklist</td>
<td>
<div style="text-align:center;">
<input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="tracklistSliderValue">100%</div>
<div class='float-right' id='tracklistNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Combinations</td>
<td>
<div style="text-align:center;">
<input type="range" class="combinationsSlider" id="combinationsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="combinationsSliderValue">100%</div>
<div class='float-right' id='combinationsNumber'>0 chars</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setHoverColor();
//setColors()
async function setHoverColor(){
var sheet = document.createElement('style')
//create css style rule for on-hover tab and on hover github url
let innerHTMLHoverColorStyle = `
/* githubUrl hover */
#githubUrl:hover{
color:blue;
}
#sidebar ul li a:hover {
background: #8c743c;
color: #ffffff;
} `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
}
async function setColors(){
console.log('setcolors()')
let colors = await getColors()
let imgPath = colors.imgPath
//6 possible colors:
//Vibrant
//LightVibrant
//DarkVibrant
//Muted
//LightMuted
//DarkMuted
//get high contrast colors for text
/*
let sidebarColorBackground = colors.colors['DarkVibrant']
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.substring(4, sidebarColorBackground.length-1);
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.split(',');
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground_hex = rgbToHex(213, 23, 36)
console.log("sidebarColorBackground_hex = ", sidebarColorBackground_hex)
let sidebarColorBackground_text = invertColor(sidebarColorBackground_hex)
console.log("sidebarColorBackground_text = ", sidebarColorBackground_text)
*/
//change color display text and set color box hex value
//make all colors visible
//document.getElementById('pageColorsText').style.display = "block";
/*
//color 1
var color1 = colors.colors['Vibrant']
var color1_hex = rgbToHex(color1)
document.getElementById("color1Hex").innerText = `Color 1: ${color1_hex}`
//color 2
var color2 = colors.colors['LightVibrant']
var color2_hex = rgbToHex(color2)
document.getElementById("color2Hex").innerText = `Color 2: ${color2_hex}`
//color 3
var color3 = colors.colors['DarkVibrant']
var color3_hex = rgbToHex(color3)
document.getElementById("color3Hex").innerText = `Color 3: ${color3_hex}`
//color 4
var color4 = colors.colors['Muted']
var color4_hex = rgbToHex(color4)
document.getElementById("color4Hex").innerText = `Color 4: ${color4_hex}`
//color 5
var color5 = colors.colors['LightMuted']
var color5_hex = rgbToHex(color5)
document.getElementById("color5Hex").innerText = `Color 5: ${color5_hex}`
//color 6
var color6 = colors.colors['DarkMuted']
var color6_hex = rgbToHex(color6)
document.getElementById("color6Hex").innerText = `Color 6: ${color6_hex}`
*/
//change display image source
//document.getElementById('colorImageDisplay').src=`${imgPath}`
//setup image modal popup
//imageModalSetup()
//change colors
var sheet = document.createElement('style')
let hoverColor = `#8c743c`;
let innerHTMLHoverColorStyle = `#sidebar ul li a:hover { background: ${hoverColor}; } `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
let innerHTMLStyle = `
/* main page body background color solid
body { background: red; } */
/* sidebar_header_background_color
#sidebarTop {background: ${colors.colors['LightMuted']};} */
/* sidebar_background_color
#sidebar { background: linear-gradient(0deg, ${colors.colors['LightVibrant']}, ${colors.colors['Muted']}); } */
/* active tab color
#currentPage { background: ${colors.colors['LightVibrant']}; } */
/* main page body background color gradient
body { background: linear-gradient(2deg, color3_hex, color6_hex);} */
/* ul ul a { expanded tab background color
.sideBarOption { background: ${colors.colors['Muted']}; } */
/* sidebar hover color */
#sidebar ul li a:hover { background: ${colors.colors['DarkVibrant']}; } `;
//console.log("innerHTMLStyle = ", innerHTMLStyle)
//sheet.innerHTML = innerHTMLStyle
//document.head.appendChild(sheet);
}
function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
// invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
// pad each with zeros and return
return '#' + padZero(r) + padZero(g) + padZero(b);
}
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
//rgb to hex
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(color) {
//color = string like rgb(a,b,c)
//remove string parts
color = color.substring(4, color.length-1);
//turn into arr
color = color.split(',');
return "#" + componentToHex(parseInt(color[0])) + componentToHex(parseInt(color[1])) + componentToHex(parseInt(color[2]));
}
//setup image modal popup
imageModalSetup()
async function imageModalSetup(){
// Get the modal
var modal = document.getElementById("imageModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("colorImageDisplay");
//make image visible
img.style.display = "block";
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
//captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
$('#imageModal').fadeOut(500);
}
}
$(document).ready(function () {
//refresh button
const refreshButton = document.getElementById('refreshButton');
const refreshPage = () => {
location.reload();
}
refreshButton.addEventListener('click', refreshPage)
//if clicking outside modal, close modal
$(document).click(function (e) {
console.log('close modal')
if ($(e.target).is('#imageModal')) {
$('#imageModal').fadeOut(500);
}
});
//on escape key click, close modal
$(document).keydown(function(event) {
if (event.keyCode == 27) {
$('#imageModal').fadeOut(500);
}
});
//side bar collapse event
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
//make request to colors backend
function getColors(){
return new Promise(async function (resolve, reject) {
$.ajax({
type: 'POST',
url: '/getColors',
data: {
type: "varValue",
},
}).then((data) => {
resolve(data)
}).catch((err) => {
reject(err)
});
})
}
</script>
</html>

How do I maintain my menu, and footer in the same place while horizontal scrolling?

edit/update
I have updated my code and fixed some errors. Now I am trying to fix my footer to stay at the bottom, my menu will not center, and I am trying to have the gallery between header and footer without being clipped by the header. Everything was working until I added the horizontal scroll gallery.
I am trying to achieve the layout:
header top
menu in a line
content/horizontal scroll gallery middle
footer/social icons bottom
Please help
codepen link
/**********************************
General
**********************************/
body {
font-family: 'Roboto', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration:none;
}
/**********************************
Heading
**********************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
height: 150px;
position:fixed;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Passion One', cursive;
margin: 15px 0;
font-size: 5em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-family: 'Comfortaa', cursive;
font-size: em;
margin: -5px 0 0;
font-weight: normal;
}
/**********************************
Navigatoin
**********************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
position: fixed;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/**********************************
Body
**********************************/
#content {
height: 100%;
margin: 0 0 0 0;
top: 0;
}
/**********************************
Footer
**********************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
position: fixed;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
.fttext {
text-align: center;
}
/**********************************
Colors
**********************************/
/* site body */
body {
background-color: #C9BD7C;
color: #5B0123;
}
/* green header */
header{
background: #5B0123;
border-color: #5B0123;
}
/* nav background on mobile devices */
nav {
background: #B41C42;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #C86347;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #F8D295;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Passion+One|Roboto:400,500" rel="stylesheet">
</head>
<!-- content goes here-->
<body>
<header>
<a href="index.html" id="logo">
<h1>Natalie Davis</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li>Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="content">
<div id="img-container">
<div class="picture_holder" style="width: 573px;">
<div class="picture" style="width: 543px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" width="543" height="600" alt="">
<div class="captioning">
<div class="title">link - Test caption and link</div>
<div class="caption">stuff </div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 1124px;">
<div class="picture" style="width: 1094px;">
<img src="https://static.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg" width="1094" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 382px;">
<div class="picture" style="width: 352px;">
<img src="http://www.tonyandsonsnurseries.com.au/images/Plants/Frangipani/FruitSaladLarge.jpg" width="352" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 439px;">
<div class="picture" style="width: 409px;">
<img src="http://www.beautifulflowerpictures.com/blog/wp-content/uploads/2008/10/beauty_berry_issai_31.jpg" width="409" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 752px;">
<div class="picture" style="width: 722px;">
<img src="https://freedfromtime.files.wordpress.com/2016/08/farmopolis-flowers-dsc_6487.jpg?w=722&h=600" width="722" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 1094px;">
<div class="picture" style="width: 1064px;">
<img src="https://www.openfootage.net/Openfootage/Vorschau/00299_GelbeBluete/00299_GelbeBluete_Preview_v01.jpg" width="1064" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 1525px;">
<div class="picture" style="width: 1495px;">
<img src="https://static.wixstatic.com/media/09a7b6_b09cf68226774f6d8af396d240573130.jpg/v1/fill/w_1495,h_600,al_c,q_85,usm_0.66_1.00_0.01/09a7b6_b09cf68226774f6d8af396d240573130.webp" width="1495" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 560px;">
<div class="picture" style="width: 530px;">
<img src="http://www.besgroup.org/wp-content/uploads/SunbirdBrTh-Costus-JWee-1.jpg" width="530" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<!-- mousewheel java script -->
<script type="text/javascript">
function handle(delta) {
if (delta < 0)
ScrollSmoothly(10, 10, 'right');
else if (delta > 0)
ScrollSmoothly(10, 10, 'left');
else
;
}
function wheel(event) {
var delta = 0;
if (!event)
event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera)
delta = -delta;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta)
handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
var repeatCount = 0;
function ScrollSmoothly(scrollPos, repeatTimes, direction) {
if (repeatCount < repeatTimes)
if (direction == 'right')
window.scrollBy(20, 0);
else
window.scrollBy(-20, 0);
else {
repeatCount = 0;
clearTimeout(cTimeout);
return;
}
repeatCount++;
cTimeout = setTimeout("ScrollSmoothly('" + scrollPos + "','" + repeatTimes + "','" + direction + "')", 10);
}
/* Initialization code. */
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
</script>
<style type="text/css">
#img-container {
width: 6450px;
}
#img-container #text {
float: left;
width: 675px;
}
#img-container #text p {
width: 600px;
}
#img-container .picture_holder {
float: left;
}
#img-container .picture {
/* padding-top: 100px; */
}
#img-container .captioning .title {
margin-top: 12px;
font-weight: bold;
}
#img-container .captioning .caption {}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</section>
</div>
<footer class="fttext">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
<p>© 2018 Natalie Davis.</p>
</footer>
</body>
</html>

Looking at the code you've posted, in your CSS, your menu styles were targeting an ID, whereas, in your HTML, your menu code had a class instead. Changing the CSS for menu to a class instead of an ID, the styles are then applied, and if the position is changed from absolute to fixed, it then behaves as desired.
.menu {
width: 960px;
margin: 0 auto;
position: fixed;
text-align: center;
background-color: darkred;
}

Categories