Develop Reference

Css not working when label tag placed before input tag?

The switching of the order placement of the two tags (input and label) stops either the function to run or the css to load! I've tried messing around with it but to no avail. I want the boxes to appear around the yes or no options and other than that the css is working fine so its just this one section
<ul>${q.a.map(([a])=>`<label class="for-checkbox-budget"><input class="checkbox-budget" type="radio" name="${nam}" value="${a}"><span data-hover="${a}">${a}</span></label>`).join('<br>\n')}</div></ul>`; }).join('\n')+frm.innerHTML;
#import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');
:root {
--white: #ffffff;
--light: #f0eff3;
--black: #000000;
--dark-blue: #1f2029;
--dark-light: #353746;
--red: #da2c4d;
--yellow: #f8ab37;
--grey: #ecedf3;
}
/* #Primary
================================================== */
body{
width: 100%;
background: var(--dark-blue);
overflow-x: hidden;
font-family: 'Poppins', sans-serif;
font-size: 17px;
line-height: 30px;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
h1{
font-family: 'Poppins', sans-serif;
font-size: 45px;
line-height: 30px;
color: var(--white);
letter-spacing: 1px;
font-weight: 500;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
p{
font-family: 'Poppins', sans-serif;
font-size: 17px;
line-height: 30px;
color: var(--white);
letter-spacing: 1px;
font-weight: 500;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
::selection {
color: var(--white);
background-color: var(--black);
}
::-moz-selection {
color: var(--white);
background-color: var(--black);
}
mark{
color: var(--white);
background-color: var(--black);
}
.section {
position: relative;
width: 100%;
display: block;
text-align: center;
margin: 0 auto;
}
.over-hide {
overflow: hidden;
}
.z-bigger {
z-index: 100 !important;
}
.background-color{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--dark-blue);
z-index: 1;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox:checked ~ .background-color{
background-color: var(--white);
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked){
position: absolute;
left: -9999px;
width: 0;
height: 0;
visibility: hidden;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
position: relative;
width: 70px;
display: inline-block;
padding: 0;
margin: 0 auto;
text-align: center;
margin: 17px 0;
margin-top: 100px;
height: 6px;
border-radius: 4px;
background-image: linear-gradient(298deg, var(--red), var(--yellow));
z-index: 100 !important;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
position: absolute;
font-family: 'unicons';
cursor: pointer;
top: -17px;
z-index: 2;
font-size: 20px;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox:not(:checked) + label:before {
content: '\eac1';
left: 0;
color: var(--grey);
background-color: var(--dark-light);
box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked + label:before {
content: '\eb8f';
left: 30px;
color: var(--yellow);
background-color: var(--dark-blue);
box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked ~ .section .container .row .col-12 p{
color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 h1{
color: var(--dark-blue);
}
.checkbox-budget:checked + label,
.checkbox-budget:not(:checked) + label{
position: relative;
display: inline-block;
padding: 0;
padding-top: 20px;
padding-bottom: 20px;
width: 260px;
font-size: 52px;
line-height: 52px;
font-weight: 700;
letter-spacing: 1px;
margin: 0 auto;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
text-transform: uppercase;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
-webkit-text-stroke: 1px var(--white);
text-stroke: 1px var(--white);
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
}
.checkbox-budget:not(:checked) + label{
background-color: var(--dark-light);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-budget:checked + label{
background-color: transparent;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:not(:checked) + label:hover{
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:checked + label::before,
.checkbox-budget:not(:checked) + label::before{
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background-image: linear-gradient(138deg, var(--red), var(--yellow));
z-index: -1;
}
.checkbox-budget:checked + label span,
.checkbox-budget:not(:checked) + label span{
position: relative;
display: block;
}
.checkbox-budget:checked + label span::before,
.checkbox-budget:not(:checked) + label span::before{
position: absolute;
content: attr(data-hover);
top: 0;
left: 0;
width: 100%;
overflow: hidden;
-webkit-text-stroke: transparent;
text-stroke: transparent;
-webkit-text-fill-color: var(--white);
text-fill-color: var(--white);
color: var(--white);
-webkit-transition: max-height 0.3s;
-moz-transition: max-height 0.3s;
transition: max-height 0.3s;
}
.checkbox-budget:not(:checked) + label span::before{
max-height: 0;
}
.checkbox-budget:checked + label span::before{
max-height: 100%;
}
.checkbox:checked ~ .section .container .row .col-xl-10 .checkbox-budget:not(:checked) + label{
background-color: var(--light);
-webkit-text-stroke: 1px var(--dark-blue);
text-stroke: 1px var(--dark-blue);
box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}
.oval {
width: 200px;
height: 80px;
background: #39ff14;
border-radius: 40px;
font-size: 20px;
font-family: 'Poppins', sans-serif;
color: var(--white);
}
<body>
<body>
<div class="section over-hide z-bigger">
<input class="checkbox" type="checkbox" name="general" id="general">
<label class="for-checkbox" for="general"></label>
<div class="background-color"></div>
<div class="section over-hide z-bigger">
<div class="container pb-5">
<div class="row justify-content-center pb-5">
<div class="col-12 pt-1">
<h1 class="mb-4 pb-2">Lets Start</h1>
</div>
<form name="combitest">
<p> Score for test 1 (Stroke) = <span class="res"></span><br><br>
<p> Score for test 2 (Diabetes) = <span class="res"></span><br><br>
<p> Score for test 3 (some other test) = <span class="res"></span><br><br>
<input type="reset" class="oval" value="Clear Answers">
</form>
</body>
const questions=[ // questions, answers with their associated points:
{q:"History of Stroke", a:[["Yes",[10,10, 0]],["No" , [ 0, 0, 0]]]}
];
const frm =document.querySelector("form");
// create questions block first:
frm.innerHTML=questions.map(q=>{
let nam=q.q.toLowerCase().replace(/ /g,"").substr(0,12)
return `<div class="col-12 pt-1">
<p class="mb-4 pb-2">${q.q}</p
</div>
<div class="col-xl-10 pb-5">
<ul>${q.a.map(([a])=>`<label class="for-checkbox-budget"><input class="checkbox-budget" type="radio" name="${nam}" value="${a}"><span data-hover="${a}">${a}</span></label>`).join('<br>\n')}</div></ul>`;
}).join('\n')+frm.innerHTML;
let spans=[...document.querySelectorAll('span.res')];
document.querySelector("input[type=reset]").onclick=ev=>spans.forEach(sp=>sp.textContent="");
frm.onchange=ev=>{
let res=[0,0,0], uls=document.querySelectorAll('form ul');
questions.forEach((qo,i)=>{ var a;
if (a=uls[i].querySelector("input:checked")){ // only if an answer has been chosen
let pts=qo.a.find(([el])=>el==a.value)[1] // get array with points for all tests
res.forEach((r,i)=>res[i]+=pts[i]); // add points to res-array
}
});
res.forEach((r,i)=>spans[i].textContent=r)
};

The + symbol is the next-sibling combinator.
If you swap the order, then the label isn't the next sibling, it is the previous one.
There is no previous sibling combinator (as CSS generally never applies a rule based on something that appears later in the DOM tree (for reasons of performance and to avoid conflicts)).
You might be able to keep the elements in the same DOM order while changing the order they are rendered in by combining a Flexbox layout with the order property.

Change Text Color with Switch/Toggle Css/javascript

Thank you for reading this question
Actually, I am trying to create a login form for student and teachers
Where there is a Switch/toggle button between Teacher and Student text
I want to change the colour (let say to grey from green) of the text when the switch toggle to respective(teacher/student)
For Example, if I pressed the switch and the toggle ball sift to right means the Student text will be grey and the same for the opposite side
Here is my code
index.html
.form-container{
text-align: center;
border-radius: 5px;
background-color: #f6f6f6;
padding: 30px 10px 30px 10px;
margin: 0% 5% 0% 5%;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
color: green;
-webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
-moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
}
.input-design{
margin: 0% 15% 0% 15%;
margin-top: 50px;
}
.input-design input[type=text]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
margin-bottom: 20px;
}
.input-design input[type=password]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
}
.button-design{
padding: 15px 0px 0px 0px;
height: 50px;
font-weight: 600;
font-size: 20px;
margin: 5% 15% 5% 15%;
background-color: green;
color: white;
border:1px solid white;
}
.button-design:hover{
border:1px solid green;
background-color: white;
color: green;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<div class="form-container">
<div class="role-selector">
Teacher
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
Student
</div>
<div class="input-design">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="button-design">
Login
</div>
</div>
</body>

If you are able to revise your HTML, then this CSS-only solution is also possible:
/* CSS Additions */
/* Checkbox does not need to be displayed */
input {
display: none;
}
/* Color labels green by default */
.role-selector input+span {
color: green;
}
.role-selector input+*+*+span {
color: grey;
}
/* Color labels when input is checked */
.role-selector input:checked+span {
color: grey;
}
.role-selector input:checked+*+*+span {
color: green;
}
/* --- */
.form-container {
text-align: center;
border-radius: 5px;
background-color: #f6f6f6;
padding: 30px 10px 30px 10px;
margin: 0% 5% 0% 5%;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
color: green;
-webkit-box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.41);
-moz-box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.41);
box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.41);
}
.input-design {
margin: 0% 15% 0% 15%;
margin-top: 50px;
}
.input-design input[type=text] {
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
margin-bottom: 20px;
}
.input-design input[type=password] {
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
}
.button-design {
padding: 15px 0px 0px 0px;
height: 50px;
font-weight: 600;
font-size: 20px;
margin: 5% 15% 5% 15%;
background-color: green;
color: white;
border: 1px solid white;
}
.button-design:hover {
border: 1px solid green;
background-color: white;
color: green;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/*
Remove:
.switch input {
opacity: 0;
width: 0;
height: 0;
}
*/
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+span+.switch .slider {
background-color: #2196F3;
}
input:focus+span+.switch .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+span+.switch .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<div class="form-container">
<div class="role-selector">
<!-- Move input outside of .switch label -->
<input type="checkbox" checked id="role-checkbox">
<span>Teacher</span>
<!-- Add for attribute that matches id of check input -->
<label class="switch" for="role-checkbox">
<span class="slider round"></span>
</label>
<span>Student</span>
</div>
<div class="input-design">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="button-design">
Login
</div>
</div>
</body>

You should toggle the class of parent's div when input is changed, and then set the color with that class name.
document.getElementById('switch').addEventListener('click', function(event) {
event.target.parentElement.parentElement.classList.toggle('student');
});
.form-container{
text-align: center;
border-radius: 5px;
background-color: #f6f6f6;
padding: 30px 10px 30px 10px;
margin: 0% 5% 0% 5%;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
color: green;
-webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
-moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
}
.input-design{
margin: 0% 15% 0% 15%;
margin-top: 50px;
}
.input-design input[type=text]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
margin-bottom: 20px;
}
.input-design input[type=password]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
}
.button-design{
padding: 15px 0px 0px 0px;
height: 50px;
font-weight: 600;
font-size: 20px;
margin: 5% 15% 5% 15%;
background-color: green;
color: white;
border:1px solid white;
}
.button-design:hover{
border:1px solid green;
background-color: white;
color: green;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.role-selector {
color: green;
}
.role-selector.student {
color: grey;
}
<body>
<div class="form-container">
<div class="role-selector">
Teacher
<label class="switch">
<input id="switch" type="checkbox">
<span class="slider round"></span>
</label>
Student
</div>
<div class="input-design">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="button-design">
Login
</div>
</div>
</body>

You can actually put the word Teacher and Student inside the span element and give it an Id. And assign an ID to input switch to bind with a js function in onclick event.
.form-container{
text-align: center;
border-radius: 5px;
background-color: #f6f6f6;
padding: 30px 10px 30px 10px;
margin: 0% 5% 0% 5%;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
color: green;
-webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
-moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
}
.input-design{
margin: 0% 15% 0% 15%;
margin-top: 50px;
}
.input-design input[type=text]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
margin-bottom: 20px;
}
.input-design input[type=password]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
}
.button-design{
padding: 15px 0px 0px 0px;
height: 50px;
font-weight: 600;
font-size: 20px;
margin: 5% 15% 5% 15%;
background-color: green;
color: white;
border:1px solid white;
}
.button-design:hover{
border:1px solid green;
background-color: white;
color: green;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="form-container">
<div class="role-selector">
<span class="" id="teacher">Teacher</span>
<label class="switch">
<input type="checkbox" id="toggle" onclick="checkYesNo()">
<span class="slider round"></span>
</label>
<span class="" id="student">Student</span>
</div>
<div class="input-design">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="button-design">
Login
</div>
</div>
</body>
<script>
function checkYesNo() {
if (document.getElementById('toggle').checked) {
document.getElementById('student').style.color = 'grey';
document.getElementById('teacher').style.color = 'green';
}else {
document.getElementById('teacher').style.color = 'grey';
document.getElementById('student').style.color = 'green';
}
}
</script>

Making use of before and after elements instead of text. Updated css at the bottom of css code. No jquery needed.
.form-container{
text-align: center;
border-radius: 5px;
background-color: #f6f6f6;
padding: 30px 10px 30px 10px;
margin: 0% 5% 0% 5%;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
color: green;
-webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
-moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
}
.input-design{
margin: 0% 15% 0% 15%;
margin-top: 50px;
}
.input-design input[type=text]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
margin-bottom: 20px;
}
.input-design input[type=password]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
}
.button-design{
padding: 15px 0px 0px 0px;
height: 50px;
font-weight: 600;
font-size: 20px;
margin: 5% 15% 5% 15%;
background-color: green;
color: white;
border:1px solid white;
}
.button-design:hover{
border:1px solid green;
background-color: white;
color: green;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* Input must be visible for before and after elements. Relative used for absolute position of children */
.switch input {
position: relative;
}
/* Set text on before and after elements */
input::before,
input::after {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
}
input::before {
position: absolute;
left: 50px;
bottom: 0;
content: 'student';
}
input::after {
position: absolute;
right: 50px;
bottom: 0;
content: 'teacher';
}
/* Change colors based on checked status */
input:checked::before {
color: green;
}
input:checked::after {
color: grey;
}
input:not(:checked)::before {
color: grey;
}
input:not(:checked)::after {
color: green;
}
<body>
<div class="form-container">
<div class="role-selector">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="input-design">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="button-design">
Login
</div>
</div>
</body>

Javascript for minimise and close button for my chatbox just won't work

I am designing a chat box for my mail chat-bot. I have very little knowledge on webdesign and JavaScript. I can't make my chat box minimize or close. I've tried copying several .js codes for that function from various sites but none ever works.
<html>
<head>
<title>chatbox for bot</title>
</head>
<style>
.popup-wrapper {
position: fixed;
background-color: #FFFFFF;
right: 50px;
bottom: 0px;
padding: 0px;
height: 410px;
width: 250px;
z-index: 200;
-moz-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
}
.popup-header {
background-color: #5b6fc7;
color: #ffffff;
height: 10%;
padding: 10px 10px 5px 10px;
-moz-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
}
.popup-tab {
position: fixed;
right: 50px;
bottom: 0px;
padding: 10px 10px 5px 10px;
background-color: #5b6fc7;
height: 40px;
width: 250px;
z-index: 200;
cursor: pointer;
-moz-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
color: #ffffff;
}
.botMessage {
background-color: #eeeeee;
position: relative;
padding: 5px;
margin: 5px;
display: inline-block;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.humanMessage {
background-color: #5b6fc7;
position: relative;
color: #FFF;
padding: 5px;
margin: 5px;
display: inline-block;
float: right;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.close-chat, .minimize-chat {
cursor: pointer;
margin-right: 5px;
float: right !important;
}
.convo {
height: 320px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #eeeeee;
}
.chatlog {
width: 750px;
height: 300px;
padding: 5px;
border: 1px solid #000000;
}
.scroll {
overflow-y: auto;
overflow-x: hidden;
}
.agentMessage {
background-color: #5cb85c;
position: relative;
padding: 5px;
margin: 5px;
display: inline-block;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
form#talkform {
width
height: 50px;
padding: 10px 10px 5px 10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
/*
.say something {
width: 0px;
border-color: #ffffff;
border-style: solid;
}
*/
}
.hidden {
display: none !important;
visibility: hidden !important;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
#popup-WrapperClose {
width: 15px;
height: 15px;
z-index: 12;
border-radius: 50%;
background-color: red;
position: absolute;
top: 15px;
right: 15px;
}
#popup-WrapperMini {
width: 15px;
height: 15px;
z-index: 12;
border-radius: 50%;
background-color: green;
position: absolute;
top: 15px;
right: 45px;
}
img {
display: block;
margin: 80px auto -60px auto;
}
</style>
<body>
<div class="popup-wrapper">
<div class="popup-header">
<b>
Talk to
<span class="botname">Ella</span>
</b>
<input id="popup-WrapperClose" type="button" onclick="windowClose();"></input>
<input id="popup-WrapperMini" type="button" onclick="windowMin();"></input>
</div>
<div class="popup-chat">
<div class="response hidden"></div>
<div class="convo scroll">
<div class="humanMessage">
<div class="usersay"> </div>
</div>
<br></br>
<div class="botMessage">
<div class="ella">
<div class="botsay"></div>
</div>
</div>
<br></br>
</div>
<form method="post" name="talkform" id="talkform" action="index.php">
<form id="talkform" class="talkform">
<input id="say" name="say" placeholder="say something" type="text">
<input id="say-button" class="say-button" name="say-button" value="say" type="submit">
</form>
</form>
</div>
</div>
<script>
$('#popup-wrapperClose').click( function() {
$("#popup-wrapper").hide(300);
});
$('#popup-wrapperMini').click( function() {
if (minimize === false) {
$("#popup-wrapperMini").hide();
$('#popup-wrapper').css('display','block');
minimize = true;
} else {
$("#popup-wrapper").show();
$('#popup-wrapper').css('display','none');
minimize = false;
}
});
return false;
});
</script>
</body>
</html>

There's a few things to correct in your code:
1) In your Jquery code you are using id selectors (#) and none of your <div> has ids.
2) You are using wrong class names for the buttons minimize and close:
in HTML:
popup-WrapperMini
in JS:
popup-wrapperMini
3) in the javascript you are using the var minimize but you are does it come from?
I made a JSFiddle with minimize and close working. Please take a look:
https://jsfiddle.net/dudu84/ue0c94q7/1/
Hope it helps!

If you find code that is using $ to reference elements, it is a clue that the code is likely jQuery and not plain javascript. Unless you are loading jQuery, it won't work. Here is a pure javascript example. Notice the declaration of the global minimize.
Also, the divs need ids and they have been added to the popup-wrapper and also to the new outer wrapper.
popup-wrapper is used to minimize and show the popup and wrapper is used with the close function.
UPDATE
Code will now transition the minimizing and un-minimizing
Here is the updated jsfiddle
HTML
<title>chatbox for bot</title>
<div id="wrapper">
<div class="popup-header" class="popup-header" >
<b>
Talk to
<span class="botname">Ella</span>
</b>
<input id="popup-WrapperMini" type="button" onclick="windowMin();">
<input id="popup-WrapperClose" type="button" onclick="windowClose();">
</div>
<div id="popup-wrapper" class="popup-wrapper">
<div class="popup-chat">
<div class="response hidden"></div>
<div class="convo scroll">
<div class="humanMessage">
<div class="usersay"> </div>
</div>
<br>
<div class="botMessage">
<div class="ella">
<div class="botsay"></div>
</div>
</div>
<br>
</div>
<form method="post" name="talkform" id="talkform" action="index.php">
<form id="talkform" class="talkform">
<input id="say" name="say" placeholder="say something" type="text">
<input id="say-button" class="say-button" name="say-button" value="say" type="submit">
</form>
</form>
</div>
</div>
</div>
Javascript
var minimize = false;
function windowClose() {
var e = document.getElementById("wrapper");
e.style.display = "none";
}
function windowMin() {
var e = document.getElementById("popup-wrapper");
if (minimize === false) {
// minimize (hide)
// e.style.display = "none";
addClass(e, "wrapper-min");
minimize = true;
} else {
// show
// e.style.display = "block";
removeClass(e, "wrapper-min");
minimize = false;
}
}
function addClass(e, name) {
if (typeof e !== "undefined" && typeof e.classList !== "undefined" && name.length > 0){
e.classList.add(name)
}
}
function removeClass(e, name) {
if (typeof e !== "undefined" && typeof e.classList !== "undefined"){
e.classList.remove(name);
}
}
css
.popup-wrapper {
/* position: fixed; */
background-color: #FFFFFF;
/* right: 50px; */
bottom: 0px;
padding: 0px;
max-height: 410px;
width: 250px;
z-index: 200;
-moz-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
-webkit-transition: max-height 0.5s ease-in;
-moz-transition: max-height 0.5s ease-in;
-ms-transition: max-height 0.5s ease-in;
-o-transition: max-height 0.5s ease-in;
transition: max-height 0.5s ease-in;
overflow: hidden;
}
.popup-header {
background-color: #5b6fc7;
color: #ffffff;
height: 10%;
width: 250px;
padding: 10px 10px 5px 10px;
-moz-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
}
.popup-tab {
position: fixed;
right: 50px;
bottom: 0px;
padding: 10px 10px 5px 10px;
background-color: #5b6fc7;
height: 40px;
width: 250px;
z-index: 200;
cursor: pointer;
-moz-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
color: #ffffff;
}
.botMessage {
background-color: #eeeeee;
position: relative;
padding: 5px;
margin: 5px;
display: inline-block;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.humanMessage {
background-color: #5b6fc7;
position: relative;
color: #FFF;
padding: 5px;
margin: 5px;
display: inline-block;
float: right;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.close-chat, .minimize-chat {
cursor: pointer;
margin-right: 5px;
float: right !important;
}
.convo {
height: 320px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #eeeeee;
}
.chatlog {
width: 750px;
height: 300px;
padding: 5px;
border: 1px solid #000000;
}
.scroll {
overflow-y: auto;
overflow-x: hidden;
}
.agentMessage {
background-color: #5cb85c;
position: relative;
padding: 5px;
margin: 5px;
display: inline-block;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
form#talkform {
/* width */
height: 50px;
padding: 10px 10px 5px 10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
/*
.say something {
width: 0px;
border-color: #ffffff;
border-style: solid;
}
*/
}
.hidden {
display: none !important;
visibility: hidden !important;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
#popup-WrapperClose {
width: 15px;
height: 15px;
z-index: 12;
border-radius: 50%;
background-color: red;
/* position: absolute; */
top: 15px;
margin-left: 5px;
/* right: 15px; */
}
#popup-WrapperMini {
width: 15px;
height: 15px;
z-index: 12;
border-radius: 50%;
background-color: green;
/* position: absolute; */
top: 15px;
margin-left: 100px;
/* right: 45px; */
}
img {
display: block;
margin: 80px auto -60px auto;
}
.wrapper-min{
-webkit-transition: max-height 0.5s ease-out;
-moz-transition: max-height 0.5s ease-out;
-ms-transition: max-height 0.5s ease-out;
-o-transition: max-height 0.5s ease-out;
transition: max-height 0.5s ease-out;
overflow: hidden;
max-height: 0;
}

Modal Window with scroll bar

So, I have a modal window in a website that I'm devloping.
The modal is made out of pure CSS, to open it and close it I have javascript functions wich change the css elements to make the modal show/hide.
CSS of the modal:
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog > div {
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background:white;
display: table;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.btnEncomendarProduto {
background-color:#D60E12;
color:white;
border-radius:5px;
font-size: 12px;
white-space:normal;
cursor:pointer;
text-transform: initial;
border:1px solid #D60E12;
margin-top:3px;
}
</style>
So the problem is when I have a something that displays too much information on the modal, this happens:
So I think I need a scroll bar on the div inside the modal. How can I do that?
Thank you.

If you have an inner div that expands with the content of the actual modal, you can set the max-height of that div to be something--like 75vh--and add overflow-y: auto to that container, and it will automatically add a scrollbar when the content gets longer than that set max-height.
HTML
<div class="Content">
<p>
This is the page contents.
</p>
</div>
<div class="Modal" id="modal">
<div class="Contents">
<h1>Modal</h1>
<p id="text-area">
[large amounts of content]
</p>
</div>
</div>
CSS
body
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.Content
{
position: relative;
width: 100%;
}
.Modal
{
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3); // light grey background
}
.Modal.Open
{
display: block;
}
.Modal .Contents
{
overflow-y: auto;
display: block;
position: relative;
width: 90%;
margin: 5% auto 0;
max-height: 90vh;
padding: 5px;
background: #fff;
}
Note the .Modal .Contents selector and how it works.
JSFiddle Example: https://jsfiddle.net/nj6r0sjw/

How to call DIV Id by JS in another file [duplicate]

This question already has answers here:
jquery how to get the button that has opened the dialog
(4 answers)
Closed 7 years ago.
I want to open Modal box using Javascript when JS object is clicked. I can open it normally using HTML and CSS but not using JS. There is a Circle created by JS which i want to click on to open Modal, or Flyouts
http://jsfiddle.net/7sty4jaL/
HTML
<body>
<h3 id="region-name"></h3>
<div class="modalopener" >1111111111111</div>
<div id="openModal" class="modalDialog">
<div class="modal">
X
<h2>Modal Box</h2>
</div>
</div>
</body>
CSS
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
JS
for (var i = 0; i < array.length; i++) {
array.click(function(e){
});
}

You could do that by applying the style rules for .modalDialog:target to a class (like mTarget) that you can target with javascript.
;(function(w,d,undefined){
"use strict";
var toggleModal = function(){
d.getElementById('openModal').classList.toggle('mTarget');
};
var t = w.setInterval(toggleModal,1000);
})(window,document);
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target, .mTarget {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
<body>
<h3 id="region-name"></h3>
<div class="modalopener">1111111111111
</div>
<div id="openModal" class="modalDialog">
<div class="modal">
X
<h2>Modal Box</h2>
</div>
</div>
</body>

You can call the DIV id from any other JS file simply by using the:
document.getElementById("openModal").click();
Which will search across the DOM and fetch the id. The modal popup is opened as expected.