Cannot center image - javascript

My image wont center either will any text when I use the center tool in both CSS and HTML it tends to just stay close to the Top left hand corner if anyone has Ideas on what to do please let me know. also I followed a video tutorial on a vertical nav bar so maybe that is interfering with centering my elements that I would like centered
body, html{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
overflow-x: hidden;
}
.logo{
float: right;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #000000;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
font-size: 35px;
text-decoration: none;
color: #000000;
}
.active-nav nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #ffffff
padding: 10px 0;
margin: 35px;
}
a {
text-decoration: none;
color: #ffffff;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: inherit;
}
active-nav .content {
transform: translate3d(200px, 0, 0);
}
video {
position: absolute;
z-index: 0;
background: url(mel.jpg) no-repeat;
background-size: 100% 100%;
top: 0px;
left: 0px; /* fixed to left. Replace it by right if you want.*/
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:1;
}
<doctype.html>
<head>
<title> LAP Aerial Photography </title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<div class="overlay">
<header>
<nav>
<i class="fa fa-bars" aria-hidden="true"></i>
<ul>
<li><i class="fa fa-home" aria-hidden="true"></i>Home</li>
<li><i class="fa fa-user" aria-hidden="true"></i>About</li>
<li><i class="fa fa-phone" aria-hidden="true"></i>Contact</li>
<li><i class="fa fa-money" aria-hidden="true"></i>Pricing</li>
<li><i class="fa fa-picture-o" aria-hidden="true"></i>Gallary</li>
</ul>
</nav>
<div class="logo">
<img src="Final_Logo.png" alt="LAP Aerial Photography">
</div>
</div>
</header>
</div>
<video autoplay="true" loop="true">
<source src="Background.mov" type="video/mov">
<source src="Background.webm" type="video/webm">
</video>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click' , function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault()
});
})();
</script>
</body>
</html>


