li menu title hides when hovering over child ul sub menu - javascript

I am in the process of building this dashboard the problem is when i hover over the li in the sidebar then the sub menu shows but when I take the cursor away from the menu title to the submenu ul then the heading disappears.
Test the code after expanding the window size to full. I have marked the code which is responsible for showing menu on hover with the title "Code Responsible for showing menu on hover"
Also i cant get rid of that black mark over the title
https://i.imgur.com/TVnKPMG.png
var toggler = document.querySelector('.toggler');
var minWidth768 = window.matchMedia("(min-width: 768px)");
var maxWidth767 = window.matchMedia("(max-width: 767px)");
var bdy = document.querySelector('.bdy');
toggler.addEventListener("click", function() {
if(minWidth768.matches) {
bdy.classList.toggle('sidebar-collapse');
} else if(maxWidth767.matches) {
bdy.classList.toggle('sidebar-expand');
}
});
var treeview = document.querySelectorAll(".treeview > .treeview-menu");
var submenu = document.querySelectorAll(".treeview ul");
for (var i=0; i<treeview.length; i++) {
treeview[i].parentNode.addEventListener("click", function(ev) {
ev.preventDefault();
this.classList.toggle("menu-open");
for (var x=0; x<treeview.length; x++){
submenu[x].addEventListener("click", function(e) {
e.stopPropagation();
})
}
});
}
/*HEADER*/
* {
transition: all 300ms linear;
}
.main-header {
position: relative;
max-height: 100px;
z-index: 1030;
}
.main-header .logo {
display: block;
float: left;
height: 50px;
font-size: 20px;
line-height: 50px;
text-align: center;
width: 230px;
padding: 0 15px;
font-weight: 300;
background: #7f224f;
overflow: hidden;
color: #fff;
}
.main-header .navbar {
margin-bottom: 0;
margin-left: 230px;
border: none;
min-height: 50px;
border-radius: 0;
background: #9b265f;
}
.toggler {
margin-top:10px;
font-size: 20px;
color: white;
cursor: pointer;
margin-left: 10px;
}
.logo-mini {
display: none;
}
/*SIDEBAR*/
#main-sidebar{
position: absolute;
top: 0;
left: 0;
padding-top: 70px;
min-height: 100%;
width: 230px;
z-index: 810;
background: #222d32;
}
.user-panel {
position: relative;
width: 100%;
padding: 10px;
overflow: hidden;
}
.user-p-image img {
width: 100%;
max-width: 50px;
height: auto;
}
.user-panel .info {
padding: 5px 5px 5px 15px;
line-height: 1;
position: absolute;
left: 55px;
color: #fff;
}
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-menu > li {
position: relative;
margin: 0;
padding: 0;
}
.sidebar-menu li.header {
padding: 10px 25px 10px 15px;
font-size: 12px;
color: #4b646f;
background: #1a2226;
}
.sidebar a {
color: #b8c7ce;
text-decoration: none;
}
.sidebar-menu > li > a {
padding: 12px 5px 12px 15px;
display: block;
background: #111618;
margin: 6px 0;
}
/*SIDEBAR TOGGLE CODE*/
#media (min-width: 768px) {
.bdy.sidebar-collapse .main-header .logo {
width: 50px !important;
}
.bdy.sidebar-collapse .main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.bdy.sidebar-collapse .main-header .logo > .logo-lg {
display: none;
}
.bdy.sidebar-collapse .main-header .navbar {
margin-left: 50px;
}
.bdy.sidebar-collapse #main-sidebar {
width: 50px !important;
}
.bdy.sidebar-collapse #content-wrapper {
margin-left: 50px;
}
}
#media (max-width: 767px) {
.main-header .logo {
width: 0px;
}
.main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.main-header .logo > .logo-lg {
display: none;
}
.main-header .navbar {
margin-left: 0px;
}
#main-sidebar {
width: 0px !important;
padding-left: 0px !important;
overflow: hidden;
}
#content-wrapper {
margin-left: 0px !important;
}
.bdy.sidebar-expand .main-header .logo {
width: 230px;
}
.bdy.sidebar-expand .main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.bdy.sidebar-expand .main-header .logo > .logo-lg {
display: none;
}
.bdy.sidebar-expand .main-header .navbar {
margin-left: 230px;
}
.bdy.sidebar-expand #main-sidebar {
width: 230px !important;
}
.bdy.sidebar-expand #content-wrapper {
margin-left: 230px;
}
}
/*END OF TOGGLE CODE*/
/*LIST TOGGLE*/
.treeview-menu {
display: none;
}
.treeview.menu-open .treeview-menu{
display: block;
}
/*END OF LIST TOGGLE*/
/*Code Responsible for showing menu on hover*/
#media (min-width: 768px) {
.bdy.sidebar-collapse .sidebar-menu > li > a > span,
.bdy.sidebar-collapse .sidebar-menu > li > .treeview-menu {
display: none !important;
}
.bdy.sidebar-collapse .sidebar-menu > li > a:hover span {
display: block !important;
position: absolute;
top: 0;
width: 180px;
background: #111618;
padding: 12px 0;
left: 49px;
z-index: 99999999999999;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover .treeview-menu {
display: block !important;
background: grey;
position: absolute;
width: 180px;
left: 49px;
z-index: 999999999999;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
position: relative !important;
float: right;
width: auto !important;
left: 180px !important;
top: -22px !important;
z-index: 900;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
top: 44px;
margin-left: 0;
}
}
/*CONTENT*/
#content-wrapper {
padding: 15px;
margin-left: 230px;
min-height: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="bdy">
<div class="wrapper">
<header class="main-header">
<a href="index.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>K</b>Ame</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Ame</b>Xub</span>
</a>
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="toggler"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dinesh Thapa <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</header>
<div id="main-sidebar">
<div class="sidebar">
<div class="user-panel">
<div class="pull-left user-p-image">
<img src="user.jpg" class="img-circle">
</div>
<div class="pull-left info">
<p>Dinesh Thapa</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span class='nme'>Dashboard</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Dashboard v1</li>
<li class="active"><i class="fa fa-circle-o"></i> Dashboard v2</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Layout Options</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Top Navigation</li>
<li><i class="fa fa-circle-o"></i> Boxed</li>
<li><i class="fa fa-circle-o"></i> Fixed</li>
<li><i class="fa fa-circle-o"></i> Collapsed Sidebar</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<span>dsdssdd</span>
</a>
</li>
</ul>
</div>
</div>
<div id="content-wrapper">
<div class="row">
<h1>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</h1>
</div>
<footer style="position: absolute; bottom: 0;">
copyright
</footer>
</div>
</div> <!-- wrapper -->
</div> <!--bdy -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
https://jsfiddle.net/nd9ky5x2/

