We Keep Coding

How do I hide the menu when I click outside?

There is a website, there is a mobile version. The mobile version has a drop-down menu. This menu works fine, but it doesn't close when clicked outside the block.
I've been looking for a solution on the Internet for a really long time, but nothing came up( I'll be very grateful for the help!
HTML
<header class="header" id="header">
<div class="container">
<div class="header__inner" id="header">
<div class="header__logo">
<img src="Images/ActiveBox_logo.png" alt="Logo" class="img__logo">
</div>
<nav class="nav" id="nav">
Features
Works
Our Team
Testimonials
Download
</nav>
<button class="burger" type="button" id="navToggle">
<span class="burger__item">Menu</span>
</button>
</div> <!-- header__inner -->
</div>
</header>
JS
let header = $("#header");
let intro = $("#intro");
let introH = intro.innerHeight();
let scrollPos = $(window).scrollTop();
let nav = $("#nav");
let navToggle = $("#navToggle");
checkScroll(scrollPos, introH);
$(window).on("scroll resize", function() {
introH = intro.innerHeight();
scrollPos = $(this).scrollTop();
checkScroll(scrollPos, introH);
});
function checkScroll(scrollPos, introH) {
if( scrollPos > introH ) {
header.addClass("fixed");
} else {
header.removeClass("fixed");
}
}
/* Smooth scroll */
$("[data-scroll]").on("click", function(event) {
event.preventDefault();
let elementId = $(this).data('scroll');
let elementOffset = $(elementId).offset().top;
nav.removeClass("show");
$("html, body").animate({
scrollTop: elementOffset - 70
}, 700);
});
// Nav Toggle
navToggle.on("click", function(event) {
event.preventDefault();
nav.toggleClass("show");
});

How about something like this?
$(document).on('click', function (e) {
if ($(e.target).closest("#box").length === 0) {
$("#box").hide();
console.log('clicked outside the box');
}
else {
console.log('clicked on the box');
}
});
#box{
width:100px;
height:40px;
background-color:blue;
color:white;
padding:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='box'>
click me, then click outside
</div>

Accordion JS hyperlink propagation

