We Keep Coding

JavaScript To Do List - Delete button is only appearing on the most recent item added

I am beginning to learn JavaScript and wanted to start a project to test myself. The classic to do list project.
I have created a function that basically pulls whatever text is in the input box and creates a new list item using that text. However, the delete button is only appearing on the most recent item in the list.
I can fix this by nesting the [var deleteButton = document.createElement('button');] (line 4) within the function, but when I do this the delete button no longer functions!
Any help at all would be really appreciated. (also, I know that is is not mobile responsive yet, I am planning to work on all of that after getting the functionality nailed).
Code:
$(document).ready(function() {
var submitButton = $('#taskEntryButton');
var taskEntry = $('#taskEntryField');
var deleteButton = document.createElement('button');
function submitFunction() {
// get the input value and put it into a variable
var newTaskContent = $('#taskEntryField').val();
// create a new list item
var newListItem = document.createElement('li');
// create a new checkbox for the new list item
var newCheckbox = document.createElement('INPUT');
newCheckbox.setAttribute('type', 'checkbox');
newListItem.appendChild(newCheckbox);
newCheckbox.setAttribute('class', '.activeCheckBox');
// create a new 'label' in the list item
var label = document.createElement('label');
label.innerText = newTaskContent;
newCheckbox.after(label);
// create a new div for the delete button
var buttonHolder = document.createElement('div');
buttonHolder.setAttribute('class', '.newButtonHolder');
label.after(buttonHolder);
// create the delete button
deleteButton.setAttribute('class', '.delete');
deleteButton.innerText = "Delete";
buttonHolder.appendChild(deleteButton);
// insert the new list item into the list (at the top)
$('#activeTaskList').prepend(newListItem);
// reset text box
taskEntry.val("");
};
submitButton.click(submitFunction);
// make function execute on enter
taskEntry.keypress(function(event) {
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
submitFunction();
// reset text box
taskEntry.val("");
}
});
// set up the delete button
deleteButton.addEventListener("click", deleteItem);
//delete function
function deleteItem() {
// grab list item (button -> div -> li)
let item = this.parentNode.parentNode;
// here i select the ul
let parent = item.parentNode;
//remove li from ul
parent.removeChild(item);
};
// here i make the 2 tab buttons show the relevent tab
var activeTabButton = document.getElementById('activeButton');
var completedTabButton = document.getElementById('completedButton');
var activeTab = document.getElementById('activeTasks');
var completedTab = document.getElementById('completedTasks');
activeTabButton.addEventListener("click", function() {
if (activeTab.style.display !== "block") {
activeTab.style.display = "block";
completedTab.style.display = "none";
};
});
completedTabButton.addEventListener("click", function() {
if (completedTab.style.display !== "block") {
completedTab.style.display = "block";
activeTab.style.display = "none";
};
});
});
* {
font-family: 'Karla', sans-serif;
}
body {
background-color: rgb(226, 217, 198);
}
.wrapper {
width: 100%;
height: 100vh;
display: flex;
}
#container {
background-color: #ffe8aa;
width: 30%;
height: 650px;
margin-left: auto;
margin-right: auto;
align-self: center;
border-radius: 20px;
}
#header {
height: 170px;
background-color: rgb(255, 189, 113);
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px 20px 0px 0px;
}
.tabsButton {
font-size: 1.2em;
width: 150px;
text-align: center;
border-style: none;
margin-left: 10px;
margin-right: 10px;
}
#taskEntryContainer {
margin-top: auto;
margin-bottom: auto;
display: flex;
}
#taskEntryField {
font-size: 1.2em;
}
#taskEntryButton {
margin-left: 50px;
font-size: 1.2em;
}
/* Task Lists */
#mainSection {
width: 100%;
}
#toDoListContainer {
width: 100%;
overflow: hidden;
border-radius: 0px 0px 20px 20px;
}
.taskList {
width: 100%;
list-style: none;
font-size: 1.5em;
}
.taskList li {
width: 86%;
display: flex;
align-items: baseline;
padding: 2%;
box-sizing: border-box;
border-radius: 10px;
margin-bottom: 20px;
background-color: #ffc038;
}
.taskList li label {
margin-left: 30px;
width: 75%;
}
.taskList button {
border-style: none;
background-color: #494949;
font-size: 0.7em;
color: white;
}
/* Active Tasks */
#activeTasks {
display: block;
z-index: 3;
}
/* Completed Tasks */
#completedTasks {
display: none;
z-index: 3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>To Do List</title>
<link href="styles.css" rel="stylesheet">
<script src="../jquery-3.5.1.js"></script>
<script src="scripts.js"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div id="container">
<div id="header">
<div id="toDoTabs">
<button class="tabsButton" id="activeButton">Active</button>
<button class="tabsButton" id="completedButton">Completed</button>
</div>
<div id="taskEntryContainer">
<input type="text" id="taskEntryField" input="" placeholder="Enter a new task...">
<button id="taskEntryButton">Submit</button>
</div>
</div>
<div id="mainSection">
<div id="toDoListContainer">
<div id="activeTasks">
<ul class="taskList" id="activeTaskList">
</ul>
</div>
<div id="completedTasks">
<ul class="taskList" id="completedTaskList">
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You should indeed create the button inside the submit function and then add the click event handler to that button (also inside the submit function). Because you only created the button once, every time when you append that button to some element it will just "move" the element.
$(document).ready(function() {
var submitButton = $('#taskEntryButton');
var taskEntry = $('#taskEntryField');
function submitFunction() {
// get the input value and put it into a variable
var newTaskContent = $('#taskEntryField').val();
// create a new list item
var newListItem = document.createElement('li');
// create a new checkbox for the new list item
var newCheckbox = document.createElement('INPUT');
newCheckbox.setAttribute('type', 'checkbox');
newListItem.appendChild(newCheckbox);
newCheckbox.setAttribute('class', '.activeCheckBox');
// create a new 'label' in the list item
var label = document.createElement('label');
label.innerText = newTaskContent;
newCheckbox.after(label);
// create a new div for the delete button
var buttonHolder = document.createElement('div');
buttonHolder.setAttribute('class', '.newButtonHolder');
/**
* NOTE HERE!!!
**/
var deleteButton = document.createElement("button");
// set up the delete button
deleteButton.addEventListener("click", deleteItem);
//delete function
function deleteItem() {
// grab list item (button -> div -> li)
let item = this.parentNode.parentNode;
// here i select the ul
let parent = item.parentNode;
//remove li from ul
parent.removeChild(item);
};
label.after(buttonHolder);
// create the delete button
deleteButton.setAttribute('class', '.delete');
deleteButton.innerText = "Delete";
buttonHolder.appendChild(deleteButton);
// insert the new list item into the list (at the top)
$('#activeTaskList').prepend(newListItem);
// reset text box
taskEntry.val("");
};
submitButton.click(submitFunction);
// make function execute on enter
taskEntry.keypress(function(event) {
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
submitFunction();
// reset text box
taskEntry.val("");
}
});
// here i make the 2 tab buttons show the relevent tab
var activeTabButton = document.getElementById('activeButton');
var completedTabButton = document.getElementById('completedButton');
var activeTab = document.getElementById('activeTasks');
var completedTab = document.getElementById('completedTasks');
activeTabButton.addEventListener("click", function() {
if (activeTab.style.display !== "block") {
activeTab.style.display = "block";
completedTab.style.display = "none";
};
});
completedTabButton.addEventListener("click", function() {
if (completedTab.style.display !== "block") {
completedTab.style.display = "block";
activeTab.style.display = "none";
};
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<div id="container">
<div id="header">
<div id="toDoTabs">
<button class="tabsButton" id="activeButton">Active</button>
<button class="tabsButton" id="completedButton">Completed</button>
</div>
<div id="taskEntryContainer">
<input type="text" id="taskEntryField" input="" placeholder="Enter a new task...">
<button id="taskEntryButton">Submit</button>
</div>
</div>
<div id="mainSection">
<div id="toDoListContainer">
<div id="activeTasks">
<ul class="taskList" id="activeTaskList">
</ul>
</div>
<div id="completedTasks">
<ul class="taskList" id="completedTaskList">
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You create the button outside the submitFunction function and use it more and more.
Move this line:
var deleteButton = document.createElement('button');
after:
// create the delete button
And, move also the event listener immediately after:
deleteButton.addEventListener("click", deleteItem);
Another solution is to create a clone of your button in your submitFunction using:
Node.cloneNode(): plain javascript
.clone(): using jQuery
The snippet:
$(document).ready(function() {
var submitButton = $('#taskEntryButton');
var taskEntry = $('#taskEntryField');
function submitFunction() {
// get the input value and put it into a variable
var newTaskContent = $('#taskEntryField').val();
// create a new list item
var newListItem = document.createElement('li');
// create a new checkbox for the new list item
var newCheckbox = document.createElement('INPUT');
newCheckbox.setAttribute('type', 'checkbox');
newListItem.appendChild(newCheckbox);
newCheckbox.setAttribute('class', '.activeCheckBox');
// create a new 'label' in the list item
var label = document.createElement('label');
label.innerText = newTaskContent;
newCheckbox.after(label);
// create a new div for the delete button
var buttonHolder = document.createElement('div');
buttonHolder.setAttribute('class', '.newButtonHolder');
label.after(buttonHolder);
// create the delete button
var deleteButton = document.createElement('button'); // MOVE HERE
// set up the delete button
deleteButton.addEventListener("click", deleteItem);
deleteButton.setAttribute('class', '.delete');
deleteButton.innerText = "Delete";
buttonHolder.appendChild(deleteButton);
// insert the new list item into the list (at the top)
$('#activeTaskList').prepend(newListItem);
// reset text box
taskEntry.val("");
};
submitButton.click(submitFunction);
// make function execute on enter
taskEntry.keypress(function(event) {
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
submitFunction();
// reset text box
taskEntry.val("");
}
});
//delete function
function deleteItem() {
// grab list item (button -> div -> li)
let item = this.parentNode.parentNode;
// here i select the ul
let parent = item.parentNode;
//remove li from ul
parent.removeChild(item);
};
// here i make the 2 tab buttons show the relevent tab
var activeTabButton = document.getElementById('activeButton');
var completedTabButton = document.getElementById('completedButton');
var activeTab = document.getElementById('activeTasks');
var completedTab = document.getElementById('completedTasks');
activeTabButton.addEventListener("click", function() {
if (activeTab.style.display !== "block") {
activeTab.style.display = "block";
completedTab.style.display = "none";
};
});
completedTabButton.addEventListener("click", function() {
if (completedTab.style.display !== "block") {
completedTab.style.display = "block";
activeTab.style.display = "none";
};
});
});
* {
font-family: 'Karla', sans-serif;
}
body {
background-color: rgb(226, 217, 198);
}
.wrapper {
width: 100%;
height: 100vh;
display: flex;
}
#container {
background-color: #ffe8aa;
width: 30%;
height: 650px;
margin-left: auto;
margin-right: auto;
align-self: center;
border-radius: 20px;
}
#header {
height: 170px;
background-color: rgb(255, 189, 113);
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px 20px 0px 0px;
}
.tabsButton {
font-size: 1.2em;
width: 150px;
text-align: center;
border-style: none;
margin-left: 10px;
margin-right: 10px;
}
#taskEntryContainer {
margin-top: auto;
margin-bottom: auto;
display: flex;
}
#taskEntryField {
font-size: 1.2em;
}
#taskEntryButton {
margin-left: 50px;
font-size: 1.2em;
}
/* Task Lists */
#mainSection {
width: 100%;
}
#toDoListContainer {
width: 100%;
overflow: hidden;
border-radius: 0px 0px 20px 20px;
}
.taskList {
width: 100%;
list-style: none;
font-size: 1.5em;
}
.taskList li {
width: 86%;
display: flex;
align-items: baseline;
padding: 2%;
box-sizing: border-box;
border-radius: 10px;
margin-bottom: 20px;
background-color: #ffc038;
}
.taskList li label {
margin-left: 30px;
width: 75%;
}
.taskList button {
border-style: none;
background-color: #494949;
font-size: 0.7em;
color: white;
}
/* Active Tasks */
#activeTasks {
display: block;
z-index: 3;
}
/* Completed Tasks */
#completedTasks {
display: none;
z-index: 3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
<div class="wrapper">
<div id="container">
<div id="header">
<div id="toDoTabs">
<button class="tabsButton" id="activeButton">Active</button>
<button class="tabsButton" id="completedButton">Completed</button>
</div>
<div id="taskEntryContainer">
<input type="text" id="taskEntryField" input="" placeholder="Enter a new task...">
<button id="taskEntryButton">Submit</button>
</div>
</div>
<div id="mainSection">
<div id="toDoListContainer">
<div id="activeTasks">
<ul class="taskList" id="activeTaskList">
</ul>
</div>
<div id="completedTasks">
<ul class="taskList" id="completedTaskList">
</ul>
</div>
</div>
</div>
</div>
</div>

