Please see code below:
const sectionIcon = document.querySelectorAll(".nk-section-icons")
const sectionContainer = document.querySelectorAll(".nk-sec-container")
const sectionIconHover = document.querySelectorAll(".nk-section-icons")
sectionIcon.forEach((sectionBtn)=> {
sectionBtn.addEventListener("click", (btns)=> {
// console.log(sectionIconHover)
const containerTarget = btns.currentTarget.parentElement.children[1]
const containerHoverTarget = btns.currentTarget.parentElement.children[0]
sectionContainer.forEach(items => {
if(items !== containerTarget) {
items.classList.remove("show")
// itemHover.classList.remove("rb")
}
})
sectionIconHover.forEach(itemHover => {
if(itemHover !== containerHoverTarget) {
itemHover.classList.remove("rb")
}
})
containerTarget.classList.toggle("show")
containerHoverTarget.classList.add("rb")
})
})
.nk-section-icons {
height: 30px;
min-width: 30px;
width: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 3px;
background: yellow;
margin-bottom: 5px;
}
.nk-section-icons.rb {
background: black;
}
.nk-sec-container {
width: 300px;
min-width: 300px;
height: 100%;
background: red;
position: absolute;
z-index: 11;
box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
border-radius: 6px;
left: 70px;
top: 0px;
}
.nk-sec-container.show {
background: green;
}
.nk-section-icons-container {
position: relative;
}
<div class="nk-section-l-icons">
<div class="nk-section-icons-container">
<div class="nk-section-icons fav" data-title="Favorites">btn</div>
<div class="nk-sec-container nk-sec-fav-c">
</div>
</div>
<div class="nk-section-icons-container">
<div class="nk-section-icons recent" data-title="Recent">btn</div>
<div class="nk-sec-container nk-sec-recent-c">
</div>
</div>
<div class="nk-section-icons-container">
<div class="nk-section-icons notifs" data-title="Notifications">btn</div>
<div class="nk-sec-container nk-sec-notif-c">
</div>
</div>
</div>
Hello guys, can you please see my code? Currently, it's working fine when I click the button it's working the classes are moved when I click any of the buttons. However, if I tried clicking the same button again the class rb is not removed but the show class is removed. Can you please help me with how can I fix this? Thanks
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
if($("p").hasClass("main"))
{
$("p").toggleClass("main1");
}
else
{
$("p").toggleClass("main");
}
});
});
</script>
<style>
.main {
font-size: 120%;
color: red;
}
.main1 {
font-size: 120%;
color: green;
}
</style>
</head>
<body>
<button>Toggle class "main" for p elements</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><b>Note:</b> Click the button more than once to see the toggle effect.</p>
</body>
</html>
Use toggling: Toggle between adding and removing the "main" class name for all elements
The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
Related
I created a dropdown list Javascript Toggle method. I face a problem a problem. The problem is - After clicking one dropdown, another dropdown still opens. I want others dropdown Will to be closed when I click on dropdown. This happen will be each dropdown. How do I do it?
<html>
<head>
<style>
nav{
width:100%;
height:50px;
background-color:#000;
}
button{
height:50px;
margin-left: 10px;
border:0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
div{
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1{
background-color: rgb(0,0,255);
color: #fff;
}
#myDIV2{
background-color: rgb(0,255,0);
color: #000;
}
.show{
display:block;
}
</style>
</head>
<body>
<nav>
<button onclick="myFunction1()">Dropdown1</button>
<button onclick="myFunction2()">Dropdown2</button>
</nav>
<div id="myDIV1">
This Dropdown for Dropdown 1
</div>
<div id="myDIV2">
This Dropdown for dropdown 2
</div>
<script>
function myFunction1() {
var element = document.getElementById("myDIV1");
element.classList.toggle("show");
}
function myFunction2() {
var element = document.getElementById("myDIV2");
element.classList.toggle("show");
}
</script>
</body>
</html>
here is the solution, all the code is commented.
div1 and div2 are hidden by default...
so with .toggle(): https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle
I will add the class .show if there isn't
else I will remove the class from it.
so if the user clicks the first time on the button it will show the div1 then if he reclicked will hide, and this is looped (if he reclick)...
with classList.remove, we will hide the other element (always):
if clicked the button N1 will hide div2
if clicked the button N2 will hide div1
let div1 = document.getElementById("myDIV1");
let div2 = document.getElementById("myDIV2");
function myFunction1() {
div1.classList.toggle("show");
// remove the class for the second div
div2.classList.remove("show");
}
function myFunction2() {
div2.classList.toggle("show");
// remove the class for the first div
div1.classList.remove("show");
}
nav {
width: 100%;
height: 50px;
background-color: #000;
}
button {
height: 50px;
margin-left: 10px;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
div {
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1 {
background-color: rgb(0, 0, 255);
color: #fff;
}
#myDIV2 {
background-color: rgb(0, 255, 0);
color: #000;
}
/* this is the class we add and remove or toggle with javascript*/
.show {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="./script.js" defer></script>
</head>
<body>
<!-- navbar -->
<nav>
<button onclick="myFunction1()">Dropdown1</button>
<button onclick="myFunction2()">Dropdown2</button>
</nav>
<!-- 1 -->
<div id="myDIV1">
This Dropdown for Dropdown 1
</div>
<!-- 2 -->
<div id="myDIV2">
This Dropdown for dropdown 2
</div>
</body>
</html>
You can make this a little easier to scale by using one function for all dropdown menus. This function closes all open drop-downs and toggles the target one.
function toggleDropDown(id) {
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}
function toggleDropDown(id) {
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}
nav {
width: 100%;
height: 50px;
background-color: #000;
}
button {
height: 50px;
margin-left: 10px;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
.dropdown-menu {
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1 {
background-color: rgb(0, 0, 255);
color: #fff;
}
#myDIV2 {
background-color: rgb(0, 255, 0);
color: #000;
}
.show {
display: block;
}
<nav>
<button onclick="toggleDropDown('myDIV1')">Dropdown1</button>
<button onclick="toggleDropDown('myDIV2')">Dropdown2</button>
</nav>
<div class='dropdown-menu' id="myDIV1">
This Dropdown for Dropdown 1
</div>
<div class='dropdown-menu' id="myDIV2">
This Dropdown for dropdown 2
</div>
Here is the same thing, but instead of hard-coding click events, it's better practice to use eventListeners, which get applied through the script after the page loads, like:
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('nav button').forEach(button => {
button.addEventListener('click', e => {
let id = e.target.dataset.dropdown
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
})
})
})
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('nav button').forEach(button => {
button.addEventListener('click', e => {
let id = e.target.dataset.dropdown
document.querySelectorAll('.dropdown-menu').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
})
})
})
nav {
width: 100%;
height: 50px;
background-color: #000;
}
button {
height: 50px;
margin-left: 10px;
border: 0;
background-color: transparent;
color: #fff;
cursor: pointer;
}
.dropdown-menu {
display: none;
width: 100%;
height: 300px;
position: absolute;
}
#myDIV1 {
background-color: rgb(0, 0, 255);
color: #fff;
}
#myDIV2 {
background-color: rgb(0, 255, 0);
color: #000;
}
.show {
display: block;
}
<nav>
<button data-dropdown="myDIV1">Dropdown1</button>
<button data-dropdown="myDIV2">Dropdown2</button>
</nav>
<div class='dropdown-menu' id="myDIV1">
This Dropdown for Dropdown 1
</div>
<div class='dropdown-menu' id="myDIV2">
This Dropdown for dropdown 2
</div>
I want wen I click on first paragraph, the element with id « envoie » shows up as a tooltip and disappear when mouse leave.
What I have is the tooltip is display une the first element. I mean when I click on the last « first element », the tooltip is still under the first element.
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
margin: 5px;
}
.envoie-fr, .ship-fr {
margin-top: -25px;
opacity: 1;
z-index: 2000;
visibility: visible;
.transition(all 0.1s linear);
}
</style>
<script>
window.addEventListener("load", () => {
var x = document.querySelectorAll("#envoie");
console.log(x.length);
});
</script>
</head>
<body>
<div>
<div>
<p class="#envoie">First Paragraph</p>
<div id="envoie" class="envoie-fr">Envoie</div>
</div>
<div>
<p class="#ship">Second Paragraph</p>
<div id="ship" class="ship-fr">Ship</div>
</div>
</div>
<hr />
<div>
<div>
<p class="#envoie">First Paragraph</p>
<div id="envoie" class="envoie-fr">Envoie</div>
</div>
<div>
<p class="#ship">Second Paragraph</p>
<div id="ship" class="ship-fr">Ship</div>
</div>
</div>
<div>
<p class="#example" style="margin-top:50px">Bottom</p>
</div>
</body>
</html> ```
var myDiv = document.getElementById('foo');
myDiv.onmouseenter = function() {
// do your stuff to show element like display:block;
alert('entered');
}
myDiv.onmouseout = function() {
// do your stuff to hide element like display:none;
alert('left');
}
You can use the title tag as a tooltip to the HTML element.
You do not need any script to make that happened. Also, from your issue title I can tell that you want the tooltip be displayed on hover (not on click) and disappeared when the mouse is away (this is how actually tooltips work). So, here is the code for you:
<!DOCTYPE html>
<html>
<head>
<style>
body {
/*optional: these are to make the content centered*/
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div {
/*optional*/
border: solid 1px #f9cd23;
padding: 30px;
}
p {
padding: 0;
cursor: pointer;
position: relative;
margin: 40px 0;
}
/*for the tooltip box*/
p:hover:after {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: #f9cd23;
border-radius: 8px;
color: black;
content: attr(title);
text-align: center;
font-size: 16px;
padding: 8px;
width: 200px;
}
/*for the tooltip triangle*/
p:hover:before {
left: 50%;
transform: translateX(-50%);
top: -20px;
position: absolute;
border: solid;
border-color: #f9cd23 transparent;
border-width: 15px 15px 0 15px;
content: '';
}
</style>
</head>
<body>
<div>
<p title="This is the first paragraph tooltip...">First Paragraph</p>
<p title="This is the second paragraph tooltip...">Second Paragraph</p>
</div>
</body>
</html>
I have 1 input area and one popup area when I click to input, the popup will show, and when I click anywhere else in the body (except popup and input), I want the popup to go hidden.
function show(){
document.getElementById('content').style.display = 'flex'
}
*{margin: 0;padding: 0;}
.main{width: 100%;height: 100%;background: rgb(160, 160, 160);}
input {width: 400px;height: 60px;}
.input, #content {display: flex;justify-content: center;padding-top: 20px;}
#content {display:none}
button {width: 150px;height: 50px;margin-top: 20px;}
h2 {background: #000;color: aliceblue;margin-top: 20px;text-align: center;}
.content-inner {width:400px;height: 200px;background: rgb(109, 68, 68);;}
<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text" onfocus="show()">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>
You can listen to document click events and then check if the click happened in the input area or somewhere else, then show or hide the modal.
Since your whole visible div in the first place is a div with class="input" and you got an input inside it, so whenever the click event does not contain input class it should hide the modal and vise versa.
const content = document.getElementById('content');
document.addEventListener("click", function(event) {
if (!event.target.classList.contains("input")) {
content.style.display = 'flex';
} else {
content.style.display = 'none';
}
})
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
background: rgb(160, 160, 160);
}
input {
width: 400px;
height: 60px;
}
.input,
#content {
display: flex;
justify-content: center;
padding-top: 20px;
}
#content {
display: none
}
button {
width: 150px;
height: 50px;
margin-top: 20px;
}
h2 {
background: #000;
color: aliceblue;
margin-top: 20px;
text-align: center;
}
.content-inner {
width: 400px;
height: 200px;
background: rgb(109, 68, 68);
;
}
<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>
Also if in any case, you want to close the modal if the click event happened anywhere outside the modal itself or input area you can check for another condition to see whether click event happened inside div with id="content" or not.
So the final code should be something like this:
const content = document.getElementById('content');
document.addEventListener("click", function(event) {
if (!event.target.classList.contains("input") && event.target.id !== "content") {
content.style.display = 'flex';
} else {
content.style.display = 'none';
}
})
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
background: rgb(160, 160, 160);
}
input {
width: 400px;
height: 60px;
}
.input,
#content {
display: flex;
justify-content: center;
padding-top: 20px;
}
#content {
display: none
}
button {
width: 150px;
height: 50px;
margin-top: 20px;
}
h2 {
background: #000;
color: aliceblue;
margin-top: 20px;
text-align: center;
}
.content-inner {
width: 400px;
height: 200px;
background: rgb(109, 68, 68);
;
}
<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>
So if you want to add another listener to the content inside the modal you can just define another event listener for it just like this:
const content = document.getElementById("content");
const button = document.querySelector("button");
const contentInner = document.querySelector(".content-inner");
document.addEventListener("click", function(event) {
if (!event.target.classList.contains("input") && event.target.id !== "content") {
content.style.display = 'flex';
} else {
content.style.display = 'none';
}
})
button.addEventListener("click", function() {
const span = document.createElement("span");
const text = document.createTextNode("newer span");
span.append(text);
contentInner.append(span)
})
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
background: rgb(160, 160, 160);
}
input {
width: 400px;
height: 60px;
}
.input,
#content {
display: flex;
justify-content: center;
padding-top: 20px;
}
#content {
display: none
}
button {
width: 150px;
height: 50px;
margin-top: 20px;
}
h2 {
background: #000;
color: aliceblue;
margin-top: 20px;
text-align: center;
}
.content-inner {
width: 400px;
height: 200px;
background: rgb(109, 68, 68);
;
}
<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>
Use jQuery mouseup event (.mouseup()) with target property (event.target) to detect click the event and hide div when clicking outside of the specific element.
<script>
$(document).mouseup(function(e){
var container = $("#elementID");
// If the target of the click isn't the container
if(!container.is(e.target) && container.has(e.target).length === 0){
container.hide();
}
});
</script>
I want to hide all the div with similar id if not clicked on any of those div's. In my code it is working only for the first div since I have use index[0] to fetch the id. I want to generalize it to work for all the id.
Here is the code:
$(window).click(function(e) {
if (e.target.id != $('[id^=div_]')[0].id) {
$('[id^=div_]').hide();
}
});
div {
height: 150px;
width: 150px;
display: inline-block;
background: green;
margin: 10px;
color: #fff;
text-align: center;
line-height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1">One</div>
<div id="div_2">Two</div>
<div id="div_3">Three</div>
<div id="div_4">Four</div>
FIDDLE
The simple solution here is to use a common class on all the elements. You can then use is() to determine if e.target was one of those elements and hide/show them as needed. Try this:
$(window).click(function(e) {
if (!$(e.target).is('.div')) {
$('.div').hide();
}
});
div {
height: 150px;
width: 150px;
display: inline-block;
background: green;
margin: 10px;
color: #fff;
text-align: center;
line-height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1" class="div">One</div>
<div id="div_2" class="div">Two</div>
<div id="div_3" class="div">Three</div>
<div id="div_4" class="div">Four</div>
I cannot make any changes in HTML like adding classes
In that case you can check the id of the clicked element to see if it begins with div_. If not, then hide all the divs, something like this:
$(window).click(function(e) {
if (e.target.id.indexOf('div_') != 0) {
$('[id^=div_]').hide();
}
});
div {
height: 150px;
width: 150px;
display: inline-block;
background: green;
margin: 10px;
color: #fff;
text-align: center;
line-height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1" class="div">One</div>
<div id="div_2" class="div">Two</div>
<div id="div_3" class="div">Three</div>
<div id="div_4" class="div">Four</div>
Hey you can use this function
if(e.target.id=="" || $('[id^=div_]').filter('#'+e.target.id).length==0){
$('[id^=div_]').hide();
}
filter function will filter the selected div in list of div whoes id starts with div
$(window).click(function(e) {
if(e.target.id=="" || $('[id^=div_]').filter('#'+e.target.id).length==0){
$('[id^=div_]').hide();
}
});
div {
height: 150px;
width: 150px;
display: inline-block;
background: green;
margin: 10px;
color: #fff;
text-align: center;
line-height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1">One</div>
<div id="div_2">Two</div>
<div id="div_3">Three</div>
<div id="div_4">Four</div>
I am going to add dynamically elements to my block of ul.
I would like to center all list's elements to parent div(brown boder).
For example,
if the resolution of the browser allows you to set two blocks in one row, I would like to center this row in relation to parent div.
I would be very graftefully.
Link to demo
myCode:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var tab = [2,3,4,5,7,8,9,11,12,13,14,15];
$(document).ready(function(){
$('#godziny').on('click', '.godzina', function(){
//alert(this.attr('class'));
$('.yb').removeClass('yb');
$(this).addClass('yb');
});
$('#getElements').click(function() {
for(i = 0; i < tab.length; ++i) {
alert(tab[i]);
setTimeout(function(i){
$('#godziny').append('<li class="godzina">' + tab[i] + '</li>');
}, i*50);
}
});
});
</script>
<style>
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
#wybor_terminu {
border: 1px solid brown;
}
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
border: 1px solid red;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
float: left;
cursor: pointer;
margin-right: 40px;
margin-top: 40px;
/*margin:auto;*/
/*
opacity: 0.4;
filter: alpha(opacity=40);
*/
}
.yb {
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="get Elements" id="getElements"/>
<section id="content">
<div class="full">
<BR/>
<div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
<div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" /> <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
<ul id="godziny" style="margin-top: 25px;">
</ul>
</div>
</section>
</div>
</body>
</html>
You can use the CSS flexbox to achieve this. Here is a link to a complete guide on how to use flexbox. I hope this helps.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this lines:
CSS
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
/*NEW*/
padding: 0;
width: 100%;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
/*float: left; You don't need this line*/
cursor: pointer;
/*NEW*/
margin:auto;
margin-top: 40px;
}
EDIT
This is only a quick solution with bootstrap maybe it could help you a little bit. jsfiddle
jQuery
In this line I added bootstrap classes:
$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');
This code center your boxes (is not the best solution, but it works):
countBoxes = $('#godziny').width() / 200;
alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2;
if(countBoxes >= 2.65){
$('#godziny').css('margin-left', alignBoxes);
} else{
$('#godziny').css('margin-left', 0);
}
If you change the resolution of your screen, click the button to center your boxes again.