I am working on a website with multiple accordions on each page with download links. I found a beautiful accordion by Ahmet Aksungur, but the hyperlinks don’t work with his code. I’ve tried adding preventDefault() and stopPropagation() -- $.on('click', 'a', function (e) { e.stopPropegation();}) -- – this work great (once!) – but the problem is that after the initial download, none of the accordions or download links work.
Could anyone suggest a way to stopPropagation on an event and allow normal function of the rest of the accordions. Thanks.
codepen: https://codepen.io/doncroy/pen/abZBZyL
'''
<script>
(function () {
"use strict";
var jQueryPlugin = (window.jQueryPlugin = function (ident, func) {
return function (arg) {
if (this.length > 1) {
this.each(function () {
var $this = $(this);
if (!$this.data(ident)) {
$this.data(ident, func($this, arg));
}
});
return this;
} else if (this.length === 1) {
if (!this.data(ident)) {
this.data(ident, func(this, arg));
}
return this.data(ident);
}
};
});
})();
(function () {
"use strict";
function Accordion($roots) {
var element = $roots;
var accordion = $roots.first("[data-accordion]");
var accordion_target = $roots.find("[data-accordion-item]");
var accordion_content = $roots.find("[data-accordion-content]");
$(accordion_target).click(function () {
$(this).toggleClass("opened");
$(this).find(accordion_content).slideToggle("slow");
$(this).siblings().find(accordion_content).slideUp("slow");
$(this).siblings().removeClass("opened");
});
}
$.fn.Accordion = jQueryPlugin("Accordion", Accordion);
$("[data-accordion]").Accordion();
function Ripple_Button($root) {
var elements = $root;
var ripple_btn = $root.first("[data-ripple]");
$(ripple_btn).on("click", function (event) {
event.preventDefault();
var $div = $("<div/>"),
btnOffset = ripple_btn.offset(),
xPos = event.pageX - btnOffset.left,
yPos = event.pageY - btnOffset.top;
$div.addClass("ripple-effect");
$div.css({
height: ripple_btn.height(),
width: ripple_btn.height(),
top: yPos - $div.height() / 2,
left: xPos - $div.width() / 2,
background: ripple_btn.data("ripple") || "#ffffff26"
});
ripple_btn.append($div);
window.setTimeout(function () {
$div.remove();
}, 2000);
});
}
$.fn.Ripple_Button = jQueryPlugin("Ripple_Button", Ripple_Button);
$("[data-ripple]").Ripple_Button();
})();
</script>
'''
'''
<div class="container">
<div class="aks-accordion" itemscope itemtype="https://schema.org/FAQPage" data-accordion="">
<div class="aks-accordion-row">
<div class="aks-accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" data-accordion-item="" data-ripple="#2c612c26">
<div class="aks-accordion-item-row">
<div class="aks-accordion-item-icon">
<svg class="aks-accordion-item-icon-open" viewBox="0 0 512 512">
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
</svg>
<svg class="aks-accordion-item-icon-close" viewBox="0 0 512 512">
<path d="M492,236H20c-11.046,0-20,8.954-20,20c0,11.046,8.954,20,20,20h472c11.046,0,20-8.954,20-20S503.046,236,492,236z" />
</svg>
</div>
<div class="aks-accordion-item-title">
<h4 itemprop="name">Dropdown Title</h4>
</div>
</div>
<div class="aks-accordion-item-content" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" data-accordion-content="">
<li><div id="#" onclick='recordVisit(this.id, "link")'><i class="fas fa-file-download"></i>PLACEHOLDER</div></li>
<li><div id="#" onclick='recordVisit(this.id, "link")'><i class="fas fa-file-download"></i>PLACEHOLDER</div></li>
<li><div id="#" onclick='recordVisit(this.id, "link")'><i class="fas fa-file-download"></i>PLACEHOLDER</div></li>
</div>
</div>
</div>
</div>
</div>
'''

I found the answer. The problem with the stopPropagation() written into the JS was that it affected the accordions globally. The solution was to use an inline onclick event on each of the links.
<li><div id="#" onclick='recordVisit(this.id, "link"); event.stopPropagation();'><i class="fas fa-file-download"></i>PLACEHOLDER</div></li>

JavaScript/jQuery - scroll up button

I'm new to web development and came across a lot of tutorials on jQuery but there wasn't a lot on pure JS. I'm trying to convert this piece of code I found online which scrolls the page up when user clicks a button in the bottom right into pure JavaScript but I'm having some trouble.
function main() {
$('.back-to-top').hide();
$(window).scroll(function(){
if($(window).scrollTop()>400){
$('.back-to-top').fadeIn('fast');
}else{
$('.back-to-top').fadeOut('fast');
}
})
$('.back-to-top').click(function(){
$('body').animate({
scrollTop: 0
}, 1000)
return false;
})
}
This is what I have so far but it doesn't work:
var scrollUp = document.getElementsByClassName('back-to-top');
window.onscroll = function(){
if(window.pageYOffset >= 400){
scrollUp.style.display = 'block';
}else{
scrollUp.style.display = 'none';
}
}
scrollUp.onclick = function(){
window.scrollTo(0,0);
}
HTML
<a class="back-to-top" id="back-to-top" href="#">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
<h2 class="text">Scroll Up</h2>
</a>
This is for web development assignment, can I have some advice?

The problem is that document.getElementsByClassName('back-to-top') returns an array-like object. Check documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Solution:
var scrollUp = document.getElementsByClassName('back-to-top')[0];
window.onscroll = function(){
if(window.pageYOffset >= 400){
scrollUp.style.display = 'block';
}else{
scrollUp.style.display = 'none';
}
}
scrollUp.onclick = function(){
window.scrollTo(0,0);
}
See working example here:
https://jsfiddle.net/9m7doq1m/
To avoid this issue, you can use the id selector (getElementById) instead of the class selector.