Follow this Guide! It is well-explained and clear.
EDIT:
I’ve used CSS-transformations to center the image, because flexbox is’t supported in old browsers:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I hope the following code will help you.
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click' , function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault()
});
})();
body, html{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
overflow-x: hidden;
}
#logo > img {
/* center image */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* nav */
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #000000;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
font-size: 35px;
text-decoration: none;
color: #000000;
}
.active-nav nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #ffffff
padding: 10px 0;
margin: 35px;
}
a {
text-decoration: none;
color: #ffffff;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: inherit;
}
active-nav .content {
transform: translate3d(200px, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<title>LAP Aerial Photography</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<header>
<nav>
<i class="fa fa-bars" aria-hidden></i>
<ul>
<li><i class="fa fa-home" aria-hidden></i>Home</li>
<li><i class="fa fa-user" aria-hidden></i>About</li>
<li><i class="fa fa-phone" aria-hidden></i>Contact</li>
<li><i class="fa fa-money" aria-hidden></i>Pricing</li>
<li><i class="fa fa-picture-o" aria-hidden></i>Gallary</li>
</ul>
</nav>
<div id="logo">
<img src="Final_Logo.png" alt="LAP Aerial Photography">
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

Related

align right without overflowing the screen CSS

Ok, I'm trying to make a menu. There is the side menu that is going to have certain elements and the top menu that is going to have other elements. I have a problem when I apply the positio:absolute and then a right:0px to align the icons and the name to the right it goes off screen because my body has a margin-left: 280px
let menuToggleButton = document.getElementById('menu_toggle_button');
let side_menu = document.getElementById('side_menu');
let body = document.getElementById('body');
menuToggleButton.addEventListener('click', function() {
side_menu.classList.toggle('resize-side-menu');
body.classList.toggle('resize-body');
});
*{
margin: 0px;
padding: 0px;
}
body{
display: flex;
}
.side-menu{
position: fixed;
display: inline-flex;
background: #ff000061;
width: 280px;
height: 100vh;
transition: .5s;
}
.resize-side-menu{
width: 50px;
transition: .5s;
}
.body{
display: inline-flex;
width: 100%;
height: 60px;
margin-left: 280px;
background: blue;
height: 2000px;
transition: .5s;
}
.resize-body{
margin-left: 50px;
transition: .5s;
}
.body .content-body{
display: block;
width: 100%;
height: 100%;
}
.body .content-body .header{
width: 100%;
height: 50px;
display: block;
position: fixed;
}
.content-items-header{
display: flex;
align-items: center;
background: brown;
position: relative;
height: 50px;
}
.body .content-body .header .content-items-header .content-search-input{
background: white;
color: rgb(0, 0, 0);
border: 2px solid blue;
}
.body .content-body .header .content-items-header .icons-content{
position:absolute;
right:0px;
}
<!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="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css">
</head>
<body>
<div class="side-menu" id="side_menu">
</div>
<div class="body" id="body">
<div class="content-body">
<div class="header">
<div class="content-items-header">
<button class="fad fa-bars" id="menu_toggle_button">open</button>
<div class="content-search-input">
<input type="text" class="search" id="search">
<i class="fad fa-search"></i>
</div>
<div class="icons-content">
<i class="fas fa-bell"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-cog"></i>
<img src="brain.jpg" alt="" height="35px" width="35px">
<span>Aldahir Ruiz Valdez</span>
</div>
</div>
</div>
<div class="workspace">
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I need them to always be aligned to the right but without leaving the screen

try overflow: hidden; or overflow: auto depending on what you want to achieve. overflow: hidden; will hide all the overflow, and overflow: auto will add a scroll bar if it is needed.

I changed the width of .body and .header to calc(100% - 280px), when pressing the button the width is changed to calc(100% - 50px). I also added a transition: .5s; for changing the width on the .header so it looks smooth (you'll see what I mean when you remove the transition). Hope this is the result you're looking for!
let menuToggleButton = document.getElementById('menu_toggle_button');
let side_menu = document.getElementById('side_menu');
let body = document.getElementById('body');
let header = document.querySelector('.header');
menuToggleButton.addEventListener('click', function() {
side_menu.classList.toggle('resize-side-menu');
body.classList.toggle('resize-body');
header.classList.toggle('resize-header');
});
* {
padding: 0;
margin: 0;
}
body{
display: flex;
}
.side-menu{
position: fixed;
display: inline-flex;
background: #ff000061;
width: 280px;
height: 100vh;
transition: .5s;
}
.resize-side-menu{
width: 50px;
transition: .5s;
}
.body {
width: calc(100% - 280px);
display: inline-flex;
height: 60px;
margin-left: 280px;
background: blue;
height: 2000px;
transition: .5s;
}
.resize-body{
margin-left: 50px;
transition: .5s;
width: calc(100% - 50px);
}
.body .content-body{
display: block;
width: 100%;
height: 100%;
}
.body .content-body .header{
width: calc(100% - 280px);
transition: .5s;
height: 50px;
display: block;
position: fixed;
}
.body .content-body .header.resize-header {
width: calc(100% - 50px);
transition: .5s;
}
.content-items-header{
display: flex;
align-items: center;
background: brown;
position: relative;
height: 50px;
}
.body .content-body .header .content-items-header .content-search-input{
background: white;
color: rgb(0, 0, 0);
border: 2px solid blue;
}
.body .content-body .header .content-items-header .icons-content{
position:absolute;
right:0px;
}
<div class="side-menu" id="side_menu">
</div>
<div class="body" id="body">
<div class="content-body">
<div class="header">
<div class="content-items-header">
<button class="fad fa-bars" id="menu_toggle_button">open</button>
<div class="content-search-input">
<input type="text" class="search" id="search">
<i class="fad fa-search"></i>
</div>
<div class="icons-content">
<i class="fas fa-bell"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-cog"></i>
<img src="brain.jpg" alt="" height="35px" width="35px">
<span>Aldahir Ruiz Valdez</span>
</div>
</div>
</div>
<div class="workspace">
</div>
</div>
</div>

Problem with adding JavaScript code to similar elements

I tried to add JavaScript function to similar element but unfortunately it doesn't work.
I also tried modifying JavaScript code by using querySelectorAll and Foreach but it didn't worked, It add the class but when it come to removing class it broke down and console just kept throwing undefined errors.
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
arrow.classList.add("active_arr");
if (leftContainer.classList.contains("off")) {
leftContainer.classList.remove("off");
leftContainer.classList.add("active");
}
});
cancel.addEventListener("click", ({ target: cancel }) => {
cancel.classList.add("active_arr");
if (leftContainer.classList.contains("active")) {
leftContainer.classList.remove("active");
leftContainer.classList.add("off")
}
});
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to right, #2c5346, #203a43, #0f2027);
}
.center{
display: flex;
justify-content: center;
align-items: center;
}
.main{
height: 100vh;
}
.box{
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(0,0,0,0.288);
border-radius: 23px;
flex-direction: column;
color: white;
position: relative;
overflow: hidden;
}
.box img{
width: 100px;
height: 100px;
border-radius: 50px;
}
.user_name{
margin-bottom: 5px;
font-size: 2rem;
}
.skill{
color: rgba(225,225,225,0.555);
}
/*arrow*/
.arr_container .cancel{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container i{
transform: rotate(45deg);
}
.active_arr{
transform: translate(80%, 80%);
}
.left_container{
position: absolute;
background: #0f2027;
width: 100%;
height: 100%;
border-radius: 23px;
padding: 40px 0 0 20px;
transition: all .4s;
}
.off{
transform: translate(-80%,-80%) rotate(90deg);
}
.active{
transform: translate(0) rotate(0);
}
.left_container p{
margin-bottom: 15px;
font-size: 1.2rem
}
.left_container .skill div{
display: inline-block;
color: rgb(155,155,155);
border:1px solid rgb(155,155,155);
padding: 5px 10px;
font-size: .9rem;
margin: 4px 4px 4px 0;
}
.left_container .icons{
font-size: 1.6rem;
margin-top: 10px;
}
.left_container .icons i{
color: #cfcfcf;
cursor: pointer;
margin-right: 10px;
transition: all .4s;
}
.left_container .icons i:hover{
color: #2c5346;
}
.cancel{
right: 0px;
bottom: 0px;
font-size: 1.5rem;
color: rgb(70,70,70);
position: absolute;
width: 50px;
height: 50px;
background: white;
justify-content: center;
align-items: center;
border-radius: 23px 0 23px 0;
}
.cancel .fas{
position: absolute;
right: 1rem;
bottom: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="cards.css">
<title>cards</title>
</head>
<body>
<div class="main center">
<div class="box center">
<img src="2bb723986d0546f2c26bcc27f712f0e0.jpg">
<div>
<p class="user_name">Mor Maz</p>
<p class="skill">Front-end Developer</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="skill">
<div>Html</div>
<div>Css</div>
<div>React</div>
<div>Node Js</div>
</div>
<div class="icons">
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
</div>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
<div class="box center">
<img src="2bb723986d0546f2c26bcc27f712f0e0.jpg">
<div>
<p class="user_name">Mor Maz</p>
<p class="skill">Front-end Developer</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="skill">
<div>Html</div>
<div>Css</div>
<div>React</div>
<div>Node Js</div>
</div>
<div class="icons">
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
</div>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<script src="cards.js"></script>
<!-- <script>
$(document).ready(function(){
$(".arr_container").click(function(){
$(".left_container").addClass("active")
})
})
</script>
<script>
$(".cancel").click(function(){
$(".left_container").removeClass("active")
})
</script> -->
</body>
</html>
I will appreciate any kind of help
thank you

The classnames and CSS are a mess and you're only adding active_arr to ar and you're only removing active_arr from cl. You're also only selecting one left_container
You should not reach up to change parents if possible; you should iterate parents, iterate their children, etc
This should get you started.
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
});
cancel.addEventListener("click", ({ target: cancel }) => {
});
});

