We Keep Coding

Menu toogle to control display, height, and width

currently learning javascript and encounter a problem.
I made a button for mobile screen that if clicked it can expand the background and display the menu. I encounter problem where only the menu content can be clicked back and forth to display and undisplayed, and the background don't.
My goal is
When I clicked the menu button, both the background will expand and the menu will be displayed.
and the background can be toggle on and off by clicking the menu button.
Can anyone help me with this problem ?
document.getElementById("menu_button").addEventListener("click",function()
{
var open1=document.getElementById("opened_menu");
var open2=document.getElementById("menu_background");
open2.style.width = '100%';
open2.style.height = '100vh';
if(open1.style.display=="none")
{
open1.style.display="block";
}
else {
open1.style.display="none";
}
})
.mobile_background {
display: block;
width: 2rem;
height: 3rem;
background-color: red;
}
.mobile_menu {
display: none;
position: relative;
padding-top: 2rem;
padding-left: 2rem;
}
#menu_button {
position: fixed;
top: 0;
left: 0;
}
<div class="mobile_background" id="menu_background">
<div class="mobile_menu" id="opened_menu">
<p>menu 1</p>
<p>menu 2</p>
</div>
<button type="button" name="button" id="menu_button">
<div class="inner_menu">
<p>MENU</p>
</div>
</button>
</div>
Thanks in advance.

I bet this is what you want.
document.getElementById("menu_button").addEventListener("click", function() {
var open1 = document.getElementById("opened_menu");
var open2 = document.getElementById("menu_background");
if (open1.style.display == "none") {
open1.style.display = "block";
open2.style.width = '100%';
open2.style.height = '100vh';
} else {
open1.style.display = "none";
open2.style.width = '0%';
open2.style.height = '0vh';
}
})
.mobile_background {
display: block;
width: 0%;
height: 0vh;
background-color: red;
}
.mobile_menu {
display: none;
position: relative;
padding-top: 2rem;
padding-left: 2rem;
}
#menu_button {
position: fixed;
top: 0;
left: 0;
}
<div class="mobile_background" id="menu_background">
<div class="mobile_menu" id="opened_menu" style="display: none">
<p>menu 1</p>
<p>menu 2</p>
</div>
<button type="button" name="button" id="menu_button">
<div class="inner_menu">
<p>MENU</p>
</div>
</button>
</div>

FadeIn random Javascript Game

I am trying to solve this problem with my mini game using javascript. The Game is suppose to randomly show divs using the randomFadeIn with jquery.random-fade-in.min.js. It works but the problem is that I could not stop it from running. This is just a basic javascript game but it is hard to implement using jquery
Here is my full code
const result = document.getElementById(".box-container>div");
console.log(result);
const button = document.getElementsByTagName("div");
let sec = 0;
function gameStart(num) {
let num1 = 800;
if ($(".box-container>div>p").css('opacity') != 0) {
console.log("not yet done");
$(function() {
$('.box-container').randomFadeIn(800);
});
} else {
console.log("win");
};
}
function clickBox() {
$(".box-container>div>p").click(function() {
$(this).animate({
opacity: 0
}, 800);
})
}
function gameWins() {}
function gameStops() {
setTimeout(function() {
alert("Game Ends");
}, 60000);
}
clickBox();
//gameStops();
gameWins();
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>

By using the .stop() function, you could stop the animation. See snippet below.
let maxSeconds = 30000;
let numOfCards = $('.box').length;
function gameStart() {
console.log("Game started");
let numOfClicked = 0;
$(".box-container>div>p").click(function() {
// Increase the counter
numOfClicked++;
// Fade out
$(this).fadeOut(800);
if(numOfClicked == numOfCards){
gameWon();
}
})
$('.box-container').randomFadeIn(800);
setTimeout(
function() {
if(numOfClicked != numOfCards){
gameLost();
}
}, maxSeconds);
}
function gameWon(){
gameStop();
console.log("You won the game!");
}
function gameLost(){
gameStop();
console.log("You lost the game!");
}
function gameStop(){
$(".box-container>div>p").stop(false, false);
}
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
</div>

Overlay is forcing page to go to start whenever it is closed