var scrollUp = document.getElementsByClassName('back-to-top');
scrollUp.onclick = function(){
window.scrollTo(0,0);
}
#content {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" style="height:1000px">
</div>
<a class="back-to-top" id="back-to-top" href="#">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
<h2 class="text">Scroll Up</h2>
</a>

Jquery code doesn't work with javascript

I'd like to make the header paragraph disappear at a certain width (say 1024px width) when the menu button is toggled.
As soon as I add the Jquery code the browser returns an error (ReferenceError: openSide is not defined) that doesn't exist if I comment the Jquery code.
I don't now if Jquery has been written thoroughly, but so far I cannot go through this issue
html:
<div id="header">
<header id="title">
<h1 style="font-size: 70px; font-weight: 600">The Nest</h1>
<p style="font-size: 40px">The hostel where your journey should start</p>
<button type="button" class="btn btn-lg" id="menu-btn" onclick="openSide()">
<span class="glyphicon glyphicon-list"></span>
</button>
</header>
</div>
<div id="sidebar">
×
Accomodations
Services
Merchandising
About us
</div>
Javascript:
function openSide() {
document.getElementById("sidebar").style.width = "350px";
//document.getElementById("header").style.backgroundPosition = "-250px";
document.getElementById("title").style.marginRight = "350px";
//document.getElementById("header").style.background = "linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))";
}
function closeSide() {
document.getElementById("sidebar").style.width = "0";
//document.getElementById("header").style.backgroundPosition = "0px";
document.getElementById("title").style.marginRight = "0px";
}
var main = function() {
if (max-width = 1024px) {
$("#menu-btn").click(function() {
$("#title p").hide();
});
}
}
$(document).ready(main);
thx for your help

Your using the assignment operator instead of the equal operator. Your code should be:
$(document).ready(() => {
// Your condition here
if (true) {
$('#menu-btn').click(function() {
$('#title').hide();
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="menu-btn">Hide content</button>
<div id="title">foo</div>
Btw, in the code that you posted, the variable max-width is not a valid variable name and also you are not defining it.

How to scroll the div content using jquery or javascript?

I want to scroll the div, containing the text, to the top when I mouseover the up arrow and stop when the mouse leaves the focus. Same for the down arrow.
I tried using jquery but it fails.
please visit: http://jsfiddle.net/shantanubhaware/38WMF/12/
Here is Html code
<div class="container">
<div class="news event">
<div class="up arrow nav"></div>
<div class="down arrow nav"></div>
<p class="content items"> <span class="p">text1
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/><br/><br/><br/><br/>
text2
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/><br/><br/><br/><br/>
text3
<br/>
<br/>
<br/><br/>
<br/><br/>
<br/><br/><br/><br/><br/>
text4</span>
</p>
</div>
</div>
I use the following jquery
$('.up').mouseover(function () {
scrollToTop();
});
$('.down').mouseover(function () {
scrollToBottom();
});
function scrollToTop() {
var cur = $('.content').scrollTop();
while (cur > 0) {
cur = parseInt(cur) - 50;
$('.content').animate({
scrollTop: cur
}, 800);
}
}
function scrollToBottom() {
var cur = $('.content').scrollTop();
var height = $('.p').height();
while (cur < height) {
cur = parseInt(cur) + 50;
$('.content').animate({
scrollTop: cur
}, 800);
}
}
tell me if i am wrong anywhere or if i want to use any other technique.
Thanks for your support.

you need to stop the ongoing animation before starting a new one, otherwise it will finish the ongoing animation first and only then will start the new one.
its done by calling .stop() first.
also you forgot to bind on mouse leave events.
heres yours fixed fiddle:
http://jsfiddle.net/TheBanana/38WMF/14/