Related

Load Content in div without refreshing whole page

I am creating a small webapp in flask,where I have a sidebar navigation which consist of all question.
When I click on question,respective question page is rendered in right section.
But,the question which is clicked,is not selected and navigate to the top.
How, I can keep the question which is clicked selected and on focus?
body {
margin: 0;
padding: 0;
font-family: 'montserrat';
background: #e3e9f7;
}
.logo {
padding: 20px;
}
nav ul {
margin: 0;
padding: 0;
height: 100%;
width: 260px;
position: fixed;
top: 0;
left: 0;
background-color: #2b2626;
max-height: 100vh;
overflow-y: auto;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
font-family: 'montserrat';
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
color: #fff;
position: relative;
padding: 15px 0px 15px 25px;
transition: all 0.5s;
}
nav ul li a:before {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
background: #e3e9f7;
border-radius: 40px 0 0 40px;
z-index: -1;
transition: all 1s;
}
nav ul li a:hover {
color: #2b2626;
}
nav ul li a:hover:before {
width: 95%;
}
.wrapper {
margin-left: 260px;
}
.section {
display: grid;
top: 60px;
min-height: 100vh;
text-align: center;
}
.box-area h2 {
text-transform: uppercase;
font-size: 30px;
}
#myBtn {
position: fixed;
bottom: 20px;
left: 200px;
z-index: 99;
font-size: 8px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
nav ul#my-ul {
scroll-behavior: smooth;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function scrollToTop() {
const el = document.getElementById("my-ul");
el.scrollTop = 0;
}
</script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<nav id="my-div">
<ul id="my-ul">
<li class="logo"><img src="https://i.imgur.com/E26Pj54.png"></li>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-book"></i> Book</li>
<li><i class="fa fa-users"></i> Users</li>
<li><i class="fa fa-picture-o"></i> Pictures</li>
<li><i class="fa fa-phone"></i> Contact</li>
<li><i class="fa fa-book"></i> Book</li>
<li><i class="fa fa-users"></i> Users</li>
<li><i class="fa fa-picture-o"></i> Pictures</li>
<li><i class="fa fa-phone"></i> Contact</li>
<li><i class="fa fa-book"></i> Book</li>
<li><i class="fa fa-users"></i> Users</li>
<li><i class="fa fa-picture-o"></i> Pictures</li>
<li><i class="fa fa-phone"></i> Contact</li>
</ul>
</nav>
<div class="wrapper">
<div class="section">
<div class="box-area">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<button id="myBtn" onclick="scrollToTop()">Back To Top Question</button>
</script>
</html>
Use below syntax.
function scrollToTop() {
window.scrollTo(0, 0);
}