How to let users add movies to list similar to netflix?

I have a movie website I am working on similar to Netflix using HTML, CSS, JS and I am looking for a way to let users add a movie to their mylist, like Netflix, I have tried researching but could not find an answer. There is a working Registration and Login Form. Thanks in Advance guy!
// select the strip
$("section").each(function() {
// change the number of the "li" elements and the strip will be fine anyway
var wUl = $(this).find("ul").width();
var nLi = $(this).find("ul").children().length;
var wElement = 100 / nLi;
$("li").css("width", wElement + "%");
// hover "li"
$(this).find("li").hover(
// mouse In
function() {
$(this).toggleClass("hover");
var scaleFactor = 1.8;
var wBigElement = $(this).width() * scaleFactor;
var translation = (wBigElement - $(this).width()) / 2;
var item = $(this).parent().children();
$(this).css("transform", "scale(" + scaleFactor + ")");
if ($(this).is(":nth-child(1)")) {
item.slice(1,nLi).css("transform", "translate(" + translation * 2 + "px, 0px)");
}
for (var i = 2; i <= nLi - 1; i++) {
if ($(this).is(":nth-child(" + i + ")")) {
item.slice(0,i-1).css("transform", "translate(-" + translation + "px, 0px)")
.end().slice(i).css("transform", "translate(" + translation + "px, 0px)");
}
}
if ($(this).is(":nth-child(" + nLi + ")")) {
item.slice(0,(nLi-1)).css("transform", "translate(-" + translation * 2 + "px, 0px)");
}
// mouse Out
}, function() {
$(this).toggleClass("hover");
$(this).css("transform", "scale(1)");
$("li").not(this).css("transform", "translate(0px, 0px)");
}
);
});
#charset "UTF-8";
* {
box-sizing: border-box;
outline: 0px;
}
ul, ol {
list-style: none;
padding: 0px;
margin: 0px;
}
h2 {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
font-family: "Montserrat";
color: #fff;
background: #141414;
}
main {
display: block;
position: relative;
width: 100%;
height: 100vh;
padding: 4vw;
overflow-x: hidden;
}
.logo {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
padding: 3vw 4vw;
background: rgba(255, 255, 255, 0.02);
}
.logo svg {
display: block;
position: relative;
width: 10vw;
}
.logo svg path {
fill: #E50914;
}
border {
}
section {
display: block;
position: relative;
top: 8vw;
margin-bottom: 4vw;
}
section h2 {
display: block;
width: 100%;
font-size: 1.2vw;
font-weight: 600;
margin-bottom: .8vw;
margin-left: 4px;
}
section ul {
display: block;
position: relative;
width: 98%;
height: auto;
white-space: nowrap;
font-size: 0;
}
section ul:hover li:not(.hover) {
opacity: 0.3;
}
section ul li {
display: inline-block;
height: auto;
padding: 2px;
overflow: hidden;
cursor: pointer;
}
section ul li .img {
display: block;
position: relative;
width: 100%;
height: 0px;
padding-top: 56.25%;
background-size: cover;
transform-origin: top right;
}
section ul li .img:after {
content: "";
display: block;
position: absolute;
top: -10px;
left: -10px;
z-index: 1;
width: calc(100% + 20px);
height: calc(100% + 20px);
opacity: 0;
background: linear-gradient(to bottom, rgba(20, 20, 20, 0) 0%, #141414 100%);
transition: all 0.5s ease 0.2s;
}
section ul li .img img {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 0;
}
section ul li .card {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
z-index: 1;
width: 100%;
height: auto;
padding: 10px;
text-shadow: 0 1px 1px rgba(20, 20, 20, 0.6);
opacity: 0;
}
section ul li .card h3 {
display: block;
width: 100%;
font-size: .7vw;
font-weight: 600;
margin-bottom: .3vw;
}
section ul li .card .info {
display: block;
width: 100%;
margin-bottom: .3vw;
font-size: 0;
}
section ul li .card .info .match {
display: inline-block;
width: auto;
font-size: .5vw;
font-weight: 600;
margin-right: .4vw;
color: #46D369;
}
section ul li .card .info .age {
display: inline-block;
position: relative;
width: auto;
font-size: .5vw;
padding: 0 0.4em;
margin-right: .4vw;
border: solid 1px rgba(255, 255, 255, 0.4);
}
section ul li .card .info .dur {
display: inline-block;
width: auto;
font-size: .5vw;
}
section ul li .card .tags {
display: block;
width: 100%;
}
section ul li .card .tags span {
display: inline-block;
width: auto;
font-size: .5vw;
margin: 0 .3vw 0 0;
}
section ul li .card .tags span:after {
content: "●";
display: inline-block;
margin: 0 0 0 .3vw;
font-size: .8 xvw;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0);
color: rgba(255, 255, 255, 0.4);
}
section ul li .card .tags span:last-child:after {
display: none;
}
section ul li:hover .img:after {
opacity: 1;
}
section ul li:hover img {
opacity: 1;
}
section ul li:hover .card {
opacity: 1;
}
section ul li:first-child {
transform-origin: 0px center;
}
section ul li:last-child {
transform-origin: 100% center;
}
section ul li , li * {
transition: all .5s ease .2s;
}
.container:hover .arrow-right,
.container:hover .arrow-left {
opacity: 1;
transition: 0.2s;
}
.section-frame {
width: 100%;
margin-left: 30px;
margin-right: 30px;
/* border: 2px solid green; */
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- pics by fanart.tv-->
<main>
<div class="section-frame">
<section>
<h2>New Releases <i style="font-size:14px" class="fa"></i></h2>
<div class="right">
<ul>
<li class="item01">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/466272/moviethumb/once-upon-a-time-in-hollywood-5dfeb7beb0d22.jpg)"><img src="https://fanart.tv/fanart/movies/466272/moviebackground/untitled-manson-murders-project-5c58b437a6e65.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Once upon a time in... Hollywood <i style="font-size:.9vw; padding-left: 1% ;" class="fa"></i>
</h3>
<div class="info">
<div class="match">99% Match</div>
<div class="age">TV-14</div>
<div class="dur">2h 40min <i style="font-size:.9vw; padding-left: 120% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Comedy</span><span>Drama</span><span>Action</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item02">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/475557/moviethumb/joker-5db693c454a3e.jpg)"><img src="https://fanart.tv/fanart/movies/475557/moviebackground/joker-5d68337505352.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Joker <i style="font-size:.9vw; padding-left: 73% ;" class="fa"></i></h3>
<div class="info">
<div class="match">95% Match</div>
<div class="age">TV-14</div>
<div class="dur">2h 2min <i style="font-size:.9vw; padding-left: 130% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Crime</span><span>Drama</span><span>Thriller</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item03">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/496243/moviethumb/parasite-5d2d5ab30c73d.jpg)"><img src="https://fanart.tv/fanart/movies/496243/moviebackground/parasite-5df5fb5439d1d.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Parasite <i style="font-size:.9vw; padding-left: 69% ;" class="fa"></i></h3>
<div class="info">
<div class="match">98% Match</div>
<div class="age">TV-14</div>
<div class="dur">2h 12min <i style="font-size:.9vw; padding-left: 130% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Comedy</span><span>Crime</span><span>Drama</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item04">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/359724/moviethumb/ford-v-ferrari-5db74ab5a49b9.jpg)"><img src="https://fanart.tv/fanart/movies/359724/moviebackground/go-like-hell-5d0839e2ecc25.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Ford v. Ferrari <i style="font-size:.9vw; padding-left: 57% ;" class="fa"></i></h3>
<div class="info">
<div class="match">96% Match</div>
<div class="age">TV-PG</div>
<div class="dur">2h 32min <i style="font-size:.9vw; padding-left: 130% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Action</span><span>Biography</span><span>Drama</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item05">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/398978/moviethumb/the-irishman-5ded4b24803d2.jpg)"><img src="https://fanart.tv/fanart/movies/398978/moviebackground/the-irishman-5de15d18d48f4.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>The Irishman<i style="font-size:.9vw; padding-left: 59% ;" class="fa"></i></h3>
<div class="info">
<div class="match">92% Match</div>
<div class="age">TV-MA</div>
<div class="dur">3h 29min <i style="font-size:.9vw; padding-left: 128% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Biography</span><span>Crime</span><span>Drama</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item06">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/492188/moviethumb/marriage-story-5dd0c5d3db138.jpg)"><img src="https://fanart.tv/fanart/movies/492188/moviebackground/marriage-story-5def5bf3a229b.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Marriage Story<i style="font-size:.9vw; padding-left: 56% ;" class="fa"></i></h3>
<div class="info">
<div class="match">94% Match</div>
<div class="age">TV-14</div>
<div class="dur">2h 17min <i style="font-size:.9vw; padding-left: 148% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Comedy</span><span>Drama</span><span>Romance</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 28% ;"></i></div>
</div>
</li>
</ul>
</div>
</section>
</div>
</main>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
This are my codes HTML, CSS, and JS , I am basically looking for a way to make the my list function work, Meaning that a logged in user can have there own separate personal list.Once again thanks in Advance.