i have to used many overlay so
when i close the overlay either right or left my page moves up and comes from start.
it can be easily checked by open the last two overlay.
this is the code.
i dont know where is mistake. or what should i add more in css.
as i selected the position fixed , may be this is the error but if changed it than more errors occur.
$(document).ready(function(){
left side overlay
$("#left-click1").click(function(){
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature1.jpg");
$("#para").text("1111ABCD");
});
$("#left-click2").click(function(){
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature2.jpg");
$("#para").text("2222ABCDEF");
});
right side overlay
$("#right-click1").click(function(){
$("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature3.jpg");
$("#para1").text("3333ABCDEF");
});
$("#right-click2").click(function(){
$("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature4.jpg");
$("#para1").text("4444ABCDEF");
});
$("#right-click3").click(function(){
$("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature5.jpg");
$("#para1").text("4444ABCDEF");
});
function openAnimeleft(){
document.getElementById("left").style.width = "60%";
}
function closeAnimeleft(){
document.getElementById("left").style.width = "0";
}
right side animation
function openAnimeright(){
document.getElementById("right").style.width = "60%";
}
function closeAnimeright(){
document.getElementById("right").style.width = "0";
}
<div id="left" class="left-styles">
×
<div>
<div>
<img id="image">
</div>
<div>
<p id="para"></p>
</div>
</div>
</div>
left side animation div
<div id="mains"><p>00000001</p>
<span id="left-click1" onclick="openAnimeleft()"> »» left-open1</span>
</div>
<div id="mains"><p>00000002</p>
<span id="left-click2" onclick="openAnimeleft()"> »» left-open2</span>
</div>
right side animation div
<div id="right" class="right-styles">
×
<div>
<div>
<img id="image1">
</div>
<div>
<p id="para1"></p>
</div>
</div>
</div>
<div id="mains"><p>00000003</p>
<span id="right-click1" onclick="openAnimeright()">«« right-open1</span>
</div>
<div id="mains"><p>00000004</p>
<span id="right-click2" onclick="openAnimeright()">«« right-open2</span>
</div>
<div id="mains">
<p>00000005</p>
<span id="right-click3" onclick="openAnimeright()">«« right-open3</span>
</div>
css code
.left-styles {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111000;
overflow: hidden;
transition: 0.5s;
padding-top: 60px;
}
.left-styles a ,.right-styles a{
text-decoration: none;
color: white;
transition: 1s;
}
#right-click1,#right-click2,#right-click3,#left-click1,#left-click2{
font-size: 30px;
cursor: pointer;
}
#media screen and (max-height: 450px)
{
.left-styles {padding-top: 15px;}
.left-styles a {font-size: 18px;}
.right-styles {padding-top: 15px;}
.right-styles a {font-size: 18px;}
}
.right-styles {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111000;
overflow: hidden;
transition: 0.5s;
padding-top: 60px;
}
.right-styles .cross-button, .left-styles .cross-button {
position: absolute;
top: 10px;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.right-styles a:hover, .left-styles a:hover{
color: green;
}
#para,#para1{
color: green;
font-size: 20px;
margin: 5vw;
}
#image,#image1{
width: 50vw;
height: 50vh;
margin-left: 6%;
}
#left,#right{
overflow: scroll;
}
#mains{
height: 200px;
}

If I understand you correctly, when you click the close button the page jumps to the top of the scroll window. If that is the problem, you need to use event.preventDefault();. This will stop the a tag behaving like a link.
$("#left-click1").click(function(event){
event.preventDefault();
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature1.jpg");
$("#para").text("1111ABCD");
});

Highlight menu on scroll not working

