We Keep Coding

Close menu on click outside - Vanilla JS

I created a side menu, which displays and hides when clicking the menu button. Now, I would like that the menu closes when I click outside the menu, but I cannot figure out how to do it.
I have tried adding a clicklistener to the body, but this disables the menu completely. I also thougt about getting the ID of the clicked element anywhere in the body and close the menu if clickedElement != sideBar && sideBar.style = "200px", but I cannot get it to work. Can someone help me out here? I would like to find a solution without JQuery.
menuBtn.addEventListener("click", function () {
if (sideBar.style.width == "200px") {
sideBar.style.width = "0px";
setTimeout(function () {
menuItems.style.display = "none";
}, 1000);
} else {
sideBar.style.width = "200px";
menuItems.style.display = "block";
}
});

You can add an event listener to the parent container and check if the click's target is inside the element or not, something like:
document.addEventListener("click", (e) => {
if (box.contains(e.target)) {
result.innerHTML = "inside";
} else {
result.innerHTML = "outside";
}
});
#box {
width: 100px;
height: 100px;
background-color: dodgerblue;
}
<div id="box"></div>
<div id="result"></div>

Click on button to toggle display of another div

I have a code that works perfectly to move elements from top, left, right or bottom sides, but seems to be, that it doesn't work with display property, here's my javascript code:
$('#icon-for-search').click(function () {
var targetValue;
if ($('#search-wrapper').css('top') == "0px") {
targetValue = '55px';
} else {
targetValue = '0px';
}
$("#search-wrapper").animate({
top: targetValue
}, 500);
});
I have a button with an id called "icon-for-search" and it toggles perfectly the top value of the #search-wrapper if it's clicked, but if I change it to display: block / none it doesn't work. Any particular reason? could someone explain me?
$('#icon-for-search').click(function () {
var targetValue;
if ($('#search-wrapper').css('display') == "none") {
targetValue = 'block';
} else {
targetValue = 'none';
}
$("#search-wrapper").animate({
display: targetValue
}, 500);
});

jQuery.animate works only with numeric CSS properties. You can just toggle element:
$('#icon-for-search').click(function () {
$('#search-wrapper').fadeToggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="icon-for-search">Search Icon</div>
<div id="search-wrapper">Search Wrapper</div>

Navbar fade In when back to top

I was trying this jQuery example
(function ($) {
$(document).ready(function(){
// hide .navbar first
// $(".masthead").hide();
$(".masthead").css("background-color","inherit");
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color","black");
} else if($(this).scrollTop === 0){
$('.masthead').fadeIn();
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
It shows the menu/navbar when I run the page and disapears when I start scrolling and after 700 pixels navbar is displayed again with black background, I expected it to fade in again after I come back to the top.
if($(this).scrollTop === 0){
$('.masthead').fadeIn();
}
But it have not worked. How do scrollTop() work then? I have also tried to set scrollTop < 10, but with no success. How do I make it work when I'm back at 10 pixels or zero?

You're comparing the function body to 0, not the actual results of the function (the scroll value), so this:
if($(this).scrollTop === 0){
$('.masthead').fadeIn();
}
should become this:
if($(this).scrollTop() === 0){
$('.masthead').fadeIn();
}
TL;DR
It's scrollTop vs. scrollTop().

Switch animation through 'If Statement' in jQuery

I have some code in jQuery in which I want to make a switch animate on or off by clicking on a div. Here is the code. When I test it, it doesn't work. However if I remove toggle = true on line 7, it just works one way and I can't turn it back off.
$(document).ready(function () {
$("#switch").click(function () {
var toggle = false;
if (toggle == false) {
$("#circle").css("left", "27px");
$("#white_rect").attr("src", "green_rect.png");
toggle = true;
}
if (toggle == true) {
$("#circle").css("left", "1px");
$("#white_rect").attr("src", "white_rect.png");
toggle = false;
}
});
});

You need to declare the toggle variable outside of the click handler... else in every click call the variable will get reinitialized so the value of the variable will always be false.
$(document).ready(function () {
//declare it here
var toggle = false;
$("#switch").click(function () {
if (toggle == false) {
$("#circle").css("left", "27px");
$("#white_rect").attr("src", "green_rect.png");
toggle = true;
//also don't use a separate if block here as it will be affected by the execution of the above if block
} else {
$("#circle").css("left", "1px");
$("#white_rect").attr("src", "white_rect.png");
toggle = false;
}
});
});
$(document).ready(function () {
//declare it here
var toggle = false;
$("#switch").click(function () {
if (toggle) {
$("#circle").css("left", "1px");
$("#white_rect").attr("src", "white_rect.png");
} else {
$("#circle").css("left", "27px");
$("#white_rect").attr("src", "green_rect.png");
}
toggle = !toggle;
});
});

It is better to strictly divide appearance and logic. So use .classes and backgounded <div>s instead of <img>. Then you won't need any state variables and code shall be more simple.
HTML:
<div class="container">
<div class="switch off"></div>
</div>
CSS:
.container {
width:100%; height:100px; padding:40px; text-align:center;
}
.container .switch {
width:94px; height: 27px; display:inline-block; background-color:pink; cursor:pointer;
}
.container .switch.on {
background: url('http://squad.pw/tmp/img/01-on.png') no-repeat 0 0;
}
.container .switch.off {
background: url('http://squad.pw/tmp/img/01-off.png') no-repeat 0 0;
}
JS:
$('.switch').click(function() {
// Do visual logic
$(this).toggleClass('on');
$(this).toggleClass('off');
// Do business logic
window.toggle = !window.toggle;
});
Here is FIDDLE

Slide Back when Clicked Outside Of It

Hi i want to have my side slider button to smoothly slide back to position if the user clicks outside of it.
If you wanna check it here is the jfiddle of it
as of now it doesnt go back to position when you click outside of it.
JS
$(document).ready(function () {
$('#slideleft .mybutton').click(function () {
var $lefty = $(this).parent();
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() + 31 : 0
});
});
});

Please try the below:
$(document).mouseup(function (e) {
var $lefty = $('#slideleft .mybutton').parent();
var container = $("#slideleft");
if (parseInt($lefty.css('left')) == 0) if (container.has(e.target).length === 0) {
animate();
}
});
Here is a working fiddle:
JSFiddle

Using some event.target trickery gives you this:
$(document).on('click', function (event) {
if (event.target !== $('#slideleft .mybutton')[0]) {
$('#slideleft .mybutton').hide(); //or slide however you want to.
}
});
If you notice this actually compares the actual HTML and not the jQuery object.
This is because .target give you back the actual HTML of what was clicked.

Adding this works:
$(document).click(function () {
var $lefty = $('#slideleft .mybutton').parent();
if(parseInt($lefty.css('left'), 10) == 0){
$lefty.animate({
left: -$lefty.outerWidth() + 31
});
}
});
Here is the fiddle