Develop Reference

Closing an element when clicked outside the div or its opening button with Vanilla JS

I have two buttons, one of them opens a form, and the other one a dropdown.
I want both elements to close when clicking outside, the dropdown is ok because I want it to close whenever the user clicks outside the opening button.
But the second doesn't work, I want it to close when this logical formula is true:
(the opening button 'fulfillSetButton' isn't clicked) OR (the
form 'dateForm' isn't clicked)
Therefore I've made an event listener for the whole HTML with the formula inside an if statement:
html.addEventListener("click", function(e){
if(e.target !== (dateForm || fulfillSetButton)){
dateForm.classList.remove("active");
}
});
But it doesn't work any ideas about what is wrong?
// All the elements
const dropdownButton = document.querySelector("#dropdownToggle"),
fulfillSetButton = document.querySelector("#fulfillSetButton"),
dropdownMenu = document.querySelector('.dropdown-menu'),
html = document.querySelector("html"),
dateForm = document.querySelector(".completion-date");
// Preventing default action of submiting the form
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
// Closing the dropdown *working*
dropdownButton.addEventListener("click", function () {
dropdownMenu.classList.toggle("show");
});
html.addEventListener("click", function(e){
if(e.target !== dropdownButton){
dropdownMenu.classList.remove("show");
}
});
// Opening the date form
fulfillSetButton.addEventListener("click", function() {
dateForm.classList.add("active");
});
// Closing the date form by submiting
dateForm.lastElementChild.addEventListener(
"click", function () {
preventDefault();
dateForm.classList.remove("active");
}
);
// Closing the date form by clicking outside *not working*
html.addEventListener("click", function(e){
if(e.target !== (dateForm || fulfillSetButton)){
dateForm.classList.remove("active");
}
});
:root {
--trans-left:#84fab0;
--trans-right:#8fd3f4;
--background: #fff;
--color: #222;
}
.button-list {
align-self: center;
}
.completion-date {
display: block;
z-index: 10;
position: fixed;
top: -100%;
left: calc(50% - 121px);
min-width: max-content;
padding: 1rem;
border-radius: 0.5rem;
background: var(--background);
text-align: center;
box-shadow: 0 0 18px -6px var(--color);
transition: 0.3s;
}
.completion-date.active {
top: calc(50% - 264px);
}
.completion-date div {
margin: 0.5rem;
}
.completion-date input,
.completion-date button {
margin: auto 0;
}
.completion-date input {
width: 2rem;
text-align: center;
}
.completion-date div > button {
width: 1.5rem;
margin: auto 3px;
box-shadow: none;
font-weight: bold;
}
section {
width: 100vw;
}
input {
box-shadow: inset 0 3px 7px -3px black;
border: none;
line-height: 2rem;
}
button {
padding: 9px;
border: none;
box-shadow: 7px 7px 9px -10px var(--color), inset 0 0 15px -12px var(--color);
border-radius: 6px;
}
.entry {
display: flex;
align-items: flex-end;
height: 30vh;
background-image: linear-gradient(120deg, var(--trans-left) 0%, var(--trans-right) 100%);
}
#media screen and (max-height: 660px) {
.entry {
height: 38vh;
}
}
form {
display: flex;
flex-wrap: wrap;
max-width: 36rem;
justify-content: center;
margin: 0 auto;
}
form > * {
max-height: 100%;
}
form > div {
display: flex;
}
form > input {
margin: 0.5rem;
box-shadow: inset 0px 3px 9px -4px #000000;
border-radius: 6px;
}
.second-item {
flex-wrap: wrap;
justify-content: center;
}
.second-item > * {
margin: 0.5rem;
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.dropdown-wrap > *:first-child {
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.dropdown-wrap > *:first-child {
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.btn.dropdown {
transition: 0.3s ease;
}
.btn.dropdown.low {
background-color: #84fab0;
}
.btn.dropdown.high {
background-color: #ffa0a0;
}
.dropdown-menu {
z-index: 2;
position: absolute;
margin-top: 9px;
list-style: none;
padding-inline-start: 0;
margin-block-end: 0;
background: #fff;
box-shadow: 1px 1px 20px -9px black;
border-radius: 9px;
pointer-events: none;
opacity: 0;
transition: 0.3s ease;
}
.dropdown-menu > li {
padding: 0.4rem;
cursor: pointer;
}
.dropdown-menu.show {
pointer-events: all;
opacity: 1;
}
<section class="entry">
<form autocomplete="off">
<input type="text" id="taskText">
<div class="second-item">
<button type="button" id="fulfillSetButton">Date form</button>
<div class="dropdown-wrap">
<button class="btn dropdown" type="button" id="dropdownToggle">Dropdown button</button>
<ul class="dropdown-menu" id="taskPriority" style="background: linear-gradient(0deg, rgba(132,250,176,1) 0%, rgba(132,250,176,1) 33%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 66%, rgba(255,160,160,1) 66%, rgba(255,160,160,1) 100%); color: #000">
<li>Vysoká</li>
<li>Střední</li>
<li>Nízká</li>
</ul>
</div>
<button type="submit">submit</button>
</div>
</form>
<form class="completion-date">
<h2>Dokončit za:</h2>
<div>
<button onclick="increaseValue(months)">+</button>
<input id="months" type="number" value="0" min="0" max="12">
<button onclick="decreaseValue(months)">-</button>
<p>měsíců</p>
</div>
<div>
<button onclick="increaseValue(weeks)">+</button>
<input id="weeks" type="number" value="0" min="0" max="5">
<button onclick="decreaseValue(weeks)">-</button>
<p>týdnů</p>
</div>
<div>
<button onclick="increaseValue(days)">+</button>
<input id="days" type="number" value="0" min="0" max="31">
<button onclick="decreaseValue(days)">-</button>
<p>dní</p>
</div>
<div>
<button onclick="increaseValue(hours)">+</button>
<input id="hours" type="number" value="0" min="0" max="23">
<button onclick="decreaseValue(hours)">-</button>
<p>hodin</p>
</div>
<div>
<button onclick="increaseValue(minutes)">+</button>
<input id="minutes" type="number" value="0" min="0" max="59">
<button onclick="decreaseValue(minutes)">-</button>
<p>minut</p>
</div>
<button>Nastavit</button>
</form>
</section>

Try this:
window.addEventListener('click', function(e){
if( div.contains(e.target)){
//click inside of element
} else{
//click outside of element
}
});
I fixed some CSS and HTML to.
// All the elements
const dropdownButton = document.querySelector("#dropdownToggle"),
fulfillSetButton = document.querySelector("#fulfillSetButton"),
dropdownMenu = document.querySelector('.dropdown-menu'),
html = document.querySelector("body"),
dateForm = document.querySelector("#completion-date-id");
// Preventing default action of submiting the form
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
// Closing the dropdown *working*
dropdownButton.addEventListener("click", function () {
dropdownMenu.classList.toggle("show");
});
//new way works every spot on page
window.addEventListener('click', function(e){
if( dropdownButton.contains(e.target)){
} else{
dropdownMenu.classList.remove("show");
}
});
//Old way
//html.addEventListener("click", function(e){
// if(e.target !== dropdownButton){
// dropdownMenu.classList.remove("show");
// }
//});
// Opening the date form
fulfillSetButton.addEventListener("click", function() {
dateForm.classList.add("active");
});
// Closing the date form by submiting
dateForm.lastElementChild.addEventListener(
"click", function () {
preventDefault();
dateForm.classList.remove("active");
}
);
// Closing the date form by clicking outside *working now*
window.addEventListener('click', function(e){
if( dateForm.contains(e.target) || fulfillSetButton.contains(e.target)){
} else{
dateForm.classList.remove("active");
}
});
// Closing the date form by clicking outside *not working*
//html.addEventListener("click", function(e){
// if(e.target !== (dateForm || fulfillSetButton)){
// dateForm.classList.remove("active");
// }
//});
:root {
--trans-left:#84fab0;
--trans-right:#8fd3f4;
--background: #fff;
--color: #222;
}
.button-list {
align-self: center;
}
.completion-date {
z-index: 10;
position: fixed;
top: -100%;
left: calc(50% - 121px);
min-width: max-content;
padding: 1rem;
border-radius: 0.5rem;
background: var(--background);
text-align: center;
box-shadow: 0 0 18px -6px var(--color);
transition: 0.3s;
}
.completion-date.active {
top: calc(50% - 264px);
}
.completion-date div {
margin: 0.5rem;
}
.completion-date input,
.completion-date button {
margin: auto 0;
}
.completion-date input {
width: 2rem;
text-align: center;
}
.completion-date div > button {
width: 1.5rem;
margin: auto 3px;
box-shadow: none;
font-weight: bold;
}
section {
width: 100vw;
}
input {
box-shadow: inset 0 3px 7px -3px black;
border: none;
line-height: 2rem;
}
button {
padding: 9px;
border: none;
box-shadow: 7px 7px 9px -10px var(--color), inset 0 0 15px -12px var(--color);
border-radius: 6px;
}
.entry {
display: flex;
align-items: flex-end;
height: 30vh;
background-image: linear-gradient(120deg, var(--trans-left) 0%, var(--trans-right) 100%);
}
#media screen and (max-height: 660px) {
.entry {
height: 38vh;
}
}
form {
display: flex;
flex-wrap: wrap;
max-width: 36rem;
justify-content: center;
margin: 0 auto;
}
form > * {
max-height: 100%;
}
form > div {
display: flex;
}
form > input {
margin: 0.5rem;
box-shadow: inset 0px 3px 9px -4px #000000;
border-radius: 6px;
}
.second-item {
flex-wrap: wrap;
justify-content: center;
}
.second-item > * {
margin: 0.5rem;
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.dropdown-wrap > *:first-child {
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.dropdown-wrap > *:first-child {
box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}
.btn.dropdown {
transition: 0.3s ease;
}
.btn.dropdown.low {
background-color: #84fab0;
}
.btn.dropdown.high {
background-color: #ffa0a0;
}
.dropdown-menu {
z-index: 2;
position: absolute;
margin-top: 9px;
list-style: none;
padding-inline-start: 0;
margin-block-end: 0;
background: #fff;
box-shadow: 1px 1px 20px -9px black;
border-radius: 9px;
pointer-events: none;
opacity: 0;
transition: 0.3s ease;
}
.dropdown-menu > li {
padding: 0.4rem;
cursor: pointer;
}
.dropdown-menu.show {
pointer-events: all;
opacity: 1;
}
.active{
display: block;
}
<body>
<section class="entry">
<form autocomplete="off">
<input type="text" id="taskText">
<div class="second-item">
<button type="button" id="fulfillSetButton">Date form</button>
<div class="dropdown-wrap">
<button class="btn dropdown" type="button" id="dropdownToggle">Dropdown button</button>
<ul class="dropdown-menu" id="taskPriority" style="background: linear-gradient(0deg, rgba(132,250,176,1) 0%, rgba(132,250,176,1) 33%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 66%, rgba(255,160,160,1) 66%, rgba(255,160,160,1) 100%); color: #000">
<li>Vysoká</li>
<li>Střední</li>
<li>Nízká</li>
</ul>
</div>
<button type="submit">submit</button>
</div>
</form>
<form id="completion-date-id" class="completion-date active">
<h2>Dokončit za:</h2>
<div>
<button onclick="increaseValue(months)">+</button>
<input id="months" type="number" value="0" min="0" max="12">
<button onclick="decreaseValue(months)">-</button>
<p>měsíců</p>
</div>
<div>
<button onclick="increaseValue(weeks)">+</button>
<input id="weeks" type="number" value="0" min="0" max="5">
<button onclick="decreaseValue(weeks)">-</button>
<p>týdnů</p>
</div>
<div>
<button onclick="increaseValue(days)">+</button>
<input id="days" type="number" value="0" min="0" max="31">
<button onclick="decreaseValue(days)">-</button>
<p>dní</p>
</div>
<div>
<button onclick="increaseValue(hours)">+</button>
<input id="hours" type="number" value="0" min="0" max="23">
<button onclick="decreaseValue(hours)">-</button>
<p>hodin</p>
</div>
<div>
<button onclick="increaseValue(minutes)">+</button>
<input id="minutes" type="number" value="0" min="0" max="59">
<button onclick="decreaseValue(minutes)">-</button>
<p>minut</p>
</div>
<button>Nastavit</button>
</form>
</section>
</body>

How to have different color for each progress bar?

I am trying to have a different color for each progress bar. I can't change the color of the second bar and so on. Should I create a class for each bar in JavaScript to inject color? How can I load this same animation with a different color for each bar?
Hi, I am trying to have a different color for each progress bar. I can't change the color of the second bar and so on. Should I create a class for each bar in JavaScript to inject color? How can I load this same animation with a different color for each bar?
Html:
<div class="progressbar">
<h1 class="title">My Tools & Skills</h1>
<div class="skill-progress">
<h3>HTML5</h3>
<div class="progress">
<div class="progress-done" data-done="70">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="60">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="50">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="40">
</div>
</div>
</div>
</div>
CSS:
.progressbar h3 {
font-family: 'Poppins', sans-serif;
font-size: 1.2em;
color: #666666;
margin: auto;
}
.skill-progress {
margin-bottom: 10px;
}
.progress {
background-color: #f2f2f2;
border-radius: 20px;
height: 25px;
width: 450px;
margin: 20px auto;
}
.progress-done {
background: linear-gradient(to right, #f83600 0%, #f9d423 100%);
box-shadow: 0 3px 3px -5px #f83600, 0 2px 5px #f9d423;
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
opacity: 0;
transition: 4s ease 0.3s;
}
JS:
const progresses = document.querySelectorAll('.progress-done');
progresses.forEach(progress => {
const done = progress.getAttribute('data-done');
const duration = getComputedStyle(progress).transitionDuration;
const timeoutDuration = +duration.slice(0, 1) * 1000;
progress.style.width = done + "%";
progress.style.opacity = 1;
for (let i = 0; i <= done; i++) {
setTimeout(() => {
progress.innerText = i + "%";
}, (timeoutDuration / done) * i);
}
});

You can have have many colors, than u can keep data in array in js. If you have very limited combination, you can create class like .progress-done.success .progress-done.error .progress-done.info
Sample:
const progresses = document.querySelectorAll(".progress-done");
const colors = [
["#f83600", "#f9d423"],
["#f8ff00", "#f9d423"],
["#f83660", "#f9d423"],
["#f86600", "#f9d423"],
["#f86600", "#f9d423"],
["#f86600", "#f9d423"]
];
progresses.forEach((progress, index) => {
const [bgColor, bgShadow] = colors[index];
const background = `linear-gradient(to right, ${bgColor} 0%, ${bgShadow} 100%)`;
const boxShadow = `0 3px 3px -5px ${bgColor}, 0 2px 5px ${bgShadow}`;
const done = progress.getAttribute('data-done');
const duration = getComputedStyle(progress).transitionDuration;
const timeoutDuration = +duration.slice(0, 1) * 1000;
progress.style.width = done + "%";
progress.style.opacity = 1;
progress.style.background = background;
progress.style.boxShadow = boxShadow;
for (let i = 0; i <= done; i++) {
setTimeout(() => {
progress.innerText = i + "%";
}, (timeoutDuration / done) * i);
}
});
// By class name
progresses[4].className += " success"
progresses[5].className += " info"
.progressbar h3 {
font-family: 'Poppins', sans-serif;
font-size: 1.2em;
color: #666666;
margin: auto;
}
.skill-progress {
margin-bottom: 10px;
}
.progress {
background-color: #f2f2f2;
border-radius: 20px;
height: 25px;
width: 450px;
margin: 20px auto;
}
.progress-done {
background: linear-gradient(to right, #f83600 0%, #f9d423 100%);
box-shadow: 0 3px 3px -5px #f83600, 0 2px 5px #f9d423;
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
opacity: 0;
transition: 4s ease 0.3s;
}
.progress-done.success {
background: linear-gradient(to right, #00ff00 0%, #f9d423 100%) !important;
box-shadow: 0 3px 3px -5px #00ff00, 0 2px 5px #f9d423!important;
}
.progress-done.info {
background: linear-gradient(to right, #00ffff 0%, #00ff00 100%)!important;
box-shadow: 0 3px 3px -5px #00ffff, 0 2px 5px #00ff00!important;
}
<div class="progressbar">
<h1 class="title">My Tools & Skills</h1>
<div class="skill-progress">
<h3>HTML5</h3>
<div class="progress">
<div class="progress-done" data-done="70">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="60">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="50">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="40">
</div>
</div>
</div>
</div>

I suggest you insert a css subclass where you specify the color of the bar.

Why not add unique classes to each progress bar?
HTML
<div class="progress progress-1">
<div class="progress-done" data-done="70"></div>
</div>
<div class="progress progress-2">
<div class="progress-done" data-done="60"></div>
</div>
CSS
.progress-1 .progress-done {
background: linear-gradient(to right, #f83600 0%, #f9d423 100%);
box-shadow: 0 3px 3px -5px #f83600, 0 2px 5px #f9d423;
}
.progress-2 .progress-done {
background: linear-gradient(to right, #e7e7e7 0%, #f9f9f9 100%);
box-shadow: 0 3px 3px -5px #e7e7e7, 0 2px 5px #f9f9f9;
}
.progress {
background-color: #f2f2f2;
border-radius: 20px;
height: 25px;
width: 450px;
margin: 20px auto;
}
.progress-done {
/* Remove colour from here */
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
opacity: 0;
transition: 4s ease 0.3s;
}

You just need to change the colors. In this example I added a color class to each .progress element and then created class for each child element with the corresponding color.
const progresses = document.querySelectorAll('.progress-done');
progresses.forEach(progress => {
const done = progress.getAttribute('data-done');
const duration = getComputedStyle(progress).transitionDuration;
const timeoutDuration = +duration.slice(0, 1) * 1000;
progress.style.width = done + "%";
progress.style.opacity = 1;
for (let i = 0; i <= done; i++) {
setTimeout(() => {
progress.innerText = i + "%";
}, (timeoutDuration / done) * i);
}
});
.progressbar h3 {
font-family: 'Poppins', sans-serif;
font-size: 1.2em;
color: #666666;
margin: auto;
}
.skill-progress {
margin-bottom: 10px;
}
.progress {
border-radius: 20px;
height: 25px;
width: 450px;
margin: 20px auto;
}
.progress-done {
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
opacity: 0;
transition: 4s ease 0.3s;
}
.red{ background-color: #ff0000; }
.blue{ background-color: #0000ff; }
.green{ background-color: #00ff00; }
.yellow{ background-color: #ffff00; }
.red .progress-done {
background: linear-gradient(to right, #ff0000 0%, #ffffff 100%);
box-shadow: 0 3px 3px -5px #ff0000, 0 2px 5px #ffffff;
}
.blue .progress-done {
background: linear-gradient(to right, #0000ff 0%, #ffffff 100%);
box-shadow: 0 3px 3px -5px #0000ff, 0 2px 5px #ffffff;
}
.green .progress-done {
background: linear-gradient(to right, #00ff00 0%, #ffffff 100%);
box-shadow: 0 3px 3px -5px #00ff00, 0 2px 5px #ffffff;
}
.green .progress-done {
background: linear-gradient(to right, #ffff00 0%, #ffffff 100%);
box-shadow: 0 3px 3px -5px #ffff00, 0 2px 5px #ffffff;
}
<div class="progressbar">
<h1 class="title">My Tools & Skills</h1>
<div class="skill-progress">
<h3>HTML5</h3>
<div class="progress red">
<div class="progress-done" data-done="70">
</div>
</div>
<div class="progress blue">
<div class="progress-done" data-done="60">
</div>
</div>
<div class="progress green">
<div class="progress-done" data-done="50">
</div>
</div>
<div class="progress yellow">
<div class="progress-done" data-done="40">
</div>
</div>
</div>
</div>

Is there a way to create a "pop up" event creation in a calendar using jQuery?

I am creating a calendar so members of different teams can create events based on what team they are on. I need it to work somewhat like Google Calendar. So when you click on the date, a "create event" pop up window will come up. The only thing in the pop up would be the title of the event, time, description, and the color that is assigned to that team.
There's got to be a way to do this in jQuery, but I've looked all over the jQueryUI website, and I can't seem to find anything.
Below is the HTML layout that I have created for the calendar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>eTeam Leader Calendar</title>
<link rel="stylesheet" href="calendar.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
</head>
<body>
<div id="cal">
<div class="header">
<span class="left button" id="prev"> 〈 </span>
<span class="left hook"></span>
<span class="month-year" id="label"> January 2017 </span>
<span class="right hook"></span>
<span class="right button" id="next"> 〉 </span>
</div>
<table id="days">
<td>sun</td>
<td>mon</td>
<td>tue</td>
<td>wed</td>
<td>thu</td>
<td>fri</td>
<td>sat</td>
</table>
<div id="cal-frame">
<table class="curr">
<tbody>
<tr><td class="today">1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
<tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr>
<tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
<tr><td>29</td><td>30</td><td>31</td><td class="nil"></td><td class="nil"></td><td class="nil"></td><td class="nil"></td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
And the CSS:
body {
background: #e0e0e0;
}
#cal {
-moz-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25);
margin:50px auto;
font: 13px/1.5 "Helvetica Neue", Helvatica, Arial, san-serif;
display:table;
width:100%;
}
#cal .header {
cursor:default;
background: #FFF800;
background: -moz-linear-gradient(top, #FFF800, #FFF800);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF800), to(#FFF800));
height: 34px;
position: relative;
color:#000000;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-weight:bold;
text-shadow:0px -1px 0 #87260C;
text-transform: uppercase;
}
#cal .header span {
display:inline-block;
line-height:34px;
}
#cal .header .hook {
width: 9px;
height: 28px;
position: absolute;
bottom:60%;
}
.right.hook {
right:15%;
}
.left.hook {
left: 15%;
}
#cal .header .button {
width:24px;
text-align:center;
position:absolute;
}
#cal .header .left.button {
left:0;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
border-right:1px solid #000000;
}
#cal .header .right.button {
right:0;
top:0;
border-left:1px solid #000000;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
#cal .header .button:hover {
background: -moz-linear-gradient(top, #ffffff, #ffffff);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
}
#cal .header .month-year {
letter-spacing: 1px;
width: 100%;
text-align: center;
}
#cal table {
background:#fff;
border-collapse:collapse;
width:100%;
}
#cal td {
color:#2b2b2b;
width:30px;
height:90px;
line-height:30px;
text-align:center;
border:1px solid #e6e6e6;
cursor:default;
}
#cal #days td {
line-height: 26px;
text-transform:uppercase;
font-size:90%;
color:#9e9e9e;
}
#cal #days td:not(:last-child) {
border-right:1px solid #fff;
}
#cal #cal-frame td.today {
background:#d3d3d3;
color:black;
box-shadow:1px 1px 0px #fff inset;
-moz-box-shadow:1px 1px 0px #fff inset;
-webkit-box-shadow:1px 1px 0px #fff inset;
}
#cal #cal-frame td:not(.nil):hover {
color:#000000;
text-shadow: #FFF800 0px -1px;
background:#FFF800;
background: -moz-linear-gradient(top, #b32b0c, #cd310d);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF800), to(#FFF800));
-moz-box-shadow:0px 0px 0px;
-webkit-box-shadow:0px 0px 0px;
}
#cal #cal-frame td span {
font-size:80%;
position:relative;
}
#cal #cal-frame td span:first-child {
bottom:5px;
}
#cal #cal-frame td span:last-child {
top:5px;
}
#cal #cal-frame table.curr {
float:left;
}
#cal #cal-frame table.temp {
position:absolute;
}

As you have not provided an example of your JavaScript or any of your current attempts, I would advise reviewing the following example: http://jqueryui.com/dialog/#modal-form
Here is an example of how you could use it: https://jsfiddle.net/Twisty/8vj8qzm4/
HTML Added
<div id="newEvent" title="New Event">
<form>
<label for="newEventTitle">Event Title</label>
<input type="text" id="newEventTitle" class="text ui-widget-content ui-corner-all" />
<label for="newEventTime">Event Time</label>
<input type="text" id="newEventTime" class="text ui-widget-content ui-corner-all" />
<label for="newEventDesc">Event Description</label>
<input type="text" id="newEventDesc" class="text ui-widget-content ui-corner-all" />
<label for="newEventTeam">Team</label>
<input type="text" id="newEventTeam" class="text ui-widget-content ui-corner-all" />
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</form>
</div>
CSS Added
#newEvent label,
#newEvent input {
display: block;
}
#newEvent input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
jQuery
$(function() {
function checkLength(o, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
return false;
} else {
return true;
}
}
function addEvent(d) {
var valid = true;
$("#newEvent input").removeClass("ui-state-error");
valid = valid && checkLength($("#newEventTitle"), 3, 80);
if (valid) {
$.ajax({
url: "newEvent.php",
type: "POST",
data: {
eventName: $("#newEventTitle").val(),
eventDate: d,
eventTime: $("#newEventTime").val(),
eventDesc: $("#newEventDesc").val(),
eventColor: $("#newEventTeam").val()
},
success: function(resp) {
// Response may contain an Event ID that could be added to the calendar
$(".selected-day").removeClass("selected-day");
}
});
}
return valid;
}
var $popup = $("#newEvent").dialog({
autoOpen: false,
modal: true,
buttons: {
"Create Event": function() {
addEvent($(".selected-day").html());
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
$("#newEvent form")[0].reset();
$("#newEvent form input").removeClass("ui-state-error");
$(this).dialog("option", "title", "New Event");
}
});
$("#newEvent form").submit(function(e) {
e.preventDefault();
addUser($(".selected-day").html());
});
$("#cal-frame td").click(function(e) {
var day = parseInt($(this).html());
$(this).addClass("selected-day");
var month = $("#cal .month-year").html();
var title = $popup.dialog("option", "title") + " for " + day + month;
$popup.dialog("option", "title", title);
$popup.dialog("open");
});
});
This is only tested as far as I could. It's not clear how you want to save this event, I assumed to a PHP Script that would enter it into a database. It's not clear how you want to represent the even on the calendar layout. So there is still lots for you to do.
This is only one way to do this, there are others out there.