Bootstrap 4 pills clicked content showing below and/or not showing

So the problem is when I click on the last two pills "Activity" and "Impact" and shows the information right below the pill content of "STEMuli" (after clicking STEMuli). But the weird part is when you click on "Who we are" and then click on "Activity" or "Impact" it doesn't do anything. I'm pulling my hair out trying to figure this out, I looked for lingering div tags and at one point I had it working when I had only 3 pill options. But right when I threw in this fourth item in it threw it out of sync. Any suggestions?
Also please enjoy my Infinity War placeholder images.
.popover-header{
color:#000000;
}
li{
color:#000000;
}
#border{
border-style: solid;
border-color: black;
}
#row{
overflow: hidden;
}
.logo{
z-index:0;
}
h5{
color: #ffffff;
}
.row {
width: 100%;
z-index: 1;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 50px 0;
padding-bottom: 30px;
padding-bottom: 30px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
margin-right: 10px;
margin-left: 50px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:before {
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}
a:hover{
color: #F1D302;
}
.checkbox-wrapper {
height: 13px;
width: 13px;
}
.card-img-top {
height: 300px;
width: 100%;
}
.btn-xlong {
padding: 10px 50px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.steps-form-3 {
width: 2px;
height: 470px;
position: relative; }
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7; }
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative; }
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px; }
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem; }
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem; }
::-webkit-scrollbar{
width: 0px;
height:5px;
}
::-webkit-scrollbar-thumb{
border-radius:10px;
box-shadow: insert 0 0 6px rgba(0,0,0,.3);
}
.spacing{
padding: 6px;
}
/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/
body {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
background-color: #9E2B25;
color:#FDFFFC;
}
.button{
background-color:#0267C1;
}
.nav-pills .nav-link.active
{
background-color: #0267c1;
}
h3{
color: #ffffff;
}
#cardimg
{
height:300px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link rel="stylesheet" href="/css/profile.css" crossorigin="anonymous">
<script src="/js/moment.js"></script>
</head>
<body>
<!--This is where the logo is-->
<div id="row" class="row h-100 justify-content-center">
<img src="https://boygeniusreport.files.wordpress.com/2018/04/avengers-infinity-war3.jpg?quality=98&strip=all&w=782" class="img-fluid" alt="Responsive image">
</div>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-we-tab" data-toggle="pill" href="#pills-we" role="tab" aria-controls="pills-we" aria-selected="true">
<h3>Who We Are</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-STEM-tab" data-toggle="pill" href="#pills-STEM" role="tab" aria-controls="pills-STEM" aria-selected="false">
<h3>STEMuli</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-activity-tab" data-toggle="pill" href="#pills-activity" role="tab" aria-controls="pills-activity" aria-selected="false">
<h3>Activity</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-impact-tab" data-toggle="pill" href="#pills-impact" role="tab" aria-controls="pills-impact" aria-selected="false">
<h3>Impact</h3>
</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-we" role="tabpanel" aria-labelledby="pills-we-tab">
<blockquote class="blockquote text-center">
<video width="700" controls>
<source src="/img/IMG_0021.mov" type="video/mp4">
<source src="/img/IMG_0021.mov" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<h5>Texas Capital Bank’s mission is helping businesses grow and communities prosper. Our approach to banking is to find the best people, develop the best relationships, and build something great together.</h5></blockquote>
</div>
<div class="tab-pane fade" id="pills-STEM" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<h2 style="padding:20px;">Credit</h2>
<div class="row__inner">
<a href='#.' onclick="redirectbankon()">
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-html="true" title="Description" data-content="The Bank On It module provides an overview of banking services and is designed to help participants build a positive relationship with a financial institution.
">
<div class="tile__media">
<img class="tile__img" src="http://cdn.collider.com/wp-content/uploads/2018/04/avengers-infinity-war-imax-poster.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Bank On It</h5>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="tab-pane fade" id="pills-activity" role="tabpanel" aria-labelledby="pills-activity-tab">PLEASE SHOW!</div>
<div class="tab-pane fade" id="pills-impact" role="tabpanel" aria-labelledby="pills-impact-tab">PLEASE SHOW!</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>

you forgot to close a html tag somewhere, by just adding <\div> once before your 3rd pill, it works perfectly
the first reason we want minimal examples is to prevent that, with a small file and good indentation, you would be able to spot the issue instantly

Acutely i checked all your code there is nothing wrong i just removed the data inside because it looks too mess to see and i just put just a test text and its working fine you can check it here
fiddle: https://jsfiddle.net/ew0xb5m3/

Bootstrap navbar, full height navbar-collapse but with weird animation

I managed to have the div containing the expanded menu, covering the whole view (with 100vh). I noted that the cool animation, while it is expanding itself, is working only till the end of the li content (last menu link), then the speed increases or simply the animation stops working and the navbar-collapse finally reach the end of the view port, but not in a nice way.
Do you know why? Is it a bootstrap javascript functionality? Do you know how to fix it?
I copied the code in this fiddle
body {
padding-top: 53px;
}
.pids-navbar{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 99999;
}
.pids-navbar-toggle .pids-icon-bar {
display: block;
width: 16px;
height: 1px;
border-radius: 1px;
}
.pids-navbar-toggle {
margin-top: 14px;
margin-bottom: 14px;
margin-right: 0px;
float: left;
}
.pids-navbar-nav {
margin: 0px -15px;
font-weight: lighter;
}
.pids-navbar-collapse {
border: 0px;
height: calc(100vh - 60px);
}
.full-height {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-static-top pids-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pids-navbar-toggle" data-toggle="collapse" data-target="#pids-bs-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar pids-icon-bar"></span>
<span class="icon-bar pids-icon-bar"></span>
<span class="icon-bar pids-icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse pids-navbar-collapse" id="pids-bs-navbar">
<ul class="nav navbar-nav pids-navbar-nav full-height">
<li class="active">
Home 1
</li>
<li class="">
Home 2
</li>
<li class="">
Home 3
</li>
</ul>
</div>
</div>
</nav>
Thanks!

I had exactly the same problem and what worked for me is to set the height of the ul to 100vh, not the height of the whole navbar-collapse. See code:
.navbar-collapse ul {
height: 100vh;
}
note: I am using bootstrap 4.

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.wrap {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="wrap">
Home
Home 1
Home 2
Home 3
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>

Categories