jQuery: animating position isn't affecting DOM

I'm trying to animate the top value of my CSS in order to create a dropdown nav when the user clicks the hamburger button.
The CSS doesn't seem to be getting applied to the element when I view in the Chrome inspector, but I've tried the hide() function on the same element and that works fine.
HTML:
<div class="top section-reversed">
<div class="container">
<div class="row">
<div class="col-2">
<span class="icon icon-logo-ctr"></span>
</div>
<div class="col-2 ml-auto">
<a id="asdf" href="#" class="icon icon-hamburger"></a>
</div>
</div>
</div>
</div>
<div class="nav-mobile">
<div class="content">
<a class="icon icon-close" href="#"></a>
<div class="cta-consult">
<h5>000000</h5>
<span class="telephone">000000</span>
</div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Prices</li>
<li>Furniture</li>
<li>Contact</li>
</ul>
<div class="social-header social-header-mobile">
<img src="image/social-whatsapp.png" alt="Placeholder" />
<img src="image/social-instagram.png" alt="Placeholder" />
<img src="image/social-facebook.png" alt="Placeholder" />
<img src="image/social-twitter.png" alt="Placeholder" />
</div>
</div>
</div>
JS:
$(document).ready(function() {
// nav-mobile
$('#asdf').click(function() {
$('.nav-mobile').animate({
'top': '+=540'
},
5000, function() {
// Animation complete.
});
});
});
CSS:
.nav-mobile {
background: #fff;
color: #000;
height: 100%;
left: auto;
overflow: hidden;
position: fixed;
/*top: 65px;*/
top: -605px;
width: 100%;
z-index: 1;
}
.nav-mobile > .content {
padding: 20px;
}
.nav-mobile .icon-close {
color: #797979;
float: right;
padding: 0;
}
.nav-mobile .cta-consult {
clear: both;
}
.nav-mobile .cta-consult h5 {
font-size: 14px;
margin: 0 0 2px;
letter-spacing: 0;
}
.nav-mobile .cta-consult .telephone {
font-size: 30px;
letter-spacing: .02em;
}
.nav-mobile ul {
border-top: #d0d0d0 solid 1px;
display: block;
list-style: none;
margin: 30px 0 20px;
padding: 20px 0 0;
width: 100%;
}
.nav-mobile a {
color: #000;
display: block;
text-transform: uppercase;
letter-spacing: .25em;
padding: 10px 0;
}

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.

Side navigation with top, bottom, and overflow