When loading the header from a folder buttons getting error message

let myBtn = document.querySelector(".mainBtn");
let myManu = document.querySelector(".manu");
let manuOpen = false;
myManu.style.marginTop="-200px";
function menuFunction() {
if(manuOpen == false) { myManu.style.marginTop = "0px";
manuOpen = true;
}
else if (manuOpen == true) {
myManu.style.marginTop = "-200px";
manuOpen = false;
}
}
myBtn.onclick = menuFunction;
.mainBtn {
width: 40px;
height: 40px;
background: red;
z-index: 100;
margin-left: 10px;
cursor: pointer;
}
.mainBtn:hover {
background: yellow;
}
.social {
margin-right: 10px;
z-index: 100;
}
.manuSection {
max-width: 1080px;
width: 100%;
padding: 20px 0 20px 0;
float: right;
text-align: right;
}
.manu {
top: 40px;
max-width:1080px;
width: 100%;
position: absolute;
background: black;
transition: ease-in-out .5s;
}
.manu>ul>li, .manu>ul>li>a{
list-style: none;
text-decoration: none;
color: white;
}
.menuItems{
display: flex;
background: rgba(0,0,0,0.4);
justify-content: center;
margin: 2px;
padding: 7px;
}
.menuItems:hover{
background: rgba(134,134,134,0.32);
}
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("header").load("asserts/header.html");
$("footer").load("asserts/footer.html");
});
</script>
</head>
<body>
<header></header>
when the header was in the index.html file the js "menuFunction" was working properly, however, I thought of load the header and the footer from a different folder to each page and took the header piece and loaded to the "header" section..! and finding the js function is throwing an error message..""Uncaught TypeError: Cannot read property 'style' of null",".
the header code is
<div class="headerItems">
<div class="manuSection">
<div class="socialAndBtn">
<div class="mainBtn"></div>
<div class="social">
<img src="https://picsum.photos/40/40?random=1" alt="">
<img src="https://picsum.photos/40/40?random=2" alt="">
<img src="https://picsum.photos/40/40?random=3" alt="">
</div>
</div>
<div class="manu">
<ul>
<li><span class="menuItems">Home</span></li>
<li><span class="menuItems">Services</span></li>
<li><span class="menuItems">Products</span></li>
<li><span class="menuItems">Contact</span></li>
</ul>
</div>
</div>
<div class="title"><h1>My Business Name</h1></div>
<div class="telephone"><h2>416 999 9999</h2></div>
</div>

