New coder here, im trying to create a navigation bar that gets hidden on scroll-down and pops back down when i scroll-up. I followed this video tutorial, and it works, but when the navigation bar is supposed to be hidden, theres still a bit left on the screen. Any help would be appreciated.
The issue can be recreated by scrolling up and down on the code snippet.
// JavaScript Document
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function(e) {
e.preventDefault();
document.querySelector(this.getAttribute("href")).scrollIntoView({
behavior: "smooth"
});
});
});
#charset "utf-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
;
}
.noscroll::-webkit-scrollbar {
display: none;
}
.banner {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../Images/home banner.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.navbar {
width: 100%;
margin: auto;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
transition: all 300ms ease-in-out;
background-color: red;
}
.logo {
width: 120px;
cursor: pointer;
color: white;
margin-left: 115px;
}
.logo h1 {
text-decoration: underline;
text-decoration-color: #B575B3;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
.navbar ul li::after {
content: '';
height: 3px;
width: 0;
background: #89D7FF;
position: absolute;
left: 0;
bottom: -5px;
transition: 0.3s;
}
.navbar ul li:hover::after {
width: 100%;
}
.scroll-down header {
transform: translate3d(0, -100%, 0);
}
.scroll-up header {
filter: drop-shadow(0 -10px 20px rgb(64, 63, 63));
}
.banner2 {
width: 100vw;
height: 1000vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../Images/1560126.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="testcss.css">
<body class="noscroll">
<div class="banner" id="Home">
<div class="navbar">
<header class="navbar">
<h1 class="logo" style="font-size: 50px; text-decoration: underline; text-decoration-color: #B575B3; ">Networks</h1>
<ul>
<li>Home</li>
<li>Networks</li>
<li>Issues and Communication</li>
<li>Useful Links</li>
<li>Contact</li>
</ul>
</header>
</div>
</div>
<div class="banner2"></div>
<script src="main.js"></script>
<script>
const body = document.body;
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset
if (currentScroll <= 0) {
body.classList.remove("scroll-up")
}
if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
body.classList.remove("scroll-up")
body.classList.add("scroll-down")
}
if (currentScroll < lastScroll && body.classList.contains("scroll-down")) {
body.classList.remove("scroll-down")
body.classList.add("scroll-up")
}
lastScroll = currentScroll;
})
</script>
</body>
</html>
Navbar should hide not header. Change it
.scroll-down header {
transform: translate3d(0, -100%, 0);
}
to it
.scroll-down .navbar {
transform: translate3d(0, -100%, 0);
}
// JavaScript Document
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function(e){
e.preventDefault();
document.querySelector(this.getAttribute("href")).scrollIntoView({
behavior : "smooth"
});
});
});
#charset "utf-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;;
}
.noscroll::-webkit-scrollbar {
display: none;
}
.banner {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url("../Images/home banner.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.navbar{
width: 100%;
margin: auto ;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
transition: all 300ms ease-in-out;
background-color: red;
}
.logo {
width: 120px;
cursor: pointer;
color: white;
margin-left: 115px;
}
.logo h1 {
text-decoration: underline;
text-decoration-color: #B575B3;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
.navbar ul li::after{
content: '';
height: 3px;
width: 0;
background: #89D7FF;
position: absolute;
left: 0;
bottom: -5px;
transition: 0.3s;
}
.navbar ul li:hover::after {
width: 100%;
}
.scroll-down .navbar {
transform: translate3d(0, -100%, 0);
}
.scroll-up header {
filter: drop-shadow(0 -10px 20px rgb(64, 63, 63));
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="testcss.css">
<body class="noscroll" style="height:10000px;">
<div class="banner" id="Home">
<div class="navbar">
<header class="navbar">
<h1 class="logo" style= "font-size: 50px; text-decoration: underline; text-decoration-color: #B575B3; ">Networks</h1>
<ul>
<li>Home</li>
<li>Networks</li>
<li>Issues and Communication</li>
<li>Useful Links</li>
<li>Contact</li>
</ul>
</header>
</div>
</div>
<script src="testjs.js"></script>
<script>
const body = document.body;
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset
if (currentScroll <= 0) {
body.classList.remove("scroll-up")
}
if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
body.classList.remove("scroll-up")
body.classList.add("scroll-down")
}
if (currentScroll < lastScroll && body.classList.contains("scroll-down")) {
body.classList.remove("scroll-down")
body.classList.add("scroll-up")
}
lastScroll = currentScroll;
})
</script>
</body>
</html>
You have two tag with class navbar, a div and a header, but your class that hide your navbar only select header so you have two solution :
remplace you scroll-up and scroll-down css to :
.scroll-down .navbar{
transform: translate3d(0, -100%, 0);
}
.scroll-up .navbar{
filter: drop-shadow(0 -10px 20px rgb(64, 63, 63));
}
or remove class navbar from div
Related
My (epic) navbar gets messed up when the window is to small, how can I have it shrink proportionally to the page? I've tried a few things but it just shrinks the text size, but the text still ends up longer than the width of the window, with the title in the top left overlapping onto the text.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<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">
</head>
<body>
<header id="nav-wrapper">
<nav id="nav">
<div class="nav left">
<span class="gradient skew">
<h1 class="logo un-skew">RiseUpOnario.ca</h1>
</span>
<button id="menu" class="btn-nav"><span class="fas fa-bars"></span></button>
</div>
<div class="nav right">
<span class="nav-link-span"><span class="u-nav">Home</span></span>
<span class="nav-link-span"><span class="u-nav">Blog</span></span>
<span class="nav-link-span"><span class="u-nav">Join</span></span>
<span class="nav-link-span"><span class="u-nav">Donate</span></span>
<span class="nav-link-span"><span class="u-nav">MPP Finder</span></span>
<span class="nav-link-span"><span class="u-nav">About Us</span></span>
<span class="nav-link-span"><span class="u-nav">Contact</span></span>
</div>
</nav>
</header>
<main>
<section id="home">
</section>
<section id="blog">
</section>
<section id="join">
</section>
<section id="donate">
</section>
<section id="mppfinder">
</section>
<section id="aboutus">
</section>
<section id="contact">
</section>
</main>
</body>
</html>
<style>
/*-------------Reset-------------*/
button {
background: none;
box-shadow: none;
border: none;
cursor: pointer;
}
button:focus,
input:focus {
outline: 0;
}
html {
scroll-behavior: smooth;
}
/*-------------Layout-------------*/
body {
line-height: 1.5em;
padding: 0;
margin: 0;
}
section {
height: 100vh;
}
#home {
background-color: #ddd;
}
#blog {
background-color: #aaa;
}
#join {
background-color: #888;
}
#donate {
background-color: #666;
}
#mppfinder {
background-color: #ddd;
}
#aboutus {
background-color: #aaa;
}
#contact {
background-color: #666;
}
/*-------------Helpers-------------*/
.skew {
transform: skew(-20deg);
}
.un-skew {
transform: skew(20deg);
}
/*-------------Nav-------------*/
#nav-wrapper {
overflow: hidden;
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#nav {
background-color: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
font-family: "Saira Semi Condensed", sans-serif;
height: 4em;
overflow: hidden;
}
#nav.nav-visible {
height: 100%;
overflow: auto;
}
.nav {
display: flex;
height: 4em;
line-height: 4em;
flex-grow: 1;
}
.nav-link,
.logo {
padding: 0 1em;
}
span.gradient {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
padding: 0 1em;
position: relative;
right: 1em;
margin-right: auto;
}
span.gradient:hover {
animation-name: logo-hover;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.17, 0.57, 0.31, 0.85);
}
h1.logo {
font-weight: 300;
font-size: 1.75em;
line-height: 0.75em;
color: #fff;
}
h1.logo a, a:active, a:hover, a:visited {
text-decoration: none;
color: #fff;
}
.nav-link {
text-transform: uppercase;
text-align: center;
border-top: 0.5px solid #ddd;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #e9b1a7;
}
a:hover {
text-decoration: underline;
}
.right {
display: flex;
flex-direction: column;
height: 100%;
}
.btn-nav {
color: #e9b1a7;
padding-left: 2em;
padding-right: 2em;
}
#media (min-width: 800px) {
#nav-wrapper {
overflow: hidden;
}
#nav {
overflow: hidden;
flex-direction: row;
}
.nav-link {
border-top: none;
}
.right {
overflow: hidden;
flex-direction: row;
justify-content: flex-end;
position: relative;
left: 1.5em;
height: auto;
}
.btn-nav {
display: none;
}
.nav a:link.active, a:visited.active, a:active.active {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
color: #fff;
}
.nav-link-span {
transform: skew(20deg);
display: inline-block;
}
.nav-link {
transform: skew(-20deg);
color: #777;
text-decoration: none;
}
.nav-link:last-child {
padding-right: 3em;
}
a:hover.nav-link:not(.active) {
color: #444;
background: #ddd;
background: linear-gradient(45deg, #fff, #ddd);
}
}
#keyframes logo-hover {
20% {
padding-right: 0em;
}
100% {
padding-right: 5em;
}
}
</style>
<script>
var util = {
mobileMenu() {
$("#nav").toggleClass("nav-visible");
},
windowResize() {
if ($(window).width() > 800) {
$("#nav").removeClass("nav-visible");
}
},
scrollEvent() {
var scrollPosition = $(document).scrollTop();
$.each(util.scrollMenuIds, function (i) {
var link = util.scrollMenuIds[i],
container = $(link).attr("href"),
containerOffset = $(container).offset().top,
containerHeight = $(container).outerHeight(),
containerBottom = containerOffset + containerHeight;
if (
scrollPosition < containerBottom - 20 &&
scrollPosition >= containerOffset - 20
) {
$(link).addClass("active");
} else {
$(link).removeClass("active");
}
});
}
};
$(document).ready(function () {
util.scrollMenuIds = $("a.nav-link[href]");
$("#menu").click(util.mobileMenu);
$(window).resize(util.windowResize);
$(document).scroll(util.scrollEvent);
});
</script>
Try implementing % in your stylesheet for fonts and divs!
For example, if you want a line of text or a container within a container to adjust in size when the parent container shrinks, you can have your interior elements set to something like
elementName{ max-width: 75%}
See if that helps with some of the elements inside the navWrapper.
Set the navbar's height to 10vh or less/more. ##vh = ##% of display height. There is also 100vw. = ##% of display width.
I'm making a menu but I have a problem with my JavaScript.
I messed up the JavaScript file, but it works in general. The thing is that when you load the page and your with is less than 858px and then you click in one of the items of the menu, if then you make your width larger the menu disappears. So I want to not disappear it.
JavaScript, HTML and CSS:
const mediaQuery = window.matchMedia("(max-width: 858px)");
// Check if the media query is true
if (mediaQuery.matches) {
// function that hides the menu when a "ul li a" is clicked, then, if you click it again, it recovers its form
function hide() {
document.getElementById("hidden").style.display = "none";
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
// function that shows the menu when you click the hamburguer (fas fa-bars)
function show() {
document.getElementById("hidden").style.display = "inherit";
}
} else {
function hide() {
document.getElementById("hidden").style.display = "inherit";
document.getElementsByClassName("checkbtn")[0].click();
}
function show() {
document.getElementById("hidden").style.display = "inherit";
}
}
// Initial check
handleTabletChange(mediaQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<!-- (fonts.google.com) -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
<script src="./main.js"></script>
<!-- material design icons -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- hamburger menu -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
/* menu styling */
nav {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
height: 55px;
width: 100%;
border-radius: 0;
position: fixed;
z-index: 100;
}
label.logo {
color: white;
font-size: 25px;
line-height: 55px;
padding: 0 100px;
font-weight: bold;
}
label.logo a {
color: white;
}
label.logo a:hover {
box-shadow: none;
background: none;
}
nav ul {
float: right;
margin-right: 20px;
border-radius: 0;
}
nav ul li {
display: inline-block;
line-height: 55px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 14px;
padding: 7px 13px;
}
nav ul li a:hover {
background-color: #2c3e50;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 55px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/* menu media queries */
#media (max-width: 952px) {
label.logo {
font-size: 25px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 55px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 17px;
}
nav ul li a:hover {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
box-shadow: inset 0 0 0 25px rgb(254, 72, 64);
}
#check:checked ~ ul {
left: 0;
}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
transition: all 0.6s;
}
body {
background-color: #2c3e50;
color: white !important;
font-family: "Ubuntu", sans-serif;
}
.cssAnimation:hover {
transform: translateY(10px) !important;
}
</style>
</head>
<body id="body">
<!-- menu -->
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn"
><i class="fas fa-bars" onclick="show()"></i
></label>
<label class="logo">Name</label>
<ul id="hidden">
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</nav>
</body>
</html>
The function "hide()" makes the navigation disappear. For example, you said in the navigation that if you click on the list element, the navigation should disappear. If you remove the "display: none" everything should work as you wanted it to.
function hide() {
document.getElementById("hidden").style.display = "none";
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
Try it this way:
const mediaQuery = window.matchMedia("(max-width: 858px)");
// Check if the media query is true
if (mediaQuery.matches) {
// function that hides the menu when a "ul li a" is clicked, then, if you click it again, it recovers its form
function hide() {
// to do an autoclick to class "checkbtn"
document.getElementsByClassName("checkbtn")[0].click();
}
// function that shows the menu when you click the hamburguer (fas fa-bars)
function show() {
document.getElementById("hidden").style.display = "inherit";
}
} else {
function hide() {
document.getElementById("hidden").style.display = "inherit";
document.getElementsByClassName("checkbtn")[0].click();
}
function show() {
document.getElementById("hidden").style.display = "inherit";
}
}
// Initial check
handleTabletChange(mediaQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<!-- (fonts.google.com) -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"
rel="stylesheet"
/>
<!-- material design icons -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- hamburger menu -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
/* menu styling */
nav {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
height: 55px;
width: 100%;
border-radius: 0;
position: fixed;
z-index: 100;
}
label.logo {
color: white;
font-size: 25px;
line-height: 55px;
padding: 0 100px;
font-weight: bold;
}
label.logo a {
color: white;
}
label.logo a:hover {
box-shadow: none;
background: none;
}
nav ul {
float: right;
margin-right: 20px;
border-radius: 0;
}
nav ul li {
display: inline-block;
line-height: 55px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 14px;
padding: 7px 13px;
}
nav ul li a:hover {
background-color: #2c3e50;
transition: 0.5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 55px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/* menu media queries */
#media (max-width: 952px) {
label.logo {
font-size: 25px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 55px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 17px;
}
nav ul li a:hover {
background: linear-gradient(
90deg,
rgba(255, 136, 75, 1) 0%,
rgba(254, 72, 64, 1) 100%
);
box-shadow: inset 0 0 0 25px rgb(254, 72, 64);
}
#check:checked ~ ul {
left: 0;
}
}
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
transition: all 0.6s;
}
body {
background-color: #2c3e50;
color: white !important;
font-family: "Ubuntu", sans-serif;
}
.cssAnimation:hover {
transform: translateY(10px) !important;
}
</style>
</head>
<body id="body">
<!-- menu -->
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn"
><i class="fas fa-bars" onclick="show()"></i
></label>
<label class="logo">Name</label>
<ul id="hidden">
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</nav>
</body>
</html>
Happy Coding!
I have been working on a Netflix themed HTML video player and I was wondering if there was a way to be able to make it into a video player like max player where you can play any video instead of the one you code into the HTML. ..........................................................................................................................................................................................................
Code:
HTML:
<!DOCTYPE html>
<html lang="en">
<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">
<title>Netflix video player</title>
<link rel="stylesheet" href="https://cdnjs.cloudlflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="c-video">
<video class="video" src="video.mp4"></video>
<div class="controls">
<div class="red-bar">
<!--
inputs are self-closing tags. You don't need a closing tag for it!
Self-closing tags are single tagged elements - you only need to
add a slash before '>', like so: <input />
-->
<input class="red-juice" type="range" min="1" max="100" step="1" value="1" />
</div>
</div>
<div class="buttons">
<button id="play-pause"></button>
</div>
<div class="title"></div>
<div class="goback">
<button class="back" onclick="goBack()"></button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
html,body {
margin:0;
padding:0;
}
.container {
display: flex;
background-color: #000000;
justify-content: center;
align-items: center;
height: 100vh;
}
.video {
width: 100%;
}
.c-video {
position: fixed;
width: 100%;
height: 100;
position: relative;
overflow: hidden;
}
.c-video:hover .title {
transform: translateY(0);
}
.c-video:hover .controls {
transform: translateY(0);
}
.c-video:hover .buttons {
top: 50%;
left: 50%;
transform: translate(240%, -50%);
}
.title {
display: flex;
position: absolute;
top: 0;
height: 120px;
width: 100%;
flex-wrap: wrap;
background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.01));
transform: translateY(-100%);
transition: all .2s;
}
.controls {
display: flex;
position: absolute;
bottom: 0;
height: 70px;
width: 100%;
flex-wrap: wrap;
background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.9));
transform: translateY(100%);
transition: all .2s;
}
.c-video:hover .back {
transform: translate(20%, 0);
}
.back {
position: absolute;
background: none;
outline: 0;
border: 0;
top: 5%;
cursor: pointer;
transform: translate(-200000%, 0);
}
.back::before {
content: "\f060";
font-weight: 900;
font-family: "Font Awesome 5 Free";
display: inline-block;
font-size: 200%;
color: #ffff;
}
.buttons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-99999%, -50%);
}
.buttons button {
background: none;
height: 45px;
border: none;
outline: 0;
cursor: pointer;
transform: translate(-320%, 50%);
}
.buttons button:before {
content: "\f04b";
font-weight: 900;
font-family: "Font Awesome 5 Free";
display: inline-block;
font-size: 300%;
color: #ffff;
-webkit-font-smoothing: antialiased;
}
.buttons button.play:before {
content: "\f04b";
font-weight: 900;
font-family: 'Font Awesome 5 Free';
}
.buttons button.pause:before {
content: "\f04c";
font-weight: 900;
font-family: 'Font Awesome 5 Free';
}
/* Progress bar container */
.red-bar {
height: 2px;
margin-top: 15px;
margin-bottom: -15px;
background-color: rgba(0, 0, 0, 0.4);
margin-left: 10px;
margin-right: 10px;
width: 100%;
}
/* This represents the progress bar */
.red-juice {
position: relative;
width: 100%;
height: 2px;
/* thumbHeight + (2 x thumbBorderWidth)*/
background-image: linear-gradient(to right, red 1%, rgba(0, 0, 0, 0.4) 1%);
-webkit-appearance: none;
/*remove the line*/
outline: none;
top: -12px;
margin-left: 1px;
margin-right: 100px;
}
.red-juice::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 20px;
}
.red-juice::-webkit-slider-thumb {
-webkit-appearance: none;
background: red;
/*thumbColor*/
width: 15px;
/* thumbHeight + (2 x thumbBorderWidth)*/
height: 15px;
/* thumbHeight + (2 x thumbBorderWidth)*/
border-radius: 100%;
margin-top: 1px;
/* -[thumbHeight + (2 x thumbBorderWidth) - trackHeight]/2*/
cursor: pointer;
border: 0px solid #fff;
/*border-width should be equal to thumbBorderWidth if you want same border width across all browsers and border-color should match the background*/
transition: 0.3s;
}
Javascript:
var video = document.querySelector(".video");
var juice = document.querySelector(".red-juice");
var btn = document.getElementById("play-pause");
function togglePlayPause() {
if (video.paused) {
btn.className = 'pause';
video.play();
} else {
btn.className = 'play';
video.pause();
}
}
btn.onclick = function(params) {
//video.fastSeek(570); // 9:30
// video.currentTime = 570; //test
togglePlayPause();
}
video.addEventListener('timeupdate', function() {
if (video.ended) {
btn.className = "play";
// At the end of the movie, reset the position to the start and pause the playback.
video.currentTime = 0;
togglePlayPause();
}
});
function slidingProgress() {
// this.value will not work here, since it points to the global window obj
// so I'm using juice.value instead
// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#Function_context
juice.style.background = 'linear-gradient(to right, red ' + juice.value * 100 / juice.max + '%, rgba(0, 0, 0, 0.4) ' + juice.value + '%, rgba(0, 0, 0, 0.4) 100%)'
}
video.addEventListener('timeupdate', () => {
juice.value = video.currentTime / video.duration * juice.max
slidingProgress() // Call your function here to update .red-juice
})
juice.addEventListener('change', () => {
video.currentTime = video.duration * juice.value / juice.max
})
// And finally assign it to juice.oninput
juice.oninput = slidingProgress;
// you're not specifying any events to listen to here, so it wouldn't work
// juice.addEventListener(slidingProgress);
function goBack() {
window.history.back();
}
so I'm having issues with closing my mobile nav hamburger menu when a link is clicked. Only my top link is clickable right now just FYI.
The answer is on the tip of my tongue but I'm not quite there. I think mainly it's a syntax issue on my end. So yes the menu on mobile opens and closes when clicking the menu, but it doesn't close when a link is clicked.
I've looked all over, but all I could find were jQuery answers.
<!DOCTYPE html>
<html lang="en">
<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="stylesheet" href="css\style.css">
<title>eddiepearsonUX</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li>Audio UX Study</li>
<li>Web App UX</li>
<li>Contact</li>
</ul>
</nav>
<section class="intro-section">
<h1 class="name">
<span>eddie</span>
<span>Pearson</span>
</h1>
<h3 class="intro">
<p>Audio<br>and Visual</p>
<p>UX</p>
</h3>
</section>
<h3 class="content-title">
<p>Audio UX Study</p>
</h3>
<ul style="list-style-type: none" id="Audio-UX-Study"class="content">
<li class="main-img"><img src="https://www.dl.dropboxusercontent.com/s/rktj2nhj07l2ne7/20191206-Screenshot%20%28223%29.jpg?dl=0" alt="Ableton screen with wavforms and effects stack"></li>
<li class="second-img"><img src="https://www.dl.dropboxusercontent.com/s/j1aipb71ccj3o64/Screenshot%20%28225%29.png?dl=0" alt="Wavforms from audio"></li>
<li class="copy">
</li>
<li class="main-img"></li>
<li class="second-img"></li>
<li class="copy">
</li>
</ul>
<script src="js\app.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Merriweather', serif;
}
body {
font-family: sans-serif;
background-color: #e6e6e0;
}
/* NAVIGATION */
nav {
height: 10vh;
background: #e6e6e0;
/* position: sticky; */
}
.name-div {
position: absolute;
width: 50%;
top: 1.8rem;
left: 2rem;
}
.name {
color: rgb(82, 82, 56);
font-size: calc(0.2rem + 1.1rem);
}
.nav-links {
display: flex;
position: relative;
list-style: none;
max-width: 75vw;
height: 100%;
justify-content: end;
align-items: center;
margin: auto;
}
.nav-links li a {
color:rgb(82, 82, 56);
font-weight: bold;
text-decoration: none;
font-size: 18px;
padding-left: 1em;
}
#media screen and (max-width: 768px) {
.nav-links {
position: fixed;
background: #e6e6e0;
height: 100vh;
width: 100%;
flex-direction: column;
justify-content: space-around;
margin-left: auto;
clip-path: circle(100px at 90% -20%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1100px at 90% -10%);
-webkit-clip-path: circle(1100px at 90% -10%);
pointer-events: all;
max-width: 95%;
}
.line {
width: 30px;
height: 3px;
background: rgb(82, 82, 56);
margin: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links li {
opacity: 0;
}
.nav-links a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.1s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
}
/* INTRO SECTION */
.intro-section {
max-width: 75vw;
margin: auto;
/* background-color: #fff; */
}
.intro-section .name {
padding: 2rem 0 2rem 0rem;
font-size: calc(0.8rem + 3vw);
}
.intro-section .name span:nth-of-type(1) {
color: rgb(174, 177, 156);
}
.intro {
color:rgb(174, 177, 156);
font-size: calc(0.6rem + 2vw);
}
.intro p:nth-of-type(2) {
font-size: calc(0.6rem + 3vw);
color:rgb(82, 82, 56);
}
/* CONTENT SECTION */
.content-title {
display: block;
margin: auto;
margin-top: 5rem;
margin-bottom: 2rem;
max-width: 75vw;
font-size: calc(0.6rem + 1vw);
color:rgb(82, 82, 56);
}
.content {
max-width: 75vw;
margin: 3rem auto;
display: grid;
width: 100%;
height: auto;
display: grid;
margin-bottom: 3em;
grid-gap: 1em;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.main-img {
grid-column: 1 / 2;
}
.content > li > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
const whatever = document.querySelectorAll('.nav-links li a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle('fade');
});
});
The only thing you're listening for clicks on is the hamburger element.
Try adding a listener on the navLinks element, like so:
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
const whatever = document.querySelectorAll('.nav-links li a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle('fade');
});
});
navLinks.addEventListener('click', () => {
navLinks.classList.toggle('open')
links.forEach(link => {
link.classList.toggle('fade');
});
})
There might be more tweaks you need to make, but this should get you started.
I am trying to make a searchbar using HTML/CSS/Jquery. Almost everything works fine, except for 1 thing: when the input field resizes, the mouse stays in hover-state, until I move the mouse. Why isn't my mouse changing to default after the element resized and how can i fix this?
HTML snippet:
$(document).ready(function () {
'use strict';
var searchClicked = false;
$('.menu').on('click', function () {
$('.menu-panel').animate({'left' : '0px'}, 'ease', 'swing');
$('.overlay').toggle();
});
$('.overlay').on('click', function () {
$('.menu-panel').animate({'left' : -$('.menu-panel').width() - 200});
$('.overlay').toggle();
});
$('.search').on('click', function (e) {
if (!searchClicked) {
$(this).animate({
'padding-right' : '180px'
}, 'ease');
$(this).css({
'background-color' : 'rgba(233, 30, 99, 1)',
'color' : '#fff'
});
$('#search-bar').animate({ 'width' : '150px'}, 'ease').focus();
searchClicked = true;
} else {
$('.search').animate({
'padding-right' : '0px'
}, 'ease');
$('#search-bar').css({ 'width' : '0px'});
$(this).delay(100).queue(function (next) {
$(this).css({
'background-color' : '#fff',
'color' : '#acacac'
});
next();
});
searchClicked = false;
}
});
});
html, body {
font-family: 'Roboto', sans-serif;
background-color: #eef2f4;
}
.left { float: left !important; }
.right { float: right !important; }
li {
list-style: none;
}
a {
text-decoration: none;
color: #212121;
}
.pink { color: rgba(233, 30, 99, 1);}
textarea:focus, input:focus{
outline: 0;
}
.wrapper {
position: relative;
width: 1280px;
margin: 0 auto;
}
.overlay{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-color: rgba(189,195,199, 0.5);
z-index: 98;
display: none;
}
/*============================================================*/
/*========================= HEADER BAR ========================*/
/*============================================================*/
header {
position: relative;
width: 100%;
height: 75px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
text-align: center;
}
.logo {
position: relative;
line-height: 75px;
font-size: 22px;
font-weight: 700;
color: rgba(33, 33, 33, 0.8);
}
.logo:hover { color: rgba(33, 33, 33, 0.6); }
#search-bar {
position: absolute;
top: 28px;
right: 30px;
border: none;
font-size: 16px;
border-bottom: 1px solid #fff;
background-color: rgba(233, 30, 99, 0.01);
color: #fff;
width: 0px;
z-index: 999;
}
.navlinks {
display: block;
position: absolute;
top: 0;
line-height: 75px;
width: 65px;
height: 100%;
color: #acacac;
}
.navlinks:hover { background-color: rgba(233, 30, 99, 1) !important; color: #fff !important;}
.menu {left: 0px;}
.search {right: 0px;}
#media (max-width: 1280px) {
.wrapper {
width: 100%;
}
}
#media (max-width: 290px) {
.logo { font-size: 19px; }
.navlinks { font-size: 14px}
}
/*============================================================*/
/*========================= MENU PANEL ======================*/
/*============================================================*/
.menu-panel {
position: absolute;
top: 0;
left: -300px;
width: 300px;
height: 100%;
z-index: 99;
background-color: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
#media (max-width: 320px) {
.menu-panel {
width: 210px;
}
.navlinks:hover { background-color: rgba(233, 30, 99, 1) !important; color: #fff !important;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Poging #2</title>
</head>
<body>
<header>
<nav class="wrapper">
<ul class="left">
<li><i class="fa fa-bars fa-lg"></i></li>
</ul>
LOGO
<ul class="right">
<input type="text" id="search-bar">
</ul>
<i class="fa fa-search fa-lg"></i>
</nav>
</header>
<div class="menu-panel">
</div>
<div class="overlay"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
EDIT: made a code snippet; open search and close it again -> don't move the mouse, the mouse wont change state to default (and the :hover effect stays active, until I move the mouse)
I think this is browser dependent. In my current Firefox 38.0.1 ESR the cursor (not moved) resets to default.