I'm trying to create a side navigation with a top & bottom. When the window height shrinks, I want the bottom navigation to overlap the top & the top navigation to have a scroll. I put in some CSS gradient to help indicate to the user that items are overflowed but instead I want a scrollbar. I only want the scrollbar if the content is overflowed (likely requires JS but I could be wrong).
Help appreciated
Fiddle here, HTML & CSS below.
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
background-color: #fff;
}
html,
body,
.pane-sidebar {
height: 100%;
}
.pane-sidebar {
background-color: #456081;
position: relative;
text-align: center;
width: 75px;
}
.full-height,
.k-splitter.full-height {
height: 100%;
padding: 0;
margin: 0;
}
.pane-sidebar .sidebar-menu-wrapper {
padding: 1.25rem 0;
min-height: 40rem;
overflow: auto;
}
.pane-sidebar .brand {
padding: 0;
margin: 0;
font-weight: normal;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.875rem;
color: #ffffff;
}
.pane-sidebar ul.primary {
min-height: 26.25rem;
}
.pane-sidebar ul {
list-style: none;
margin: 0;
padding: 2rem 0;
text-align: center;
}
.pane-sidebar ul li {
padding-bottom: 1.5rem;
}
.pane-sidebar ul li.secondary {
padding-bottom: 0.625rem;
}
.pane-sidebar ul li.secondary a,
.pane-sidebar ul li.secondary button {
font-size: 1.125rem;
}
.pane-sidebar ul li a {
font-size: 2rem;
color: #ffffff;
text-decoration: none;
display: block;
}
.pane-sidebar ul li.secondary a span {
font-size: 0.625rem;
}
.pane-sidebar ul li a span {
font-size: 0.75rem;
color: #ffffff;
display: block;
}
.pane-sidebar ul.secondary {
position: absolute;
bottom: 0;
left: 50%;
width: 4rem;
margin-left: -2rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #456081 15%, #456081 100%);
}
.pane-sidebar ul li.secondary a,
.pane-sidebar ul li.secondary button {
font-size: 1.125rem;
}
button {
background-color: transparent;
border: 0 none;
}
.pane-sidebar .show-errors {
cursor: pointer;
}
button {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
overflow: visible;
text-transform: none;
background-color: #4b708b;
color: #fff;
padding: 0.25rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<div class="pane-sidebar full-height">
<div class="sidebar-menu-wrapper">
<h1 class="brand">Brand</h1>
<ul class="primary">
<li>
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
</ul>
<ul class="secondary">
<li class="secondary">
<button class="show-errors" type="button">
<i class="far fa-bell"></i>
</span>
</button>
</li>
<li class="secondary">
<a href="#">
<i class="fas fa-box"></i>
<span>Bottom</span>
</a>
</li>
</ul>
</div>
You could use flexbox on the menu-wrapper. Then make your primary fill the extra space and show a scrollbar:
.sidebar-menu-wrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
.primary {
flex: 1;
overflow-y: auto;
}
Here is a fiddle: https://jsfiddle.net/mehg8uL2/

How to show full width background color on tree node CSS

I have created a tree and there is background-color change on hover of tree node. I want to show background-color on full width like in this example(on click of any node it shows gray color).
But the element on which I am applying the background-color is not full width itself. How can I achieve this?
.qwc-tree__branch {
padding-left: 40px !important;
font-size: 12px;
}
.tree__root {
padding-left: 0 !important;
}
.tree__node {
list-style-type: none;
margin: 0;
padding-left: 5px;
position: relative
}
.tree__node::before,
.tree__node::after {
content: '';
left: -20px;
position: absolute;
right: auto
}
.tree__node::before {
border-left: 1px dotted #e0e0e0;
bottom: 50px;
height: 100%;
top: 0;
width: 1px
}
.tree__node::after {
border-top: 1px dotted #e0e0e0;
height: 20px;
top: 15px;
width: 25px
}
.tree__root>.tree__root-node::before {
border: 0;
}
.tree__root>.tree__root-node::after {
border: 0;
}
.tree__node-header:hover {
background-color: lightblue;
}
.tree__node-name {
display: inline-flex;
align-items: center;
padding: 3px 8px;
text-decoration: none
}
.tree__node-name--icon {
margin: 0 5px 0 3px;
color: $primary;
}
.tree__node-action {
cursor: pointer;
float: right;
margin-right: 15px
}
tree .tree__node:last-child::before {
height: 30px
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="tree__branch tree__root">
<li class="tree__node tree__root-node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> India
</span>
<i class="material-icons tree__node-action">minimize</i>
</div>
<ul class="tree__branch">
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Punjab
</span>
</div>
</li>
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Haryana
</span>
</div>
</li>
</ul>
</li>
</ul>
You can use pseudo element to simulate the background and make it overflowing:
.tree__node-header:after {
content:"";
position:absolute;
top:0;
left:-40px; /*adjust this*/
right:0;
bottom:0;
z-index:-1;
}
Full code:
.qwc-tree__branch {
padding-left: 40px !important;
font-size: 12px;
}
.tree__root {
padding-left: 0 !important;
}
/*added this*/
.tree__root>.tree__root-node>.tree__node-header {
overflow:hidden;
}
/**/
.tree__node {
list-style-type: none;
margin: 0;
padding-left: 5px;
position: relative
}
.tree__node::before,
.tree__node::after {
content: '';
left: -20px;
position: absolute;
right: auto
}
.tree__node::before {
border-left: 1px dotted #e0e0e0;
bottom: 50px;
height: 100%;
top: 0;
width: 1px
}
.tree__node::after {
border-top: 1px dotted #e0e0e0;
height: 20px;
top: 15px;
width: 25px
}
.tree__root>.tree__root-node::before {
border: 0;
}
.tree__root>.tree__root-node::after {
border: 0;
}
.tree__node-header:hover,
.tree__node-header:hover:after { /*Added this*/
background-color: lightblue;
}
/*Added this*/
.tree__node-header {
position:relative;
}
.tree__node-header:after {
content:"";
position:absolute;
top:0;
left:-45px;
right:0;
bottom:0;
z-index:-1;
}
/* */
.tree__node-name {
display: inline-flex;
align-items: center;
padding: 3px 8px;
text-decoration: none
}
.tree__node-name--icon {
margin: 0 5px 0 3px;
color: $primary;
}
.tree__node-action {
cursor: pointer;
float: right;
margin-right: 15px
}
tree .tree__node:last-child::before {
height: 30px
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="tree__branch tree__root">
<li class="tree__node tree__root-node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> India
</span>
<i class="material-icons tree__node-action">minimize</i>
</div>
<ul class="tree__branch">
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Punjab
</span>
</div>
</li>
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Haryana
</span>
</div>
</li>
</ul>
</li>
</ul>

Categories