When the browser reads the js code, especially document.querySelector(".mainBtn") and document.querySelector(".manu") the content of the header has not been loaded yet, hence the error message. load method can take a callback function as second argument, this function will be executed once the file has been loaded. My advise is to move your js code within this callback, like so…
$("header").load("asserts/header.html", function () {
let myBtn = document.querySelector(".mainBtn");
let myManu = document.querySelector(".manu");
let manuOpen = false;
myManu.style.marginTop = "-200px";
myBtn.onclick = menuFunction;
function menuFunction() {
if (manuOpen == false) {
myManu.style.marginTop = "0px";
manuOpen = true;
} else if (manuOpen == true) {
myManu.style.marginTop = "-200px";
manuOpen = false;
}
}
});

How do I get a custom right-click context menu to show two links to a page on my site?

I want users to be able to right click and have the custom contentmenu have two choices:
Contact (with link https://rowurbux.weebly.com/contact.html)
Support (with link https://rowurbux.weebly.com/support.html)
<html>
<head>
<script type="text/javascript">
if (document.addEventListener) { // IE >= 9;other browsers
document.addEventListener('contextmenu', function(e) {
alert("You've tried to open context menu"); //here you draw your own menu
e.preventDefault();
}, false);
} else { // IE < 9
document.attachEvent('oncontextmenu', function() {
alert("You've tried to open context menu");
window.event.returnValue = false;
});
}
</script>
</head>
<body> Lorem ipsum... </body>
</html>
Help me out with this please!
Thanks everybody,
Will
A JS or HTML answer is perferrable

Here is simple Context menu in pure javascript
const element = document.getElementById("box1");
const listElement = document.getElementById("list");
const onClickOutside = (event) => {
listElement.style.display = "none";
document.removeEventListener("click", onClickOutside);
};
listElement.addEventListener("contextmenu", (event) => {
event.stopPropagation();
});
listElement.addEventListener("mouseup", (event) => {
event.stopPropagation();
});
document.addEventListener("contextmenu", (event) => {
listElement.style.display = "none";
});
listElement.addEventListener("click", (event) => {
event.stopPropagation();
});
element.addEventListener("mouseup", (event) => {
event.stopPropagation();
if (event.button === 2) {
return;
}
});
element.addEventListener("contextmenu", (event) => {
event.preventDefault();
event.stopPropagation();
document.addEventListener("click", onClickOutside);
const x = event.offsetX;
const y = event.offsetY - 15;
listElement.style.display = "block";
listElement.style.top = y + "px";
listElement.style.left = x + "px";
});
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
.section {
height: 100%;
display: flex;
justify-content: space-between;
}
.box1 {
position: relative;
height: 400px;
width: 400px;
background-color: #e7e7e7;
}
.list {
display: none;
position: absolute;
list-style: none;
background-color: #fff;
width: 100px;
padding: 0;
}
.list li {
padding: 10px;
cursor: pointer;
}
.list li a{
padding: 0;
text-decoration: none;
color: #333;
}
.list li a:hover, .list li:hover a{
text-decoration: none;
color: #fff;
}
.list li:hover {
background-color: #333;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<title>Document</title>
</head>
<body>
<section class="section">
<div class="left_panel">
<div class="box1" id="box1">
<p>Right Click on anywhere inside place to get links in context menu</p>
<ul class="list" id="list">
<li>Contact</li>
<li>Support</li>
</ul>
</div>
</div>
</section>
</body>
</html>

use that :D
HTML code:
<script >
if (document.addEventListener) { // IE >= 9;other browsers
document.addEventListener('contextmenu', function(e) {
var modal = document.getElementById('myModal');
modal.style.display = "block";
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
e.preventDefault();
}, false);
} else { // IE < 9
document.attachEvent('oncontextmenu', function() {
var modal = document.getElementById('myModal');
modal.style.display = "block";
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
window.event.returnValue = false;
});
}
</script>
<p>custom contentmenu as modal </p>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p> Contact</p>
<p> Support</p>
</div>
</div>
css code:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
I change it for moodal opened after right mouse click xD
good luck xD

Close overlay on page refresh/revisit

I have the following HTML, CSS, and Javascript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getTarget(event){
target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
return target;
}
document.onclick = function(event){
var target = getTarget(event);
if(target.id == ""){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
}
}
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
button.style.color="#ff0000";
}
}
</script>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #A9A9A9;
position: fixed;
width: 879px;
height: 291px;
top: 50px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3;
width: 719px;
height: 215px;
top: 88px;
left: 80px;
background: #FFF;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
</style>
<style type="text/css">
.btn {
cursor:pointer;
font-size:24px;
border:none;
color:#000
}
.btn:hover{
color:#F00;
}
</style>
<style type="text/css">
.x {
background-color:white;
cursor:pointer;
font:Arial;
font-size:14px;
color:red;
z-index: 4;
position: fixed;
top: 92px;
left: 766px;
}
</style>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
</div>
</body>
</html>
The overlay opens and closes just fine. However, if the overlay is opened and the user visits another page on the website, and returns to the original page where the overlay was, the overlay still remains open...Is there a way to make the overlay close upon refreshing the page and upon returning to the page having visited another one?
Any help is much appreciated :)
James