Expanding Search Off Click Close JQuery

I made an expanding JQuery Search Box yesterday, which works like a charm! But, I am having trouble creating a script that makes it so when the user clicks off the search box, it closes.
This is my JQuery:
function expandSearch(){
$('#search-input').toggleClass('search-input-open');
}
This is my HTML:
<div class="navigation-search ngen-search">
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<span onclick="expandSearch()" class="form-search-submit" value="🔎">🔎</span>
</form>
</div>
And my CSS:
.ngen-search{
padding:0px 0px 0px;
}
.form-search-input{
width:0px;
height:55px;
border: 0;
outline: 0;
font-size:21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open{
width:410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit{
display:inline-block;
width:55px;
height:43px;
border: 0;
outline: 0;
background-color:#151515;
font-size:21px;
color: white;
cursor: pointer;
text-align:center;
}
All help is appreciated! Thanks!
Also, please note that I am quite new to JQuery and rarely use it.

You can write a click handler which listens to the click on anywhere in the page and then remove the class like
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
})
.ngen-search {
padding: 0px 0px 0px;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: white;
cursor: pointer;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation-search ngen-search">
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<span id="search-trigger" class="form-search-submit" value="🔎">🔎</span>
</form>
</div>

Javascript - Variable Missing

I am having some issues getting this javascript and css to work correctly on about 50% of machines. The odd things is, they're all work computers that have browsers up-to-date and I have tried multiple browsers. I can verify that this code works correctly, but can't verify why it's not working on a large amount of machines. Here is my beginning code with js:
<!DOCTYPE html>
<head>
<style type='text/css'>
.body-content {
background: rgba(255, 202, 25);
color: red;
position: relative;
left: 20em;
top: -6.2em;
background-color: rgb(255, 202, 25);
padding: 10px 100px;
font-weight: 700;
line-height: 2em;
max-width: 45em;
border: 3px solid yellow;
border-radius: 7px;
}
.comp-form {
color: rgb(24, 33, 128);
transform: rotate(90deg);
font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
font-size: 70px;
transform-origin: 5%;
font-style: normal;
font-variant: small-caps;
text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
font-weight: 700;
line-height: 2em;
position: absolute;
border: 3px solid black;
background: rgb(255, 202, 25);
padding: 0 600px;
z-index: 1;
left: -20px;
top: -400px;
}
.country-select {
position: absolute;
top: 58px;
left: 325px;
color: yellow;
}
body {
background-color: rgb(24, 33, 128);
position: relative;
top: 6.5em;
font-color: white;
}
.submitbutton {
-moz-box-shadow:inset 50px 50px 50px 0px #ffc919;
-webkit-box-shadow:inset 50px 50px 50px 0px #ffc919;
box-shadow:inset 50px 50px 50px 0px yellow;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc919), color-stop(1, #ffc919) );
background:-moz-linear-gradient( center top, #ffc919 5%, #ffc919 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc919', endColorstr='#ffc919');
background-color:#ffc919;
-webkit-border-top-left-radius:37px;
-moz-border-radius-topleft:37px;
border-top-left-radius:37px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:37px;
-moz-border-radius-bottomright:37px;
border-bottom-right-radius:37px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:9px solid #182180;
display:inline-block;
color:#182180;
font-family:Comic Sans MS;
font-size:33px;
font-weight:bold;
font-style:normal;
height:63px;
line-height:40px;
width:147px;
text-decoration:none;
text-align:center;
position: relative;
left: -120px;
bottom: 25px;
text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
border-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
}
.submitbutton:active {
position: relative;
top:-20px;
color: yellow;
border-color: yellow;
box-shadow:inset 50px 50px 50px 0px rgb(24, 33, 128);
}
.cancelbutton {
-moz-box-shadow:inset 50px 50px 50px 0px #ffc919;
-webkit-box-shadow:inset 50px 50px 50px 0px #ffc919;
box-shadow:inset 50px 50px 50px 0px yellow;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc919), color-stop(1, #ffc919) );
background:-moz-linear-gradient( center top, #ffc919 5%, #ffc919 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc919', endColorstr='#ffc919');
background-color:#ffc919;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:37px;
-moz-border-radius-topright:37px;
border-top-right-radius:37px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:37px;
-moz-border-radius-bottomleft:37px;
border-bottom-left-radius:37px;
text-indent:0px;
border:9px solid #182180;
display:inline-block;
color:#182180;
font-family:Comic Sans MS;
font-size:33px;
font-weight:bold;
font-style:normal;
height:63px;
line-height:40px;
width:147px;
text-decoration:none;
text-align:center;
position: relative;
left: -120px;
bottom: 25px;
text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
border-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
}
.cancelbutton:active {
position: relative;
top:-20px;
color: yellow;
border-color: yellow;
box-shadow:inset 50px 50px 50px 0px rgb(24, 33, 128);
}
.ccTitle {
color: rgb(24, 33, 128);
font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
font-size: 70px;
font-style: normal;
font-variant: small-caps;
text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
font-weight: 700;
line-height: 2em;
position: relative;
left: 250px;
border: 3px solid black;
background: rgb(255, 202, 25);
width: 80%;
top: -170px;
padding: 0 100px;
z-index: 2;
white-space: nowrap;
}
.dropbox1 {
position: absolute;
top: 4.45em;
left: 34.5em;
}
.dropbox2 {
position: absolute;
top: 3.75em;
left: 36em;
color: yellow;
}
.expimg {
width: 300px;
height: 300px;
float: left;
position: absolute;
left: -15px;
top: -170px;
border: 3px solid black;
z-index: 3;
}
.tableheader {
color: rgb(24, 33, 128);
font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
font-size: 30px;
font-style: normal;
font-variant: small-caps;
text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
font-weight: 700;
padding-bottom: 10px;
}
#reqTbl {
position: relative;
top: 20px;
left: -28px;
padding: 30px;
border: 3px solid yellow;
border-radius: 7px;
width: 760px
}
#supplierTbl {
position: relative;
top: 50px;
left: -30px;
padding: 30px;
border: 3px solid yellow;
border-radius: 7px;
}
#currencyTbl {
position: relative;
top: -170px;
left: 357px;
border: 3px solid yellow;
padding: 30px 30px;
border-radius: 7px;
width: 375px;
}
tr {
color: rgb(24, 33, 128);
font-size: 14px;
text-align: center;
}
#commentsheader {
position: relative;
top: -100px;
left: -33px;
padding: 30px;
border: 3px solid yellow;
border-radius: 7px;
width: 460px;
}
#commentBox {
position: relative;
top: -127px;
left: -33px;
padding: 30px;
border: 3px solid yellow;
border-radius: 7px;
height: 200px;
width: 700px;
}
#MPIFid {
position: relative;
bottom: 0px;
right: 290px;
overflow: auto;
}
</style>
</head>
And the HTML (I have functions that are not built yet in this. Please let me know if this could be an issue):
<body>
<h1 class="ccTitle">CURRENCY CONVERSIONS</h1>
<h2 class="comp-form">Header2</h2>
<img src="http:/photo.png" alt="Logo" class="expimg">
<div class="country-select">Select Bank Country:</div>
<select name="slist1" class="dropbox1" onchange="SList.getSelect('slist2', this.value);">
<option>- - -</option>
<option value="United_States">United States</option>
<option value="Italy">Italy</option>
<option value="Greece">Greece</option>
</select>
<span id="slist2" class="dropbox2"></span>
<div id="test" style="display:none;" class="body-content">
<form id='curForm'>
<table id='reqTbl'>
<tr>
<th class='tableheader' align='center' colspan=3>Prerequisites</th>
</tr>
<tr>
<td>
Has the partner already been placed on stop sell?
</td>
<td>
<label for="Yes"><input type="radio" name='Stop Sell' value="Yes" id='ssYes' onmouseover="tooltip.show('The supplier must be placed on Stop Sell prior to the request being submitted/processed.', 200);" onmouseout="tooltip.hide();">Yes</label>
<label for="No"><input type="radio" name='Stop Sell' value="No" id='ssNo' onmouseover="tooltip.show('The supplier must be placed on Stop Sell prior to the request being submitted/processed.', 200);" onmouseout="tooltip.hide();">No</label>
</td>
</tr>
<tr>
<td>
Has the Market Manager given approval for this conversion?
</td>
<td>
<label for="Yes"><input type="radio" name='Market Manager Approval' value="Yes" id='mmApproved' onmouseover="tooltip.show('Approval from the Market Manager associated with the supplier is required before any requests can be submitted/processed.', 200);" onmouseout='tooltip.hide();'>Yes</label>
<label for="No"><input type="radio" name='Market Manager Approval' value="No" id='mmDenied' onmouseover="tooltip.show('Approval from the Market Manager associated with the supplier is required before any requests can be submitted/processed.', 200);" onmouseout='tooltip.hide();\'>No</label>
</td>
</tr>
<tr>
<td>
Market Manager that supplied approval
</td>
<td>
<input type="text" name="Market Manager Name" id='mmName' onmouseover="tooltip.show('Name of Market Manager who has approved the request',200);" onmouseout="tooltip.hide();" onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);'>
</td>
</tr>
<tr>
<td>
Effective Date of Currency Change
</td>
<td>
<input type="text" size="10" name="Effective Date of Currency Change" id="dateBox" onblur="this.value=asteriskize(this);" onmouseover="tooltip.show('Please click to select the date from which this change should be effective.', 200);" onmouseout="tooltip.hide();"
</td>
</tr>
</table>
<table id="supplierTbl">
<tr>
<th class='tableheader' align='center' colspan=3>Partner Info</th>
</tr>
<tr>
<td>
Vendor ID
</td>
<td>
ID
</td>
</tr>
<tr>
<td>
<input type='text' name='AccountingVendorID' id='accountingVendorID' onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);' onmouseover="tooltip.show('Vendor ID of supplier.', 200);" onmouseout="tooltip.hide();" onkeypress="return valNum(event);">
</td>
<td>
<input type='text' name='SampleID1' id='SampeID2' onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);' onmouseover="tooltip.show('Also referred to as the EID.', 200);" onmouseout="tooltip.hide();" onkeypress="return valNum(event);">
</td>
</tr>
<tr>
<td>
Partner Name
</td>
<td>
Country
</td>
</tr>
<tr>
<td>
<input type='text' name='Supplier Name' id='supplierName' onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);' onmouseover="tooltip.show('Name of the supplier.', 200);" onmouseout="tooltip.hide();">
</td>
<td>
<input type='text' name='City Name' id='cityName' onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);' onmouseover="tooltip.show('City in which the supplier is located.', 200);" onmouseout="tooltip.hide();">
</td>
</tr>
</table>
<table id='currencyTbl'>
<tr>
<th class='tableheader' align='center' colspan=3>Currency</th>
</tr>
<tr>
<td>
Current Currency:
</td>
<td>
<input type="text" name="Current PeopleSoft Currency" id='currentCurr' onmouseover="tooltip.show('Current Currency',200);" onmouseout="tooltip.hide();" onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);'>
</td>
</tr>
<tr>
<td>
Desired Currency:
</td>
<td>
<select name='Desired Currency' id='desiredCurr' onmouseover="tooltip.show('New Currency', 200);" onmouseout="tooltip.hide();">
</td>
</tr>
</table>
<table>
<tr>
<th class='tableheader' id='commentsheader'>Comments</th>
</tr>
<tr>
<td style='height:308px;width:500px;'>
<textarea id='commentBox'></textarea>
</td>
</tr>
</table>
<table id="MPIFid">
<tr>
<td>
<div id="scontent" class="body-content"></div>
<td>
</tr>
</table>
<table>
<tr>
<td width='920px'>
<button type='button' id='submitButtonid' class='submitbutton' onclick='sendItOff();'>Submit</button>
</td>
<td>
<button type='button' id='cancelButtonid' class='cancelbutton' onclick='confirmCancel();'>Cancel</button>
</td>
</tr>
</table>
</form>
</div>
Here's the Javascript:
<script language='javascript'>
var SList = new Object(); // JS object declaration that stores data for options
var txtsl2 = 'Select Payment Method (If EFT, select MPIF Country/Language combination): ';
/*
Information that populates in dropbox 2 from the dropbox 1.
Could be potential spot for Basecamp function call once created.
*/
SList.slist2 = {
"United_States": ['Card', 'EFT - US/English'],
"Italy": ['Card', 'EFT - IT/English','EFT - IT/Italian'],
"Greece": ['Card', 'EFT - GR/English', 'EFT - GR/Greek']
};
/*
Object that stores content after 2nd dropbox selection.
*/
SList.scontent = {
"EFT - US/English": '**Please have the partner submit a form through the following link**: LINK',
"EFT - IT/Italian": '**Please have the partner submit an MPIF form through the following link**: LINK',
"EFT - IT/English": '**Please have the partner submit an MPIF form through the following link**: LINK',
"EFT - GR/English": '**Please have the partner submit an MPIF form through the following link**: LINK',
"EFT - GR/Greek": '**Please have the partner submit an MPIF form through the following link**: LINK',
};
/* DO NOT TOUCH BELOW */
// function to get the dropdown list, or content
SList.getSelect = function(slist, option) {
document.getElementById('scontent').innerHTML = ''; // empty option-content
if (SList[slist][option]) {
// if option from the last Select, add text-content, else, set dropdown list
if (slist === 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else if (slist === 'slist2') {
var addata = '<option>- - -</option>';
for (var i = 0; i < SList[slist][option].length; i++) {
addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
}
document.getElementById('slist2').innerHTML = txtsl2 + '<select name="slist2" onchange="SList.getSelect(\'scontent\', this.value); check_dd();">' + addata + '></select>';
}
} else if (slist === 'slist2') {
// empty the tag for 2n
document.getElementById('slist2').innerHTML = '';
}
};
// drops the form data down after 2nd selection
function check_dd() {
if(document.getElementById('slist2').value === "- - -") {
document.getElementById('test').style.display = 'none';
} else {
document.getElementById('test').style.display = 'block';
};
};
</script>
</html>
There are 3 things that could potentially happen with what I've found.
1) The page as it is right now will work flawlessly.
2) The page will have some CSS issues, but the javascript will still work.
3) The page will not function at all.
When the page will not function at all, the console in Chrome shows the error Error: Uncaught ReferenceError: SList is not definedListPicker._handleMouseUp # about:blank:510
As you can see, ListPicker is NOT anywhere in my code. I'm thoroughly confused.
Please help!! :)

After testing your code, I can only conclude that your problems do not stem from erroneous JavaScript, but rather poorly written markup. Some browsers are pretty good at piecing together bad HTML, but others may not be.
I would recommend you clean up and format your HTML. Make sure all of your tags are properly closed (and in some cases, opened) and that you don't nest too many quotes.
Also, the error you mention at the end of your question simply states that the SList variable was referenced before it had been defined. Putting your JavaScript at the bottom of your <body> tag might fix this.