We Keep Coding

How to Make Nav Hidden When Clicked Outside Of It

I am using a checkbox to toggle/untoggled to display the dropdown Navigation. What I am trying to do is that if the user clicks anywhere other than the Navigation, the Navigation will become unchecked -> if (document.getElementById("navToggle").checked) {console.log("uncheck the nav")}
With my code it seems to execute even if the user clicks on the Navigation, ignoring this -> if (!event.target.matches('.top-nav').
/*window.onclick = function (event) {
if (!event.target.matches('.top-nav')) {
if (document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
}
}*/
function myFunction(x) {
x.classList.toggle("change");
}
function dropdown() {
document.getElementById("myDropdown").style.display = "block"
}
window.onclick = function(event) {
if (!event.target.matches('.top-nav')) {
if (document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
}
}
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
--background: rgba(0, 214, 170, .85);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
cursor: pointer;
background: none;
border: 0;
color: inherit;
/* cursor: default; */
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
height: 5rem;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 400ms;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-top: 1em;
margin-left: 1em;
margin-bottom: 1em;
}
nav a,
nav button {
color: white;
text-decoration: none;
font-size: 1.25rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover,
nav .dropdown:hover>button {
color: #000;
}
.nav-toggle:checked~nav {
transform: scale(1, 1);
}
.nav-toggle:checked~nav a,
.nav-toggle:checked~nav .dropdown>button {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.arrow {
border: solid #222;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-bottom: 4px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.dropdown:hover .arrow {
border: solid black;
border-width: 0 3px 3px 0;
}
.dropdown-content {
display: none;
}
.dropdown-content a {
display: block;
text-align: left;
padding: 0;
margin-top: .5em;
margin-left: .5em;
margin-bottom: .5em;
}
.show {
display: block;
}
<header id="top-nav">
<label for="navToggle" class="nav-toggle-label">
<span
><div class="nav-toggle-container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div></div
></span>
</label>
<input type="checkbox" id="navToggle" class="nav-toggle" />
<nav class="nav">
<ul>
<li>
Home
</li>
<li>About</li>
<li>
<div class="dropdown">
<button class="dropdown-button" onclick="dropdown()">
Classes <i class="arrow down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<div class="colums">
<h1>Semester 1</h1>
Physics 11
Chemistry 11
English 11
French 11
<h1>Semester 2</h1>
Gym 11
Psychology 11
Law 11
Pre-calculus 11
</div>
</div>
</div>
</li>
<li>Contact</li>
</ul>
</nav>
</header>

Try to use eventListener everywhere
window.addEventListener("click", event => {
const tgt = event.target.closest('.top-nav');
if (!tgt && document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
})

what's wrong on code javascript with list item menu?

I use This code on my dropdown list Item on click.. it's working Good . but Problem is .. when I click in link not working..
[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
el.addEventListener('click', onClick, false);
});
function onClick(e){
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el){
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e){
e.preventDefault();
if(el.contains(e.target)){
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
function hideSubMenu(el){
el.classList.remove('show-submenu');
}
An example from here ==> https://codepen.io/0fercpkzi/full/jOMqXgV

Remove e.preventDefault inside showSubMenu, or, perform a check to see if it's an a tag being clicked:
[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el) {
el.addEventListener('click', onClick, false);
});
function onClick(e) {
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el) {
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e) {
// Return if target is an anchor tag
if (e.target.localName === 'a') return;
e.preventDefault();
if (el.contains(e.target)) {
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
function hideSubMenu(el) {
el.classList.remove('show-submenu');
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #f00;
}
.nav {
width: 550px;
margin: 100px auto 0 auto;
text-align: center;
}
/* Navigation */
.nav {
font-family: Georgia, Arial, sans-serif;
font-size: 14px;
}
.nav-items {
padding: 0;
list-style: none;
}
.nav-item {
display: inline-block;
margin-right: 25px;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active {
color: #fff;
font-weight: bold;
}
.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before,
.nav-link:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.dropdown {
position: relative;
}
.dropdown .nav-link {
padding-right: 15px;
height: 17px;
line-height: 17px;
}
.dropdown .nav-link::after {
content: "";
position: absolute;
top: 6px;
right: 0;
border: 5px solid transparent;
border-top-color: #fff;
}
.submenu {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
width: 200px;
margin-left: -100px;
background: #fff;
border-radius: 3px;
line-height: 1.46667;
margin-top: -5px;
box-shadow: 0 0 8px rgba(0, 0, 0, .3);
opacity: 0;
-webkit-transform: translate(0, 0) scale(.85);
transform: translate(0, 0)scale(.85);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.submenu::after,
.submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
height: 0;
}
.submenu::after {
border-bottom-color: #fff;
}
.submenu::before {
margin-left: -13px;
border: 13px solid transparent;
border-bottom-color: rgba(0, 0, 0, .1);
-webkit-filter: blur(1px);
filter: blur(1px);
}
.submenu-items {
list-style: none;
padding: 10px 0;
}
.submenu-item {
display: block;
text-align: left;
}
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
color: #3498db;
padding: 10px 20px;
}
.submenu-link:hover {
text-decoration: underline;
}
.submenu-seperator {
height: 0;
margin: 12px 10px;
border-top: 1px solid #eee;
}
.show-submenu .submenu {
opacity: 1;
-webkit-transform: translate(0, 25px) scale(1);
transform: translate(0, 25px) scale(1);
pointer-events: auto;
}
<nav role="navigation" class="nav">
<ul class="nav-items">
<li class="nav-item dropdown">
<span>Drop Down</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">Google</li>
<li class="submenu-item">Yuotube</li>
<li class="submenu-item">Facebook</li>
</ul>
</nav>
</li>
</ul>
</nav>

Function won't work when clicking it, nothing happens

Yet again another problem sorry. I can't figure out why once I click on the browse our products section, it should then animate and reveal some images but currently, it is not doing anything of the sort. but, it's not erring in web storm. I am really struggling to identify where the problem is occurring.
var $menuWrap = $('#menu-wrap'),
$body = $('body'),
$menuTitle = $('#menu-title'),
$close = $('#close'),
$menuCards = $('.menu-card'),
$menuInner = $('#menu-inner'),
$menuLink = $('#menu-link');
setCardHeight();
$(window).resize(setCardHeight);
$menuLink.on('click', function(e) {
e.preventDefault();
showOverlay();
});
$close.on('click', function(e) {
e.preventDefault();
hideOverlay();
});
function showOverlay() {
$body.addClass('menu-on');
$menuWrap.addClass('display').addClass('visible');
setTimeout(function() {
$menuTitle.addClass('on');
$close.addClass('on');
}, 200);
$menuCards.each(function(i) {
var $card = $(this);
setTimeout(function() {
$card.addClass('on');
}, 200 + 50 * i);
});
}
function hideOverlay() {
$body.removeClass('menu-on');
$menuCards.removeClass('on');
$menuTitle.removeClass('on');
$close.removeClass('on');
setTimeout(function() {
$menuWrap.removeClass('display').removeClass('visible');
}, 350);
}
function setCardHeight() {
var windowWidth = $(window).width();
var topVal;
if (windowWidth >= 1300) {
topVal = ($(window).height() - 700) / 2;
} else {
topVal = ($(window).height() - 200 - (windowWidth / 1300 * 513)) / 2;
}
if (topVal < 10) {
topVal = 10;
}
$menuInner.css('top', topVal);
}
html {
height: 100%;
box-sizing: border-box;
font-size: 10px;
line-height: 1.5;
color: #333;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
height: 100%;
margin: 0;
font-family: "Gotham Rounded", "Proxima Nova",sans-serif;
font-weight: 400;
color:#fff;
letter-spacing: .1em;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
#logo {
position: absolute;
top:50px;
left: 50px;
z-index: 2100;
font-weight: 700;
font-size: 18px;
margin: 0;
letter-spacing: .125em;
transform: translateY(0);
transition: all .4s;
transition-delay: .1s;
}
.menu-on #logo {
opacity: 0;
transform: translateY(-20px);
}
#menu-link {
position: absolute;
left: 50px;
top: 50%;
margin-top: -25px;
z-index: 2100;
color: #fff;
text-decoration: none;
transform: translateY(0);
transition: all .35s;
}
#menu-link:hover {
color: #ffe22d;
}
.menu-on #menu-link {
opacity: 0;
transform: translateY(-20px);
}
.menu-sub {
font-size: 14px;
line-height: 1.2;
display: block;
opacity: .6;
letter-spacing: .125em;
font-weight: 600;
}
.menu-main {
font-size: 40px;
line-height: 1.2;
display: block;
letter-spacing: .09em;
font-weight: 500;
}
#bk-wrap {
width: 120%;
height: 100%;
background: url(IMG_2978.jpg) no-repeat center center;
background-size: cover;
position: fixed;
left:-70px;
top:0;
z-index: 1;
transform: translateX(0) scale(1);
transition: all .5s;
}
#bk-no-blur, #bk-blur, #bk-shadow {
width: 100%;
height: 100%;
background-size: cover;
position: absolute;
left:0;
top:0;
z-index: 1;
}
#bk-shadow {
index: 1;
position: fixed;
}
#bk-blur {
background: url(IMG_2978.jpg) no-repeat center center;
background-size: cover;
opacity: 0;
z-index: 2;
transition: opacity .4s;
}
.menu-on #bk-wrap {
transform: translateX(200px) scale(1.3);
}
.menu-on #bk-blur {
opacity: 1;
}
#bk-shadow {
background: transparent;
box-shadow: inset 0 0 500px 50px rgba(0, 0, 0, .75);
z-index: 100;
}
/*.menu-on #bk-shadow {
box-shadow: inset 0 0 500px 50px rgba(0, 0, 0, 1);
}*/
#menu-wrap {
position: absolute;
left:0;
top: 0;
width: 100%;
height: 100%;
z-index: 2000;
display: none;
opacity: 0;
transition: all .3s;
}
#menu-wrap.display {
display: block;
}
#menu-wrap.visible {
opacity: 1;
}
#menu-inner {
max-width: 1300px;
margin: 0 auto;
position: relative;
padding: 0 70px;
}
#menu-title {
font-weight: 400;
font-size: 28px;
padding:30px 8px;
margin: 0;
opacity: 0;
transition: all .3s;
top:10px;
transform: translateY(0);
position: relative;
}
#menu-title.on {
opacity: 1;
transform: translateY(-10px);
}
#close {
font-weight: 400;
font-size: 26px;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
width: 43px;
height: 43px;
text-align: center;
border-radius: 40px;
position: absolute;
left: 20px;
top:40px;
opacity: 0;
transform: translateY(0);
transition: all .3s;
line-height: 1;
padding: 7px 0 0 3px;
}
#close:hover {
background: rgba(255, 255, 255, .25);
}
#close.on {
opacity: 1;
transform: translateY(-10px);
}
#menu-cards {
background: transparent;
perspective: 1000px;
}
#menu-cards:before, #menu-cards:after {
display: table;
content: " ";
}
#menu-cards:after {
clear: both;
}
.menu-card {
width: 33.33%;
padding: 8px;
float: left;
position: relative;
opacity: 0;
transition: all .3s;
transform: scale(.975);
}
.menu-card.on {
opacity: 1;
transform: scale(1);
}
.menu-card:hover {
transform: scale(1.025);
cursor: pointer;
}
.menu-card img {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
.menu-card h3 {
font-weight: 500;
font-size: 17px;
letter-spacing: .1em;
margin: 0;
}
#media (max-width: 758px) {
#menu-inner {
padding: 0 20px;
}
.menu-on #bk-wrap {
transform: translateX(100px) scale(1.3);
}
#menu-title {
padding-left: 55px;
}
.menu-card {
padding: 4px;
}
.menu-card h3 {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<meta charset="UTF-8">
<title>Jacinto</title>
</head>
<body>
<div id="bk-wrap">
<div id="bk-no-blur"></div>
<div id="bk-blur"></div>
</div>
<div id="bk-shadow"></div>
<p id="logo">meili</p>
<a href="#" id="menu-link">
<span class="menu-sub">Browse our</span>
<span class="menu-main">Products</span>
</a>
<div id="menu-wrap">
<div id="menu-inner"></div>
<h1 id="menu-title">Products</h1>
x
<div id="menu-cards">
<div class="menu-card">
<img src="IMG_0437.jpg" alt="clothes">
<h3>Clothes</h3>
</div>
<div class="menu-card">
<img src="https://images.unsplash.com/photo-1523730205978-59fd1b2965e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=691&q=80" alt="accessories">
<h3>Accessories</h3>
</div>
<div class="menu-card">
<img src="https://images.unsplash.com/photo-1532040675891-5991e7e3d0cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" alt="shoes">
<h3>Shoes</h3>
</div>
</div>
</div>
</body>
</html>

How To Show A "Browser-Native" Dialog Box From A Web URL

When a user requests my URL, how can I show a dialog box to ask for login credentials first before showing anything, like this:
https://pasteboard.co/I9aeDzI.png
https://pasteboard.co/I9af5i7.png
Seems to me these dialog boxes are in-built or native to the browser. Also, when a user clicks on Submit, is it like an ordinary HTML tag?
It'll be good if someone can post links to relevant documentation on this feature, which I currently cannot seem to find with a simple Google search as I don't know what keywords appropriately describe it.
Like to learn more including:
How to get the webpage to show it ?
what happens behind the hood when someone clicks on Submit (eg. what HTTP request method it uses, which URL it will call) ?

Those are made with pure CSS and JavaScript.
You can't find anything like that because they aren't native browser features.
Maybe you see many websites using the same dialog box because they use templates and libraries built for that purpouse.
Take a look at this
var $btn = document.getElementById("submit");
var $form = document.getElementById("form")
function signIn() {
if ($form.checkValidity()) {
$btn.classList.add('pending');
window.setTimeout(function(){ $btn.classList.add('granted'); }, 1500);
}
}
$btn.addEventListener("click", signIn);
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i|Monoton");
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
* {
box-sizing: border-box;
}
html {
font-size: 14px;
}
body {
background: linear-gradient(to bottom, #68d8d6, #ffffff);
color: #454749;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Source Sans Pro', sans-serif;
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
font-family: Monoton, sans-serif;
margin-bottom: .5rem;
}
/**
* Tiles
*/
.tile {
background-color: #ffffff;
border-radius: .1rem;
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2), 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
position: relative;
width: 100%;
min-width: 320px;
max-width: 24rem;
overflow: hidden;
}
.tile .tile-header {
background-image: url("https://res.cloudinary.com/dgmilxzy7/image/upload/c_scale,w_500,o_75,b_rgb:07beb8/v1506735375/CodePen/ViddenPixel.jpg");
background-position: center;
background-size: cover;
height: 12rem;
}
.tile .tile-body {
padding: 2rem;
}
/**
* Forms
*/
.form-input {
display: block;
position: relative;
margin-bottom: 1rem;
}
.form-input > .material-icons {
position: absolute;
font-size: 1.5rem;
top: 1.2rem;
}
.form-input > .material-icons ~ input, .form-input > .material-icons ~ .label, .form-input > .material-icons ~ .underline {
margin-left: 2.25rem;
width: calc(100% - 2.25rem);
}
.form-input input {
border: none;
box-shadow: none;
padding-top: 1.5rem;
padding-right: 0;
padding-bottom: 0.5rem;
padding-left: 0;
outline-style: none;
width: 100%;
}
.form-input input ~ .label {
color: #868e96;
font-size: 1rem;
margin: 0;
pointer-events: none;
position: absolute;
top: 1.5rem;
left: 0;
transition: top .2s,font .2s;
z-index: 1;
}
.form-input input ~ .underline {
background-color: #bdc1c5;
height: 1px;
width: 100%;
position: absolute;
bottom: 0;
}
.form-input input:hover ~ .underline, .form-input input:focus ~ .underline {
background-color: #07beb8;
}
.form-input input:hover ~ .label, .form-input input:focus ~ .label {
color: #07beb8;
}
.form-input input:focus ~ .underline {
height: 2px;
}
.form-input input:focus ~ .label, .form-input input:valid ~ .label {
top: 0;
font-size: 0.85rem;
}
.form-input input:-webkit-autofill ~ .label {
top: 0;
font-size: 0.85rem;
}
/**
* Buttons
*/
.btn {
border-radius: .2rem;
display: inline-block;
padding-top: 0.5rem;
padding-right: 1rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
}
.btn, [role="button"], [type="button"] {
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
}
.btn-irenic {
background-color: #07beb8;
color: white;
}
.btn-irenic:hover, .btn-irenic:focus, .btn-irenic:active {
background-color: #06a5a0;
}
.btn-serene {
background-color: #3dccc7;
color: white;
}
.btn-serene:hover, .btn-serene:focus, .btn-serene:active {
background-color: #32beb9;
}
.btn-tranquil {
background-color: #68d8d6;
color: white;
}
.btn-tranquil:hover, .btn-tranquil:focus, .btn-tranquil:active {
background-color: #54d3d0;
}
.btn-calm {
background-color: #9ceaef;
color: white;
}
.btn-calm:hover, .btn-calm:focus, .btn-calm:active {
background-color: #86e5eb;
}
.btn-cool {
background-color: #c4fff9;
color: white;
}
.btn-cool:hover, .btn-cool:focus, .btn-cool:active {
background-color: #abfff6;
}
.btn-ice {
background-color: #ffffff;
color: white;
}
.btn-ice:hover, .btn-ice:focus, .btn-ice:active {
background-color: #f2f2f2;
}
.btn-base {
background-color: #454749;
color: white;
}
.btn-base:hover, .btn-base:focus, .btn-base:active {
background-color: #393a3c;
}
/**
* Utilities
*/
.clearfix:after {
content: "";
display: table;
clear: both;
}
.float-right {
float: right;
}
/**
*
*/
.submit-container {
position: relative;
}
.submit-container #submit {
position: relative;
z-index: 2;
outline: none;
opacity: 1;
transition: transform .1s ease-in, opacity .1s ease-in, border-radius .1s ease-in;
right: -1px;
}
.submit-container #submit span {
opacity: 1;
transition: opacity .1s ease-in;
}
.submit-container #submit.pending {
transform: scale(0.55, 1.5);
background-color: #07beb8;
border-radius: 50%;
opacity: 1;
}
.submit-container #submit.pending span {
opacity: 0;
}
.submit-container #submit.pending ~ .login-pending {
opacity: 1;
transform: scale(1, 1);
z-index: 3;
}
.submit-container #submit.granted ~ .login-pending {
opacity: 1;
transform: translate(-9rem, -11rem) scale(18, 18);
z-index: 3;
}
.submit-container #submit.granted ~ .login-pending .spinner {
opacity: 0;
}
.submit-container #submit.granted ~ .login-pending .login-granted-content {
opacity: 1;
}
.submit-container .login-pending {
height: 3rem;
width: 3rem;
background-color: #07beb8;
position: absolute;
border-radius: 50%;
right: 1rem;
bottom: -0.5rem;
opacity: 0;
overflow: hidden;
transform: translate(0, 0) scale(0.5, 0.5);
transition: transform .2s ease-in, scale .2s ease-in;
z-index: 1;
}
.submit-container .login-pending .login-granted-content {
background-image: url(https://res.cloudinary.com/dgmilxzy7/image/upload/c_scale,w_700,o_25,b_rgb:07beb8/v1506735375/CodePen/ViddenPixel.jpg);
background-position: center;
background-size: cover;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: opacity .2s ease-in .2s;
text-shadow: 0px 0px 20px #ffffff;
}
.submit-container .login-pending .login-granted-content .material-icons {
font-size: 5px;
position: relative;
left: 1.25px;
}
.spinner {
width: 3rem;
height: 3rem;
position: relative;
margin: 0 auto;
}
.spinner .dot1, .spinner .dot2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #68d8d6;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: dot-bounce 2.0s infinite ease-in-out;
animation: dot-bounce 2.0s infinite ease-in-out;
}
.spinner .dot2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes dot-bounce {
0%, 100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
#keyframes dot-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 400;
line-height: 1;
color: #fff;
text-align: left;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="tile">
<div class="tile-header">
<h2 style="color: white; opacity: .75; font-size: 4rem; display: flex; justify-content: center; align-items: center; height: 100%;">SIGN IN</h2>
</div>
<div class="tile-body">
<form id="form">
<label class="form-input">
<i class="material-icons">person</i>
<input type="text" autofocus="true" required />
<span class="label">Username</span>
<span class="underline"></span>
</label>
<label class="form-input">
<i class="material-icons">lock</i>
<input type="password" required />
<span class="label">Password</span>
<div class="underline"></div>
</label>
<div class="submit-container clearfix" style="margin-top: 2rem;">
<div id="submit" role="button" type="button" class="btn btn-irenic float-right" tabindex="0">
<span>SIGN IN</span>
</div>
<div class="login-pending">
<div class=spinner>
<span class="dot1"></span>
<span class="dot2"></span>
</div>
<div class="login-granted-content">
<i class="material-icons">done</i>
</div>
</div>
</div>
</form>
</div>
</div>

Codepen JQuery Code Doesn't Work In My Browser

I've searched online for a solution to this problem for a while now. Unfortunately, no luck. Here is the website I'm using the code from http://codepen.io/anon/pen/wagbYZ
Here is my code:
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="main_h">
<div class="row">
<a class="logo" href="#">L/F</a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>Section 01</li>
<li>Section 02</li>
<li>Section 03</li>
<li>Section 04</li>
</ul>
</nav>
</div> <!-- / row -->
</header>
<div class="hero">
<h1><span>loser friendly</span><br>Batman nav.</h1>
<div class="mouse">
<span></span>
</div>
</div>
<div class="row content">
<h1 class="sec01">Section 01</h1>
<p>Hello World!</p>
<h1 class="sec02">Section 02</h1>
<p>Hello World!</p>
<h1 class="sec03">Section 03</h1>
<p>Hello World!</p>
<h1 class="sec04">Section 04</h1>
<p>Hello World!</p>
</div>
</body>
</html>
CSS:
#mixin small {
#media only screen and (max-width: 766px) {
#content;
}
}
$color: #8f8f8f;
$color2: #e8f380;
.main_h {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
#include small {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
.mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid lighten($color, 30%);
}
.logo {
width: 50px;
font-size: 25px;
color: $color;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
#include small {
float: none;
}
}
nav {
float: right;
width: 60%;
#include small {
width: 100%;
}
ul {
list-style: none;
overflow: hidden;
text-align: right;
float: right;
#include small {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
#include small {
width: 100%;
padding: 7px 0;
margin: 0;
}
}
a {
color: #888888;
text-transform: uppercase;
font-size: 12px;
}
}
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
#include small {
display: block;
}
span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: $color;
display: block;
}
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
color: $color;
background: white;
font-family: "Cardo", serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
}
.content {
padding: 50px 2% 250px;
}
.hero {
position: relative;
background: url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
h1 {
font-size: 50px;
line-height: 1.3;
span {
font-size: 25px;
color: $color2;
border-bottom: 2px solid $color2;
padding-bottom: 12px;
line-height: 3;
}
}
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid $color2;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -14px;
span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: $color2;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
JS:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
The HTML and CSS work fine, but the JQuery is giving me problems.

try wrapping the code in jquery document ready event
$(document).ready(function(){
//event listeners
});