Try This using display none to the div which you want to hide while refreshing
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getTarget(event){
target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
return target;
}
document.onclick = function(event){
var target = getTarget(event);
if(target.id == ""){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
}
}
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
button.style.color="#ff0000";
}
}
</script>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #A9A9A9;
position: fixed;
width: 879px;
height: 291px;
top: 50px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3;
width: 719px;
height: 215px;
top: 88px;
left: 80px;
background: #FFF;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
</style>
<style type="text/css">
.btn {
cursor:pointer;
font-size:24px;
border:none;
color:#000
}
.btn:hover{
color:#F00;
}
</style>
<style type="text/css">
.x {
background-color:white;
cursor:pointer;
font:Arial;
font-size:14px;
color:red;
z-index: 4;
position: fixed;
top: 92px;
left: 766px;
}
</style>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay" style="display: none"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
</div>
</body>
</html>

The easiest way I can think of is using Localstorage to do the task. You can read more about localstorage Here
In your case you will have to save timestamp in the variable. And then you can have an if statement on your homepage which checks the time which has elapsed since last time the page was refreshed. Let's say if it is more than 10 minutes or maybe 30 minutes you can show the overlay again. The reason I am saying you will need timestamp is that you will have to unset the variable if the user visits again after some time and is not returning from with-in the website. There is no timeout function in localstorage so you will have to use a tweak like timestamp.
Another way is to save a value in $_SESSION and see if it is set to certain value. If it is then it means it is a returning user else its a new user. But I am not sure if your page is php or not therefore I have mentioned localstorage method first.
If you need any further assistance please do let me know.