I am trying to highlight a menu link on scroll, when the associated element comes into view. I saw this answer, and I'm trying to write it in pure JavaScript. The problem is, when I scroll down, the menu links randomly get the active` class.
What am I doing wrong, and how can I fix it?
JSFiddle
window.addEventListener('scroll', selectLink)
var sections = {
link1: document.getElementById('1'),
link2: document.getElementById('2'),
link3: document.getElementById('3'),
link4: document.getElementById('4'),
};
function selectLink() {
var prevTarget = document.querySelector('.active');
var docHeight = document.documentElement.clientHeight;
for (var sectionKey in sections) {
if (!sections.hasOwnProperty(sectionKey)) continue;
var sectionKeyRect = sections[sectionKey].getBoundingClientRect();
if ((window.pageYOffset || doc.scrollTop) >= sectionKeyRect.top) {
prevTarget.classList.remove('active');
document.querySelector('#' + sectionKey).classList.add('active');
}
}
}
* {
margin: 0;
padding: 0;
}
#main {
width: 75%;
float: right;
}
#main div.target {
background: #ccc;
height: 400px;
}
#main div.target:nth-child(even) {
background: #eee;
}
#nav {
width: 25%;
position: relative;
}
#nav nav {
position: fixed;
width: 25%;
}
#nav a {
border-bottom: 1px solid #666;
color: #333;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
}
#nav a:hover,
#nav a.active {
background: #666;
color: #fff;
}
<section id="main">
<div class="target" id="1">TARGET 1</div>
<div class="target" id="2">TARGET 2</div>
<div class="target" id="3">TARGET 3</div>
<div class="target" id="4">TARGET 4</div>
</section>
<aside id="nav">
<nav>
<a id="link1" class="active">First</a>
<a id="link2">Second</a>
<a id="link3">Third</a>
<a id="link4">Fourth</a>
</nav>
</aside>

Why is my jquery code not working or throwing any errors?

You can checkout my project here: http://jsfiddle.net/raj4dev/2o4uapc9/1/
Summary: I am making a jquery image slider. You can change the image in a box by pressing next and previous arrows. Currently, I have added code only for the next arrow.
Issue: Nothing happens when I click the next arrow. I don't see any errors in the chrome developer tools.
Please tell me how I can debug and fix this issue ?
Code here.
HTML:
<!DOCTYPE html>
<body>
<div id="container">
<header>
<h1>jQuery content slider</h1>
</header>
<img src="http://icongal.com/gallery/image/337589/small_arrow_left.png" alt="Prev" id="prev">
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slide 1</h2>
<p>Dance and slide!</p>
</div>
<img src="http://m.rgbimg.com/cache1ny0NN/users/j/ja/jana_koll/600/mfOAUfa.jpg" alt="an image">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slide 2</h2>
<p>Dance and slide!</p>
</div>
<img src="https://s-media-cache-ak0.pinimg.com/736x/f9/2e/c0/f92ec0238d508e029be8b7163205d24e.jpg" alt="an image">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slide 3</h2>
<p>Dance and slide!</p>
</div>
<img src="http://www.pptbackgroundstemplates.com/backgrounds/abstract-red-light-wave-ppt-backgrounds-powerpoint.jpg" alt="an image">
</div>
</div>
<img src="http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-right-icon.png" alt="Next" id="next">
</div>
</body>
JS:
$(document).ready(function() {
var sliding_speed = 500;
var autoswitch = true;
var autoswitch_speed = 4000;
$('.slide').first().addClass('active');
//Hide all slides, but...
$('.slide').hide();
//...show only the first slide
$('.active').show();
$('#next').on('click', function(){
$('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
if($('.oldActive').is(':last-child')) {
$('.slide').first().addClass('active');
}else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
});
});
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #fff;
background: #333;
line-height: 1.6em;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#container {
width: 980px;
margin: 40px auto;
overflow: hidden;
}
#slider {
width: 940px;
height: 350px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
#silder img {
width: 940px;
height: 350px;
}
.slide {
position: absolute;
}
.slide-copy {
position: absolute;
bottom: 0px;
left:0;
padding: 20px;
background: #7f7f7f;
background: rgba(0,0,0,0.5);
width: 100%;
}
#prev, #next {
float: left;
margin-top: 130px;
cursor: pointer;
position: relative;
z-index: 100;
}
#prev {
margin-right: -45px;
}
#next {
margin-left: -45px;
}

You need to again hide all slide and then show only the active one. You are changing the classes to properly set your desired active slide to have the active class, but nothing says that all active slides are shown always and all other slides are hidden always.
http://jsfiddle.net/v1au2d57/
$('#next').on('click', function(){
$('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
if($('.oldActive').is(':last-child')) {
$('.slide').first().addClass('active');
}else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
//Hide all slides, but...
$('.slide').hide();
//...show only the first slide
$('.active').show();
});