I have multiple selects on my site and every single one has to have his individual javascript code for it to work, which bothers me and I have no clue how I can fix it. My code handles every single select and makes it disapear after user clicks something different than select or chooses option from select. It also makes a problem where I have to make separate CSS styling for every select. Please give me some hints how to make it work.
const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
var modal = document.getElementById("selected");
const optionsList = document.querySelectorAll(".option");
const selected2 = document.querySelector(".selected2");
const optionsContainer2 = document.querySelector(".options-container2");
var modal2 = document.getElementById("selected2");
const optionsList2 = document.querySelectorAll(".option2");
var offScreen = document.getElementById("add-node-window");
selected.addEventListener("click", () => {
optionsContainer.classList.toggle("active");
});
selected2.addEventListener("click", () => {
optionsContainer2.classList.toggle("active");
});
optionsList.forEach((o) => {
o.addEventListener("click", () => {
selected.innerHTML = o.querySelector("label").innerHTML;
o.querySelector("input").checked = true;
optionsContainer.classList.remove("active");
});
});
optionsList2.forEach((o) => {
o.addEventListener("click", () => {
selected2.innerHTML = o.querySelector("label").innerHTML;
o.querySelector("input").checked = true;
optionsContainer2.classList.remove("active");
});
});
window.onclick = function (event) {
if (event.target != modal) {
optionsContainer.classList.remove("active");
}
if (event.target != modal2) {
optionsContainer2.classList.remove("active");
}
};
const addNodeBtn = document.querySelector(".add-node-btn");
.select-box {
display: flex;
flex-direction: column;
position: relative;
}
.select-box .options-container {
background-color: rgb(238, 238, 238);
font-family: "Roboto", sans-serif;
width: 100%;
transition: all 0.4s;
border-radius: 8px;
overflow: hidden;
max-height: 0;
opacity: 0;
position: absolute;
top: 50px;
order: 1;
min-width: 10rem;
}
.selected {
font-family: "Roboto", sans-serif;
background: white;
border-radius: 8px;
margin-bottom: 8px;
position: relative;
order: 0;
min-width: 10rem;
}
.selected::after {
content: "";
background: url("/static/bx-chevron-down.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 32px;
right: 10px;
top: 5px;
transition: all 0.4s;
}
.select-box .options-container.active + .selected::after {
transform: rotateX(180deg);
top: -6px;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
}
.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
text-align: start;
}
.select-box .option:hover {
background: rgb(219, 219, 219);
}
.select-box .option .radio {
display: none;
}
.select-box label {
cursor: pointer;
}
.select-box2 {
display: flex;
flex-direction: column;
position: relative;
}
.select-box2 .options-container2 {
background-color: rgb(238, 238, 238);
font-family: "Roboto", sans-serif;
width: 100%;
transition: all 0.4s;
border-radius: 8px;
overflow: hidden;
max-height: 0;
opacity: 0;
position: absolute;
top: 50px;
order: 1;
min-width: 10rem;
}
.selected2 {
font-family: "Roboto", sans-serif;
background: white;
border-radius: 8px;
margin-bottom: 8px;
position: relative;
order: 0;
min-width: 10rem;
}
.selected2::after {
content: "";
background: url("/static/bx-chevron-down.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 32px;
right: 10px;
top: 5px;
transition: all 0.4s;
}
.select-box2 .options-container2.active + .selected2::after {
transform: rotateX(180deg);
top: -6px;
}
.select-box2 .options-container2.active {
max-height: 240px;
opacity: 1;
}
.select-box2 .option2,
.selected2 {
padding: 12px 24px;
cursor: pointer;
text-align: start;
}
.select-box2 .option2:hover {
background: rgb(219, 219, 219);
}
.select-box2 .option2 .radio2 {
display: none;
}
.select-box2 label {
cursor: pointer;
}
<div class="select-container" id="select-container">
<div class="select-box" id="select-box">
<div class="options-container" id="options-container">
<div class="option">
<input type="radio" class="radio" id="time-asc" name="category" />
<label for="time-asc">Time ascending</label>
</div>
<div class="option">
<input type="radio" class="radio" id="time-dsc" name="category" />
<label for="time-dsc">Time descending</label>
</div>
<div class="option">
<input type="radio" class="radio" id="reward-asc" name="category" />
<label for="reward-asc">Reward ascending</label>
</div>
<div class="option">
<input type="radio" class="radio" id="reward-dsc" name="category" />
<label for="reward-dsc">Reward descending</label>
</div>
</div>
<div class="selected" id="selected">Sort</div>
</div>
</div>
<div class="select-container2">
<div class="select-box2">
<div class="options-container2">
<div class="option2">
<input type="radio" class="radio2" id="by-user" name="category" />
<label for="by-user">By User</label>
</div>
<div class="option2">
<input type="radio" class="radio2" id="by-category" name="category" />
<label for="by-category">By Category</label>
</div>
</div>
<div class="selected2" id="selected2">Filtr</div>
</div>
</div>
</section>
strong text
As far as the CSS goes, you can modify it so that each block targets BOTH select lists instead of repeating it all:
.select-box,
.select-box2 {
display: flex;
flex-direction: column;
position: relative;
}
Assuming these two select lists will always be styled the same, this will save lines of CSS, reduce the chance that you update the style of one and forget the other, and in general is a best practice when it comes to writing CSS.
I suspect your are looking to do the same type of thing with your javascript. The solution will be similar except that with js you will put the code in a function, and call the function when you are add the event listeners like this:
const selected = document.querySelector(".selected");
function toggleActive() {
this.classList.toggle("active");
}
selected.addEventListener( "click", toggleActive );
selected2.addEventListener( "click", toggleActive );
This isn't the exact code you need - but this is the approach you need to take to avoid writing the same JS multiple times.
Related
I am simply using HTML, CSS and Javascript where I am using the "toggle" method to open and close the dropdown. Also, I am using "mouseup" method to close the dropdown when someone clicks outside of it.
But the "toggle" method is not working along with the "mouseup" method. And I also need "mouseup" method to close the dropdown when user clicks outside of it. So, please tell me the solution to it, why "toggle" is not working with "mouseup" method. Thanks in Advance.
Here is the code:
var selectLabel = document.getElementById('selectLabel');
selectLabel.addEventListener('click', () => {
let dropdownDiv = selectLabel.parentElement.querySelector('.selection-dropdown');
selectLabel.classList.toggle('active');
dropdownDiv.classList.toggle('show');
});
document.addEventListener('mouseup', (e) => {
e.stopPropagation();
let dropdownDiv = document.querySelector('.selection-dropdown');
if (dropdownDiv.classList.contains('show')) {
if (!e.target.classList.contains('selection-dropdown') && !e.target.parentNode.closest('.selection-dropdown')) {
selectLabel.classList.remove('active');
document.querySelector('.selection-dropdown').classList.remove('show');
}
}
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
font-family: 'Arial', sans-serif;
}
.selection-box {
width: 500px;
position: relative;
}
.selection-box .select-upper-label {
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 3px;
color: #202020;
display: block;
width: 100%;
font-size: 1rem;
position: relative;
white-space: nowrap;
cursor: pointer;
}
.selection-box .select-upper-label::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border: 3px solid #808080;
border-top: 0;
border-right: 0;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
right: 15px;
pointer-events: none;
transition: all 0.2s linear;
}
.selection-box .select-upper-label.active::after {
transform: translateY(-50%) rotate(135deg);
}
.selection-dropdown {
padding: 1.5rem 1rem;
box-shadow: 0 8px 45px rgba(0, 0, 0, 0.15);
position: absolute;
width: 100%;
top: 100%;
display: none;
border-radius: 5px;
}
.selection-dropdown.show {
display: block;
}
.selection-dropdown .select-all-link {
text-decoration: none;
color: #555;
display: block;
margin-bottom: 0.5rem;
color: royalblue;
}
.selection-dropdown .selection-dropdown-list label {
display: block;
padding: 0.5rem 1rem;
}
<div class="selection-box">
<label class="select-upper-label" id="selectLabel">Select options</label>
<div class="selection-dropdown">
<i class="ion-checkmark-round"></i> Select All
<div class="selection-dropdown-list">
<label class="label" for="option1"><input type="checkbox" id="option1"> Option 1</label>
<label class="label" for="option2"><input type="checkbox" id="option2"> Option 2</label>
<label class="label" for="option3"><input type="checkbox" id="option3"> Option 3</label>
<label class="label" for="option4"><input type="checkbox" id="option4"> Option 4</label>
<label class="label" for="option5"><input type="checkbox" id="option5"> Option 5</label>
</div>
</div>
</div>
I have a problem that my delete button (the yellow one) works perfectly on preloaded book library items, but it isn't on the new entry when I add a book and want to delete it... I also want you to ask what it would be the easiest way to delete books also from myLibrary array... Thanks.
I've attached my code here. Any help will be appreciated. Thanks in advance.
//DOM
const bookForm = document.querySelector(".book-form");
// Calling a form when clicking on add book button
function openNav() {
document.getElementById("myNav").style.height = "100%";
console.log("dsafsa");
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
// where the books will be saved...
let myLibrary = [{
title: "Harry Potter - and the Philosopher's Stone",
author: "J. K. Rowling",
pages: 223,
readStatus: "no",
},
{
title: "The Hobbit",
author: "J.R.R. Tolkien",
pages: 304,
readStatus: "yes",
},
];
// book object
function Book(title, author, pages, readStatus) {
(this.title = title),
(this.author = author),
(this.pages = pages),
(this.readStatus = readStatus);
}
let i = "";
// render the book on page load...
function render() {
const books = myLibrary;
books.forEach((book) => {
addNewBookUI(book);
});
}
render();
document.querySelector(".book-form").addEventListener("submit", (e) => {
// prevent actual submit
e.preventDefault();
// get values
const title = document.querySelector("#title").value;
const author = document.querySelector("#author").value;
const pages = document.querySelector("#pages").value;
const readStatus = document.querySelector('input[name="yes_no"]:checked')
.value;
// prevent empty fields ...
if (title === "" || author === "" || pages === "0") {
alert("Missing data");
} else {
const book = new Book(title, author, pages, readStatus);
myLibrary.push(book);
addNewBookUI(book);
clearFormFields()
}
});
function addNewBookUI(book) {
if (book.readStatus === "yes") {
i = "checked";
} else {
i = "";
}
const main = document.querySelector(".main");
const bookCard = document.createElement("div");
bookCard.classList.add("book-card");
bookCard.innerHTML = `<div class="delete_button"><button class="delete btn"><i class="fa fa-trash">
</i></button></div><div class="title">${book.title}</div><div class="author">${book.author}
</div><div class="pages">${book.pages}</div><div class="read_status">Read: <input type="checkbox" id="yes" name="readstatus" value="yes" ${i}>
</div>`;
main.appendChild(bookCard);
}
// clear form fields after submit
function clearFormFields() {
const myForm = document.getElementById("myForm");
myForm.reset();
}
// Add event listener to all deleteButton
const deleteButton = document.querySelectorAll(".delete");
// deletes book UI;
deleteButton.forEach((el) => {
el.addEventListener("click", function () {
el.parentElement.parentElement.remove()
console.log("sas")
})
})
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
header {
color: #ffffff;
display: flex;
font-size: 1.4rem;
justify-content: space-between;
align-items: center;
background-color: #155999;
border-bottom: #172f4f solid 10px;
}
.logo {
margin-left: 10px;
}
header button {
background-color: #183153;
border: none;
text-align: left;
font-size: 0.9rem;
border-radius: 5px;
color: #ffffff;
padding: 10px 50px;
margin-right: 10px;
cursor: pointer;
}
.plus-sign {
padding-right: 7px;
}
.main {
position: absolute;
width: 100%;
height: 100%;
background-color: #183153;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.book-card {
text-align: center;
font-weight: 1000;
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 250px;
height: 350px;
border-radius: 10px;
background-color: #155999;
margin-left: 20px;
margin-top: 10px;
color: #ffffff;
border: #172f4f solid 8px;
line-height: 30px;
position: relative;
padding-left: 7px;
padding-right: 7px;
box-shadow: 10px 4px 22px -5px rgba(21, 89, 153, 1);
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(21, 89, 153);
background-color: rgba(21, 89, 153, 0.7);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
display: flex;
flex-direction: column;
font-size: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #c3c6d1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {
overflow-y: auto;
}
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.book-card div {
margin-top: 15px;
}
/* Style buttons */
.btn {
background-color: #ffd43b;
/* Blue background */
border: none;
/* Remove borders */
color: red;
/* White text */
padding: 12px 16px;
/* Some padding */
font-size: 16px;
/* Set a font size */
cursor: pointer;
/* Mouse pointer on hover */
border-radius: 50%;
position: absolute;
top: -20px;
right: -15px;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: #183153;
}
.delete_button {
top: 0;
right: 0;
}
form div {
margin-top: 15px;
font-family: 'Roboto', sans-serif;
color: white;
font-weight: bold;
font-size: 30px;
margin-bottom: 10px;
}
.radiobutton {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.form-flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.form-flex input {
width: 50%;
border-radius: 5px;
height: 30px;
margin-top: 5px
}
.form-flex input::placeholder {
text-align: center;
}
input[type=submit] {
background-color: #183153;
border: none;
text-align: left;
font-size: 0.9rem;
border-radius: 5px;
color: #ffffff;
padding: 10px 50px;
margin-top: -30px;
cursor: pointer;
}
.radiobutton p {
margin-top: 10px;
margin-bottom: 30px;
}
.flexbuttons {
display: flex;
margin-top: -50px;
margin-bottom: -25px;
}
input[type="text"] {
font-size: 24px;
text-align: center;
}
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div class="overlay-content">
<form id="myForm" class="book-form">
<div class="form-flex">
<label for="title">Book name:</label>
<input type="text" id="title" name="title" placeholder="Book name...">
</div>
<div class="form-flex">
<label for="author">Book author:</label>
<input type="text" id="author" name="author" placeholder="Book author...">
</div >
<div class="form-flex">
<label for="pages">Pages:</label>
<input type="number" id="pages" placeholder="0" name="pages">
</div>
<div class="radiobutton">
<p>Have you read a book?</p>
<div class="flexbuttons">
<div>
<p><input type="radio" id="huey" name="yes_no" value="yes" checked>
<label for="huey">yes</label>
</p>
</div>
<div>
<p><input type="radio" id="no" name="yes_no" value="no">
<label for="dewey">no</label>
</p>
</div>
</div>
</div>
<div><input type="submit" value="Add Book"></div>
</form>
</div>
</form>
</div>
</div>
</div>
<header>
<div class="logo">
<h1><i class="fa fa-book" aria-hidden="true"></i>
</i>Library
</h1>
</div>
<div class="button">
<button onclick="openNav()" class="add-book">
<i class="fa fa-plus plus-sign"></i>
Add book</button>
</div>
</header>
<div class="main">
</div>
<script src="./index.js" defer></script>
<script src="https://use.fontawesome.com/30a34909cc.js"></script>
You assigned the click event at loading time to all existing buttons with class=="delete". This will naturally not include the ones you might add dynamically at a later stage.
If you want all ".delete" buttons to have the click-event attached to them you need to do a "delegated event attachment" (edited, removes myLibrary element too now):
// Add event listener to all current and future deleteButtons
document.querySelector('.main').onclick=ev=>{
let el= ev.target.classList.contains('fa-trash')? ev.target.parentElement : ev.target.classList.contains('delete') ? ev.target : false;
if (el) {
let card=el.parentElement.parentElement; // book-card DOM element
// remove myLibrary array-element here:
myLibrary.splice( [...card.parentElement.children].indexOf(card) ,1);
console.log(myLibrary)
// remove card DOM element:
card.remove()
}
}
This will bind the click event handler to the .main div and will react only if the clicked element has a class=='fa-trash' or class=='delete'. In the first case it will "move up" one level (assign the parent element, i. e. the button to el), otherwise the clicked element is the button itself. If none of these classes are found, el becomes false and nothing happens. Otherwise the "Grandparent" of el is removed with `el.parentElement.parentElement.remove()' .
And please try and make your MCVE a little smaller next time, as it no fun to handle this amount of code in a small Stackoverflow snippet window! A true MCVE will get you more and faster responses!
Below is a working snippet, check it out:
//DOM
const bookForm = document.querySelector(".book-form");
// Calling a form when clicking on add book button
function openNav() {
document.getElementById("myNav").style.height = "100%";
console.log("dsafsa");
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
// where the books will be saved...
let myLibrary = [
{
title: "Harry Potter - and the Philosopher's Stone",
author: "J. K. Rowling",
pages: 223,
readStatus: "no",
},
{
title: "The Hobbit",
author: "J.R.R. Tolkien",
pages: 304,
readStatus: "yes",
},
];
// book object
function Book(title, author, pages, readStatus) {
(this.title = title),
(this.author = author),
(this.pages = pages),
(this.readStatus = readStatus);
}
let i = "";
// render the book on page load...
function render() {
const books = myLibrary;
books.forEach((book) => {
addNewBookUI(book);
});
}
render();
document.querySelector(".book-form").addEventListener("submit", (e) => {
// prevent actual submit
e.preventDefault();
// get values
const title = document.querySelector("#title").value;
const author = document.querySelector("#author").value;
const pages = document.querySelector("#pages").value;
const readStatus = document.querySelector('input[name="yes_no"]:checked')
.value;
// prevent empty fields ...
if (title === "" || author === "" || pages === "0") {
alert("Missing data");
} else {
const book = new Book(title, author, pages, readStatus);
myLibrary.push(book);
addNewBookUI(book);
clearFormFields()
}
});
function addNewBookUI(book) {
if (book.readStatus === "yes") {
i = "checked";
} else {
i = "";
}
const main = document.querySelector(".main");
const bookCard = document.createElement("div");
bookCard.classList.add("book-card");
bookCard.innerHTML = `<div class="delete_button"><button class="delete btn"><i class="fa fa-trash">
</i></button></div><div class="title">${book.title}</div><div class="author">${book.author}
</div><div class="pages">${book.pages}</div><div class="read_status">Read: <input type="checkbox" id="yes" name="readstatus" value="yes" ${i}>
</div>`;
main.appendChild(bookCard);
}
// clear form fields after submit
function clearFormFields() {
const myForm = document.getElementById("myForm");
myForm.reset();
}
// Add event listener to all deleteButton
document.querySelector('.main').onclick=ev=>{
let el= ev.target.classList.contains('fa-trash')? ev.target.parentElement : ev.target.classList.contains('delete') ? ev.target : false;
if (el) {
let card=el.parentElement.parentElement;
myLibrary.splice( [...card.parentElement.children].indexOf(card) ,1);
console.log(myLibrary)
card.remove()
}
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
header {
color: #ffffff;
display: flex;
font-size: 1.4rem;
justify-content: space-between;
align-items: center;
background-color:#155999;
border-bottom: #172f4f solid 10px;
}
.logo {
margin-left: 10px;
}
header button {
background-color: #183153;
border: none;
text-align: left;
font-size: 0.9rem;
border-radius: 5px;
color: #ffffff;
padding: 10px 50px;
margin-right: 10px;
cursor: pointer;
}
.plus-sign {
padding-right: 7px;
}
.main {
position: absolute;
width: 100%;
height: 100%;
background-color: #183153;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.book-card {
text-align: center;
font-weight: 1000;
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 250px;
height: 350px;
border-radius: 10px;
background-color: #155999;
margin-left: 20px;
margin-top:10px;
color: #ffffff;
border: #172f4f solid 8px;
line-height: 30px;
position: relative;
padding-left: 7px;
padding-right: 7px;
box-shadow: 10px 4px 22px -5px rgba(21,89,153,1);
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(21,89,153);
background-color: rgba(21,89,153,0.7);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
display: flex;
flex-direction: column;
font-size: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #c3c6d1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.book-card div {
margin-top:15px;
}
/* Style buttons */
.btn {
background-color: #ffd43b; /* Blue background */
border: none; /* Remove borders */
color: red; /* White text */
padding: 12px 16px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
border-radius: 50%;
position:absolute;
top:-20px;
right:-15px;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: #183153;
}
.delete_button {
top:0;
right:0;
}
form div {
margin-top: 15px;
font-family: 'Roboto', sans-serif;
color:white;
font-weight: bold;
font-size: 30px;
margin-bottom: 10px;
}
.radiobutton {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.form-flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.form-flex input {
width: 50%;
border-radius: 5px;
height: 30px;
margin-top: 5px
}
.form-flex input::placeholder {
text-align: center;
}
input[type=submit] {
background-color: #183153;
border: none;
text-align: left;
font-size: 0.9rem;
border-radius: 5px;
color: #ffffff;
padding: 10px 50px;
margin-top: -30px;
cursor: pointer;
}
.radiobutton p {
margin-top:10px;
margin-bottom: 30px;
}
.flexbuttons {
display: flex;
margin-top: -50px;
margin-bottom: -25px;
}
input[type="text"]
{
font-size:24px;
text-align: center;
}
JS:
//DOM
const bookForm = document.querySelector(".book-form");
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div class="overlay-content">
<form id="myForm" class="book-form">
<div class="form-flex">
<label for="title">Book name:</label>
<input type="text" id="title" name="title" placeholder="Book name...">
</div>
<div class="form-flex">
<label for="author">Book author:</label>
<input type="text" id="author" name="author" placeholder="Book author...">
</div >
<div class="form-flex">
<label for="pages">Pages:</label>
<input type="number" id="pages" placeholder="0" name="pages">
</div>
<div class="radiobutton">
<p>Have you read a book?</p>
<div class="flexbuttons">
<div><p><input type="radio" id="huey" name="yes_no" value="yes" checked>
<label for="huey">yes</label></p>
</div>
<div><p><input type="radio" id="no" name="yes_no" value="no">
<label for="dewey">no</label></p>
</div>
</div>
</div>
<div><input type="submit" value="Add Book"></div>
</form>
</div>
</form>
</div>
</div>
</div>
<header>
<div class="logo">
<h1><i class="fa fa-book" aria-hidden="true"></i>
</i>Library</h1>
</div>
<div class="button">
<button onclick="openNav()" class="add-book">
<i class="fa fa-plus plus-sign"></i>
Add book</button>
</div>
</header>
<div class="main">
</div>
<script src="./index.js" defer></script>
<script src="https://use.fontawesome.com/30a34909cc.js"></script>
I try to close a dropdown menu and it's difficult for me. I manage to open the menu, to chose a currency and move the right label to the top of the div.
But how to close it by removing .expanded if I click anywhere (outside the div, on a label, on the top label) ? I also have to reopen if I click on the container (by toggling .expanded again)
var $container = $('.maincar__currency')
$container.click(function() {
$(this).addClass('expanded');
});
$(".maincar__currency label").click(function() {
$container.prepend($(this));
});
//$(document).click(function() {
// $container.removeClass('expanded');
//});
.maincar__currency {
display: flex;
flex-direction: column;
min-height: 32px;
max-height: 32px;
margin-left: auto;
margin-bottom: 10px;
overflow: hidden;
border-radius: 6px;
font-size: 14px;
}
input {
display: none
}
.maincar__currency label {
display: flex;
width: 65px;
height: 32px;
padding: 6px;
margin-right: 0 auto;
text-align: center;
cursor: pointer;
}
.maincar__currency label:first-child::after {
content: "▾";
margin-top: -1px;
font-size: 15px;
}
.expanded {
max-height: 132px;
position: relative;
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency" id="currency-drop-is">
<label for="euro-radio-is">
<div class="currency currency__euro">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked>
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar">
<span>USD</span>
</div>
</label>
</div>
When you add an onclick event on your label, it actually triggers twice, because of the "connection" you have added between label and input. Have a look at this example:
label {
background:rgba(0,0,0,0.3);
}
input {
position:absolute;
left:10%;
top:30px;
}
<label for="test">Click me, it will select checkbox</label>
<input type="checkbox" id="test"/>
Once you fix that problem, you need to attach a click handler on the document, that will check if the actual click contains your dropdown element, and if it doesn't it will close it.
$(".maincar__currency label input[type='radio']").on("click", function (event) {
var $container = $(this).closest(".maincar__currency");
if ($container.hasClass("expanded")) {
$container.prepend($(this).closest("label"));
}
$container.toggleClass("expanded");
});
function handleDropdownClickOutside(e) {
var $container = $(".maincar__currency");
if (!$container[0].contains(e.target) && $container.hasClass("expanded")) {
$container.removeClass("expanded");
}
};
document.addEventListener("mousedown", handleDropdownClickOutside, false);
.maincar__currency {
display: flex;
flex-direction: column;
min-height: 32px;
max-height: 32px;
/* margin-left: auto; */
margin-bottom: 10px;
overflow: hidden;
border-radius: 6px;
font-size: 14px;
width: 64px;
}
input {
display: none;
}
.maincar__currency label {
display: flex;
width: 100%;
height: 32px;
padding: 6px;
margin-right: 0 auto;
text-align: center;
cursor: pointer;
}
.maincar__currency label:first-child::after {
content: "▾";
margin-top: -1px;
font-size: 15px;
}
.expanded {
max-height: 132px;
position: relative;
right: 0;
}
/* Visual purpose only: */
.maincar__currency {
border:1px solid red;
}
.maincar__currency label {
border:1px solid black;
}
.maincar__currency input {
display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency" id="currency-drop-is">
<label for="euro-radio-is">
<div class="currency currency__euro">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked>
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar">
<span>USD</span>
</div>
</label>
</div>
So the way I did it, you only want to update/prepend the value, if the container has the .expanded class, otherwise clicking on the radio will open the dropdown.
I have an application with a form and 2 inputs (a dropdown list and a checkbox).
These two inputs are required to be able to click on the submit button (a javascript function do the job)
the button is currently red with some CSS, even if disabled and i would like it be grey when disabled and red otherwise.
the job seems simple, but i have a problem with javascript, it doesn't work.
I tried this:
var sbt_btn = document.querySelector('button#submit_button');
function coloration_button(){
if(sbt_btn.disabled == true){
sbt_btn.style.background = 'grey';
}
else {
sbt_btn.style.background = 'red';
}
}
but it doesn't work.
I also tried this:
var sbt_btn_att = document.querySelector('button#submit_button').getAttribute('disabled');
var sbt_btn = document.querySelector('button#submit_button');
function coloration_button(){
if(sbt_btn_att.disabled == true){
sbt_btn.style.background = 'grey';
}
else {
sbt_btn.style.background = 'red';
}
}
console don't inform about some error or other.
If someone can help me
Here is the code pen with all javascript and CSS used.
CodePen
thanks in advance
/* => prerequisites: JQuery library 2.1.3 */
/* variable declaration */
var menu = document.querySelector('.nav__list');
var burger = document.querySelector('.burger');
var doc = $(document);
var l = $('.scrolly');
var panel = $('.panel');
var vh = $(window).height();
var openMenu = function() {
document.querySelector('.burger').classList.toggle('burger--active');
/*equivalent: burger.classList.toggle('burger--active');*/
document.querySelector('.nav__list').classList.toggle('nav__list--active');
/*equivalent: menu.classList.toggle('nav__list--active');*/
};
/* reveal content of first panel by default*/
panel.eq(0).find('.panel__content').addClass('panel__content--active');
var scrollFx = function() {
var ds = doc.scrollTop();
var of = vh / 4;
/* if the panel is in the viewport, reveal the content, if not, hide it.*/
for (var i = 0; i < panel.length; i++) {
if (panel.eq(i).offset().top < ds + of ) {
panel
.eq(i)
.find('.panel__content')
.addClass('panel__content--active');
} else {
panel
.eq(i)
.find('.panel__content')
.removeClass('panel__content--active')
}
}
};
var scrolly = function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 300, 'swing', function() {
window.location.hash = target;
});
}
var init = function() {
document.querySelector('.burger').addEventListener('click', openMenu, false);
/*equivalent: burger.addEventListener('click', openMenu, false);*/
window.addEventListener('scroll', scrollFx, false);
window.addEventListener('load', scrollFx, false);
$('a[href^="#"]').on('click', scrolly);
};
doc.on('ready', init);
/* Loader Between Page
========================================================================== */
/*simple function to retrieve element by its id */
function getId(id) {
return document.getElementById(id);
}
/* id1 the button id
id2 the loader id */
function validation(id1, id2) {
getId(id1).style.display = "none";
getId(id2).style.display = "";
return true;
}
/* Form of the unlock screen
========================================================================== */
/* Hide/show the unlock mode
========================================================================== */
/*Declare the current screen as a and the unlock screen as b.*/
var a = document.querySelector("#current");
var b = document.querySelector("#debug_mode");
/* declare the button in the navigation pan as btn */
var btn = document.querySelector("#debug_mode_btn");
/* add an event on this button. On click on it: */
btn.addEventListener("click", function myfunction() {
sty = document.querySelector("#debug_mode_btn");
/* if the unlock mode is hide, then:
- reveal it,
- switch colors of the button
- hide the current screen */
if (b.style.display == 'none') {
sty.style.background = 'red';
sty.style.color = "#2b3033";
b.style.display = 'block';
a.style.display = 'none';
}
/* else if unlock mode is already visible, hide it, reveal the current screen, and reswitch the color of the button*/
else {
sty.style.background = '#2b3033';
sty.style.color = 'red';
b.style.display = 'none';
a.style.display = 'block';
}
});
/* Hide/show the corresponding form based on the value of the select drop down list in the unlock mode.
========================================================================== */
var previous_debug_form;
var c = document.querySelector("#debug_selector");
c.addEventListener("change", function myfunction_display() {
var debug_form = document.querySelector('#debug_selector');
if (previous_debug_form) {
previous_debug_form.style.display = "none";
}
var debug_id = debug_form.value;
if (debug_id) {
var debug_form = document.querySelector('#' + debug_id);
debug_form.style.display = "block";
previous_debug_form = debug_form;
}
});
/* Form in the current page
========================================================================== */
/* Function to allow only one checkbox to be checked */
function selectOnlyThis(id) {
for (var i = 1; i <= 4; i++) {
if ("Check" + i === id && document.getElementById("Check" + i).checked === true) {
document.getElementById("Check" + i).checked = true;
} else {
document.getElementById("Check" + i).checked = false;
}
}
}
/* Function to remove the disabled property of the submit button */
function callFunction() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
document.querySelectorAll('button[type="submit"]')[0].disabled = true;
/*equivalent for input submit button: document.querySelectorAll('input[type="submit"]')[0].disabled = true; */
if (checkedOne) {
document.querySelectorAll('button[type="submit"]')[0].disabled = false;
document.querySelector('#submit_button').style.background = 'rgba(230,0,39,1.1);';
/*equivalent for input submit button: document.querySelectorAll('input[type="submit"]')[0].disabled = false; */
}
}
var sbt_btn = document.querySelector('button#submit_button').getAttribute('disabled');
function coloration_buton() {
if (sbt_btn == true) {
} else if (sbt_btn == false) {
}
}
ul {
color: black;
list-style-type: none;
}
.item {
display: flex;
flex-direction: column;
align-items: left;
align-content: space-around;
}
#bu_prompt {
width: auto;
}
label {
color: black;
}
.prompt {
width: 45%;
}
html {
min-height: 100%;
font-family: sans-serif;
}
.bg {
width: 100%;
height: 100%;
background: white;
background-repeat: no-repeat;
}
.logo {
text-align: center;
margin-top: 40px;
margin-bottom: 30px;
}
.img-svg {
width: 350px;
}
/* Form
========================================================================== */
.form {
background-color: #F7F7F7;
border: 1px solid white;
border-radius: 5px;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
margin-right: auto;
margin-left: auto;
margin-bottom: 1em auto;
margin-top: 1em;
padding-top: 1.5em;
padding-left: 1.5em;
padding-right: 1.5em;
padding-bottom: .5em;
max-width: 700px;
/* area width */
width: 90%;
}
h2 {
font-weight: normal;
}
/* Button
========================================================================== */
.btn-submit {
background-color: ;
border-radius: 5px;
border: 1px solid white;
color: #fff;
max-width: 100%;
font-family: 'AvenirNextRegular', Helvetica, Arial, sans-serif;
background: rgba(230, 0, 39, 1.1);
touch-action: manipulation;
}
[class*='btn-'] {
border-bottom: 2px solid rgba(0, 0, 0, .15);
border-top: 1px solid rgba(255, 255, 255, 1);
border-radius: 5px;
color: #fff;
display: inline-block;
font: -webkit-small-control;
font-size: .8em;
line-height: 140%;
margin-top: .5em;
padding: 10px 20px;
width: 100%;
text-transform: uppercase;
text-align: center;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.next_page {
padding-right: 5%;
font-style: normal;
}
/*
========================================================================== */
.header_frame {
background-color: #F7F7F7;
border: 1px solid white;
border-radius: 5px;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
margin: 10px auto;
margin-top: -20px;
padding: .5em 2em .5em 2em;
margin-bottom: 30px;
width: 100%;
max-width: 700px;
color: black;
text-align: left;
}
/* Navigation Pan
========================================================================== */
.nav-pan {
background-color: #F7F7F7;
border: 1px solid white;
border-radius: 5px;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
padding-top: 1.5em;
padding-left: 1.5em;
padding-right: 1.5em;
padding-bottom: .5em;
max-width: 200px;
height: auto;
width: 90%;
position: fixed;
bottom: 0px;
bottom: 0px;
left: 0px;
}
/* Navigation
========================================================================== */
.nav__list_ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.nav {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100px;
backface-visibility: hidden;
}
.nav__list {
display: flex;
flex-flow: column wrap;
height: 85vh;
transform: translate(0, -100%);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
list-style-type: none;
padding: 0;
margin: 0;
}
.nav__list--active {
transform: translate(0, 0);
}
.nav__item {
flex: 1;
position: relative;
}
.nav__link {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-decoration: none;
font-size: 24px;
background: #2b3033;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
color: red;
/* Icons color */
;
}
.nav__link:hover {
background: #272b2e;
}
#media (max-width: 640px) {
.nav {
width: 70px;
}
.nav__list {
height: 90vh;
}
}
.nav_btn {
background: #2b3033;
color: red;
border: 0px;
}
/* Burger (Small square in the left up angle with three horizontal bar)
========================================================================== */
.burger {
height: 15vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background: #2b3033;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.burger:hover {
background: #272b2e;
}
.burger__patty {
position: relative;
height: 2px;
width: 40px;
background: white;
}
.burger__patty:before {
content: "";
position: absolute;
top: -10px;
left: 0;
height: 2px;
width: 100%;
background: white;
}
.burger__patty:after {
content: "";
position: absolute;
top: 10px;
left: 0;
height: 2px;
width: 100%;
background: white;
}
.burger__patty,
.burger__patty:before,
.burger__patty:after {
will-change: transform;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.burger--active .burger__patty {
transform: rotate(90deg);
}
.burger--active .burger__patty:before {
transform: rotate(-45deg) translate(-7px, -7px) scaleX(0.7);
}
.burger--active .burger__patty:after {
transform: rotate(45deg) translate(-7px, 7px) scaleX(0.7);
}
#media (max-width: 640px) {
.burger {
height: 10vh;
}
.burger__patty {
transform: scale(0.8);
}
.burger--active .burger__patty {
transform: scale(0.8) rotate(90deg);
}
}
/* Loader between page (red animated wheel)
========================================================================== */
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid red;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%%;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* button#submit_button {
background: rgba(205,204,204,1);
} */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="description" content="Welcome Page">
<title>Welcome Page</title>
<!-- Library Javascirpt and CSS -->
<!-- specific CSS for debug mode -->
<style type="text/css">
#debug_all,
#debug_specific {
margin: .5em;
padding-bottom: .5em;
}
#debug_selector,
#debug_bu_selector {
margin-top: 1em;
margin-bottom: 1em;
}
</style>
</head>
<body class="bg">
<!-- div of the loader -->
<div id="wait_tip" style="display:none" class="loader"></div>
<!-- Brand Logo -->
<div class="logo"></div>
<div id="current" style="display:block">
<div class="formbox">
<div class="form">
<div class="item">
<h2 style="font-weight:normal">Welcome into the Application</h2>
</div>
<br>
<form title="Available business unit" id="wlc_form" name="welcome_form" action="" onsubmit="return validation('submit_button','wait_tip');">
<div class="item">
<table>
<tbody>
<tr>
<td>
Choose a Business unit in the list:
</td>
<td>
<select name="bu_prompt" id="bu_prompt" required="">
<option value="" disabled="" selected=""> -- Choose a business unit -- </option>
<option value="1">HONG KONG</option>
<option value="D01">BELGIUM</option>
<option value="D02">TAIWAN</option>
<option value="D08">D08</option>
<option value="D09">SINGAPORE</option>
<option value="D10">FRANCE</option>
<option value="GBR">GREAT BRITAIN</option>
<option value="SGP">SINGAPORE</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<hr>
<br>
<div class="item">
<label>What do you want to do on this selected ?</label>
<ul name="checkingbox">
<li><input type="checkbox" id="Check1" name="_program" value="" onclick="selectOnlyThis(this.id)" onchange="callFunction()"> Manage </li>
<li><input type="checkbox" id="Check2" name="_program" value="" onclick="selectOnlyThis(this.id)" onchange="callFunction()"> Sending Report</li>
<li><input type="checkbox" id="Check3" name="_program" value="" onclick="selectOnlyThis(this.id)" onchange="callFunction()"> other</li>
</ul>
</div>
<!-- end item div -->
<br>
<input id="log" type="checkbox" name="_debug" value="log">
<label for="log" style="font-size:0.7em"> </label>
<button class="btn-submit" id="submit_button" disable="true" type="submit" disabled="" form="wlc_form">
<i class="next_page"> Next Page </i>
<i class="fa fa-arrow-right"></i>
</button>
</form>
<!-- end div form -->
</div>
<!-- end div formbox -->
</div>
<!-- end current div -->
</div>
<!-- Navigation Pan -->
<nav class="nav">
<div class="burger">
<div class="burger__patty"></div>
</div>
<ul class="nav__list nav__list_ul">
<li class="nav__item">
<button class="nav__link" id="debug_mode_btn" title="Unlock business unit"><i class="fa fa-cogs"></i></button>
</li>
</ul>
</nav>
<div id="debug_mode" style="display:none" class="form">
<div>
<h2> </h2>
</div>
<select id="debug_selector">
<option disabled="" selected=""> -- Choose an action -- </option>
<option value="debug_specific"> Unlock </option>
<option value="debug_all"> Unlock All </option>
</select>
<div id="debug_specific" style="display:none">
<form action="" method="GET" onsubmit="return validation('wlc_unlock','wait_tip');">
<input type="hidden" name="_debug_bu" value="1">
<input type="hidden" name="" value="">
<label> Choose a locked business unit: </label>
<select name="bu_name" id="debug_bu_selector">
</select>
<button class="btn-submit" id="wlc_unlock" type="submit">
<i class="next_page"> Unlock </i>
<i class="fa fa-unlock-alt"></i>
</button>
</form>
</div>
<!-- Unlock all Bu -->
<div id="debug_all" style="display:none">
<form action="" method="GET" onsubmit="return validation('wlc_all_unlock','wait_tip');">
<input type="hidden" name="_debug_all_bu" value="1">
<input type="hidden" name="" value="">
<button class="btn-submit" id="wlc_all_unlock" type="submit">
<i class="next_page"> Unlock All </i>
<i class="fa fa-unlock-alt"></i>
</button>
</form>
</div>
<!-- end of unlocking mode -->
</div>
<!-- specific JS for debug mode, load at the end for avoid problem -->
</body>
</html>
Here's the CSS:
#submit_button[disabled]
{
background: grey;
}
A css solution is:
.btn-submit:disabled {
/* your styles */
}
button:disabled{
background-color:red;
}
<button>Enabled</button>
<button disabled>Disabled</button>
Making slider I've faced one issue. When I hover the buttons under the images (they are labels) the looping of the slider has to stop. And when its out - it backs to looping. Cant understant where I'm wrong. See the code in snippet or in this link.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>
See this JSFiddle for a working example.
However, if you are hoverring for more than the timeout period, then changeto() is not called, you will want to add changeto() to the "mouseleave" handler.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
changeTo(0)
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>