In my opionion there are at least two solutions.
using coockies
using global function
Second solution:
create your "popup.js" and call it in html, of course. Your js will be:
var Popup = (function () {
var isVisible;
return {
init: function () {
isVisible = false;
},
show: function() {
....
},
hide: function() {
....
},
isVisible: function() {
return isVisible;
}
};
}());

Clicking in the top corners of my webpage causes the flex boxes to misbehave

I have been making a simple page using flexboxes that should expand one flex box to the majority of the page on a click. However, the page will occasionally make the sizes of all of the flexboxes equal (see the below picture). I've only notices it when I click in the corners of the page on the yellow or blue sections. Does anyone have an idea of what is going on?
Edit: Added relevant code and removed JS Bin links
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
<link href="/stylesheets/flex.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="yel" class="page selected">
<h2>Home
</h2>
</div>
<div id="green" class="page">
<h2>About Me
</h2>
</div>
<div id="red" class="page">
<h2>Portfolio
</h2>
</div>
<div id="blue" class="page">
<h2>Playground
</h2>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
display: -webkit-flex;
-webkit-flex-flow: row;
}
.selected {
min-width: 90%;
}
#red {
background-color: #f00;
}
#yel {
background-color: #ff0;
}
#green {
background-color: #008000;
}
#blue {
background-color: #00f;
}
.page {
flex: 1;
min-width: auto;
min-height: 100%;
-webkit-transition-duration: 750ms;
}
.page h2 {
font: 20px Helvetica, Tahoma, sans-serif bold;
color: #ccc;
-webkit-transform: rotate(90deg);
margin: 5px;
}
.content {
margin: 10% auto auto auto;
padding: 10px;
width: 90%;
height: 50%;
border: 1px solid #000;
}
JS
var $ = function(sel, e) {return (e || document).querySelector(sel)};
var $$ = function(sel, e) {return (e || document).querySelectorAll(sel)};
var boxes = $$('.page');
var links = $$('.nav');
var flexTransitionTo = function flexTransitionTo(el) {
if(!el.classList.contains('selected')) {
$('.selected').classList.remove('selected');
el.classList.add('selected');
}
};
for(var i = 0; i < boxes.length; i++) {
var el;
boxes[i].addEventListener('click', function(event) {
el = event.target;
flexTransitionTo(el);
});
}
for(var i = 0; i < links.length; i++) {
var el;
var pageEl;
links[i].addEventListener('click', function(event) {
el = event.target;
pageEl = $(el.dataset.page); //should get the page I want
flexTransitionTo(pageEl);
});
}

I can tell you the why, but I can't give you the fix (my JavaScript-fu is weak). The problem is that when you click on the h2 element (or probably any other descendant of the page element), it is intercepting the click event and it has the selected class applied to it. Because the selected class is removed from all page elements, none of them are set to selected.