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>

Cannot Click Button after being Toggled

I cannot Close the dropdown using the button but i can close it when I clicked the outer page.
Working Demo here
var $menu = $('.menu');
$('.toggle').click(function () {
$menu.toggle();
});
$(document).mouseup(function (e) {
if (!$menu.is(e.target) // if the target of the click isn't the container...
&& $menu.has(e.target).length === 0) // ... nor a descendant of the container
{
$menu.hide();
}
});
Please help me guys.

$(document).ready(function(){
var $menu = $('.menu');
$('.toggle').click(function (e) {
e.stopPropagation();
$menu.toggle();
});
$('.container').click(function (e) {
e.stopPropagation();
$menu.toggle();
});
});
.dropdown {
margin: 200px auto;
position: relative;
width: 50%;
}
.toggle, .dropdown-menu {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="text-center col-xs-12">
<h1>jQuery: click outside to close menu</h1>
<p>Click the button to toggle the dropodown menu.</p>
<p>Then click outside dropdown menu to close.</p>
<div class="dropdown">
Toggle menu
<ul class="dropdown-menu menu">
<li class="dropdown-item">List item 1</li>
<li class="dropdown-item">List item 2</li>
<li class="dropdown-item">List item 3</li>
</div>
</div>
</div>
</div>
Use event.stopPropagation(); this will not prevent other handlers on the same element from running.

Simply U need only one action on mouse click. Your JS must be:
var $menu = $('.menu');
var $toggle = $('.toggle');
$(document).mouseup(function (e) {
if ($toggle.is(e.target)) {
$menu.toggle()
} else {
$menu.hide();
}
});

If you want to open and close on button. Just remove the second function and your code will work.
var $menu = $('.menu');
$('.toggle').click(function () {
$menu.toggle();
});

Add text to unordered list on keyup event of textarea

Add text to unordered list on keyup event of textarea and there should't be any li when there is no text in textarea
HTML:
<textarea id="activityText"></textarea>
<div id="qwe">
<ul>
<li id="textFromTextArea"></li>
</ul>
</div>
jQuery:
$("#activityText").keyup(function () {
$("#textFromTextArea").text($("#activityText").val());
})
If there is no text in textarea then there should't be any list, can it be possible with jQuery
https://ibb.co/gjpDTL

Option 1:
I moved id from li to ul. I removed li element since you want to do not show marker.
<div id="qwe">
<ul id="textFromTextArea">
</ul>
</div>
<textarea id="ActivityText"></textarea>
and js:
$("#ActivityText").keyup(function () {
var val = $(this).val();
if($("#textFromTextArea li").length===0) {
var $li = $("<li>");
$li.html(val);
$("#textFromTextArea").append($li);
} else {
$("#textFromTextArea li").html(val);
}
});
Option 2:
Show/hide li element, preserve actual HTML you wrote but I add a CSS class hide
<div id="qwe">
<ul>
<li id="textFromTextArea" class="hide"></li>
</ul>
</div>
<textarea id="ActivityText"></textarea>
css
.hide {
display: none;
}
and js
$("#ActivityText").keyup(function () {
var val = $(this).val();
var $li = $("#textFromTextArea");
if(val.length === 0) {
$li.addClass("hide");
} else {
$li.removeClass("hide");
}
$li.html(val);
});

Try this
HTML:
<textarea id="activityText"></textarea>
<div id="qwe">
<ul id="list">
</ul>
</div>
jQuery:
var textval = '';
$("#activityText").on("keyup", function() {
textval = $(this).val();
if (textval.length > 0) {
$("#list").html('<li>' + textval + '</li>');
} else {
$("#list").empty();
}
});

Hide element when scrolling outside it

I use this code to hide block when user scrolling the page. How can i hide block only when scrolling outside it.
$('html, body').bind('scroll',function (e) {
var container = $("CONTAINER SELECTOR");
if (container.has(e.target).length === 0){
container.hide();
}
});
This is my html
<div class="parent_block">
<div class="menu-button">
<img src="/img.svg" />
</div>
<div class="toggled_block">
<nav>Home</nav>
</div>
</div>
<script>
$(".menu-button").click(function() {
$('.toggled_block').toggle();
});
$(document).on('click', function(e) {
if (!$(e.target).closest(".parent_block").length) {
$('.toggled_block').hide();
}
e.stopPropagation();
});
$(document).bind('scroll',function (e) {
var container = $(".toggled_block");
if (container.has(e.target).length === 0){
container.hide();
}
});

Triggering a jquery function

How can I trigger the following function for a specific DIV
$(document).ready(function() {
if($('div.trigger').length > 0) {
$('div.trigger').click(function() {
if ($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).addClass('close');
$(this).next().slideDown(100);
return false;
} else {
$(this).removeClass('close');
$(this).addClass('open');
$(this).next().slideUp(100);
return false;
}
});
}
});
My html looks like this:
<div class="trigger open"><strong>Dropdown 1</strong></div>
<div class="cnt">
foo<br>
bar
</div>
<div class="trigger open"><strong>Dropdown 2</strong></div>
<div class="cnt">
baz<br>
boo
</div>
My solution was to this:
$(document).ready(function()
{
$('div.trigger:eq(<?=$_GET[exp];?>)').trigger('click');
});
Thanks for the help :)

$('div.trigger:eq(0)').trigger('click');//trigger click event of the Oth element
$('div.trigger:first').trigger('click');//trigger click event of first
$('div.trigger:last').trigger('click');//trigger the click of last one