I wanted to put a lot of dropdowns on one page, and I could easily get them there. The problem is that when I click on the second one, it displays what's on the first, despite having different contents. Is there a solution for this?
Code because it wouldn't fit here:
https://jsfiddle.net/ne720zps/
Send the button that was clicked to myFunction. Get the appropriate dropdown from the button's relative position to that dropdown (the dropdown is the next element after the button in your code). Delete the duplicated IDs on the dropdown divs.
<button onclick="myFunction(this)">
and
function myFunction(button) {
// the dropdown is the next element after the button that was clicked
button.nextElementSibling.classList.toggle("show");
}
Here's a restructuring of that HTML, with ID tags removed and an example on how to target elements based on their proximity/relationship to the button.
// let the page load...
document.addEventListener('DOMContentLoaded', () => {
// assign the button click
document.querySelectorAll('.dropbtn').forEach(btn => {
btn.addEventListener('click', e => {
// first close all
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'))
// open the one you want which is CLOSEST
e.target.closest('.dropdown').querySelector('.dropdown-content').classList.add('show');
})
})
// catch the click outside
document.addEventListener('click', e => {
if (e.target.classList.contains('dropbtn')) return;
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'))
})
})
body {
background: black;
color: white;
}
.dropbtn {
background-color: #ffffff;
color: black;
padding: 10px;
font-size: 20px;
border: none;
cursor: pointer;
width: auto;
margin-bottom: 0;
font-weight: 600;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background: linear-gradient(90deg, #00ffa8, #2300ff);
color: white;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline-block;
text-align: center;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
text-align: left;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
width: 30%;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
background: white;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
#center {
text-align: center;
}
<div class="center">
<div class="dropdown">
<button class="dropbtn">Embedded Browser</button>
<div class="dropdown-content">
<b><i>Unblocked browser that won’t show up in your history. Doesn’t work with a lot of websites, so you can mostly just search.
</i></b>
</div>
</div>
</div>
<div class="center">
<div class="dropdown">
<button class="dropbtn">Fullscreen Browser</button>
<div class="dropdown-content">
<b><i>Same as the last one, but takes up your whole screen.
</i></b>
</div>
</div>
</div>
Related
Trying to make my tooltips show and hide on click. I managed to do it with the first tooltip but this doesn´t work for the others.
I know that the problem might be with the code document.getElementById but I don´t know with which code I have to replace that, so that every tooltip gets triggered one after the other when clicked.
How can I manage that all the tooltips are shown and hidden as the first one?
Thanks for your support! ;)
//Showing the tooltip on click
document.getElementById("website-tooltip-container").addEventListener("click", function() {
var element = document.getElementById("test");
element.classList.add("website-tooltiptext-visible");
});
//Removing tooltip when clicked outside tooltip container or outside tooltip itself
document.addEventListener('mouseup', function(e) {
var container = document.getElementById('test');
if (!container.contains(e.target)) {
container.classList.remove("website-tooltiptext-visible");
}
});
/* Tooltip Container */
.website-tooltip {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
color: #666;
}
/* Tooltip text */
.website-tooltip .website-tooltiptext {
visibility: hidden;
max-width: 350px;
font-family: open sans;
font-size: 13px;
line-height: 22px;
background-color: #FFFFFF;
color: #666;
text-align: left;
padding: 11px 15px 11px 15px !important;
border-radius: 3px;
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 100%;
margin: 0px 0px 0px 0px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.website-tooltip:hover .website-tooltiptext {
visibility: visible;
}
/* Hide when hovering over tooltip div */
div.website-tooltiptext:hover {
display: none;
}
/* Toggle this class to show Tooltip on click via Javascript */
.website-tooltiptext-visible {
visibility: visible !important;
display: block !important;
}
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
Thanks for your help!
This question got answered in a similar question I made.
Here the link to the question also in stackoverflow
There you will find deeper insights and possible solutions for tooltips via JavaScript or :hover pseudo class.
I have an image that displays a dropdown menu on click. This is the HTML code:
<div class="menu">
<img id="menu_img" src="https://res.cloudinary.com/dqn5eqmwt/image/upload/v1493014197/Menu_jwzusk.svg">
<div id="myDropdown" class="dropdown-content">
<a id="Edprof">Edit Profile</a>
<a id="Deprof">Delete Profile</a>
<a id="Chistory">Check History</a>
<a id="Bevents">Book Events</a>
<a id="Getout">Logout</a>
</div>
</div>
This is the CSS for the entire menu:
.menu {
display: block;
position: absolute;
z-index: 2;
height:55px; /* 150/640 */
width:55px;/*150/1536*/
top: 2.5%;
right: 10.0208333333%;
float: right;
cursor: pointer;
}
#menu_img{
width:55px;
height:55px;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.menu:hover, .menu:focus {
background-color: #3e8e41;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #7de88a;
border: 6px solid #7de88a;
border-radius: 10px;
width: 300%;
right: 0px;
left: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
cursor: pointer;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #c43396;
background-color: #fff3bb;
font-family: Chewy;
border: 6px solid #7de88a;
border-radius: 10px;
margin-top: 2.5px;
margin-bottom: 2.5px;
padding: 12px 16px;
display: block;
}
Finally, this is the JS for the onclick of image event:
$(function(){
$('#menu_img').on('click touch',function() {
document.getElementById("myDropdown").style="display:block";
})
});
I also have a JS to hide the dropdown on click anwhere in the window other than the menu_img. This works perfectly well on laptops and android phones. The only problem is iPhones. On click, the background color changes, which is actually the hover action. But dropdown menu does not appear.
From what I read these are the checks I've already tried:
1. Added cursor:pointer to menu_img in CSS
2. Removed hover action and tested if click would happen then
3. added onclick() function to the HTML code
4. Added touch along with click as the event trigger in the JS code
5. Checked if it displays on double click(but that just zooms the page)
None of these have worked for me. Any suggestions/tests/help is appreciated. Thanks!
I edited your code and run it on my server. It works perfectly on all devices. A personal tip: use jQuery everywhere or don't use it at all.
$(document).ready(function(){
$('#menu_img').click(function(){
$('#myDropdown').show();
});
});
hope my question is clear
On pressing on the unique button i have on this page, i want to display the menu having three elements only.
the "Languages" item menu wraps a submenu that i want to display only if the user clicks on "Languages"
however for the moment whenever i click on the button, not only the menu appears but also the submenu; and that is not what i want to have.
can you please inform me what is wrong with my code please?
enter image description here
Code:
function myFunction2() {
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction3() {
document.getElementById("languageslist").classList.toggle("show");
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
border: 1px solid black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdownb {
position: relative;
display: inline-block;
}
.show {
display: block;
}
<div class="dropdown">
<button id="btn" onclick="myFunction2()">Show</button>
<div id="myDropdown" class="dropdown-content">
<p>Countries</p>
<p id="btnl" onclick="myFunction3()">Languages</p>
<div id="languageslist">
English
Spanish
German
</div>
<p>Continents</p>
</div>
</div>
This is because you are not hiding the submenu at initial stage.
Add a class to languagelist & hide it. On click of it toggle the class
HTML
<div id = "languageslist" class="hide"> // add a class here
English
Spanish
German
</div>
JS
function myFunction3() {
document.getElementById("languageslist").classList.toggle("hide");
document.getElementById("languageslist").classList.toggle("show");
}
JSFIDDLE
I have a site using Google Maps. I am placing a large number of icons of different types on the map. As a result, I'd like to be able to filter which are shown. To do this, I want a dropdown with checkboxes. This is very similar to an example at demo dropdown. I tried using this as an example, but there are many functions not documented (I assume that they are in some of the other files that are not accessible. When I save the source and open it, the dropdowns are not working.).
I just need to take a simple list and create a dropdown that is embedded on the map. I have a sample that uses the following method of creating a set of checkboxes. The boxes are made with:
var legend = document.getElementById('legend');
for (var key in names) {
var type = names[key];
var name = type.name;
var id = type.id;
var div = document.createElement('div');
div.innerHTML = '<input type="checkbox" name="' + id + '" id="' + id + '" checked="checked" />' + name;
legend.appendChild(div);
}
and the html is the following:
<body >
<div id="map_canvas" > </div>
<div id="legend" ></div>
</body>
I just want a simple methodology. There will only be a small number of choices, though this really makes no difference.
here is the style code
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 1px solid #000;
width: 10%;
}
#legend h3 {
margin-top: 0;
}
#map_canvas {
height: 100%;
}
#legend img {
vertical-align: middle;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
</style>
here's the html
<div class="dropdown">
Dropdown
Account
Opportunity
Lead
Example over here works for me, Customized dropdown inside googlemap
You just need to check the source code, get the js and css code from these files, gdropdown.css gdropdown.js, located at the top. Everything will be just fine.
What I'm trying to make is a settings icon that you can click which then creates a drop down of options.
This is the code I have so far:
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-image: url("icons/settings-icon.png");
background: #aeaba9;
color: white;
padding: 10px;
font-size: 10px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #5f5f5f;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
<!DOCTYPE html>
<html>
<head>
</head>
<title>Clickable Dropdown</title>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button id="myBtn" class="dropbtn"></button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</body>
</html>
I tried to add the css line
background-image: url("icons/settings-icon.png");
but this doesn't do anything or throw an error. So I'm not sure what I'm doing wrong, or how to go about this.
I noticed you have it written:
background-image: url("icons/settings-icon.png");
background: #aeaba9;
The second line is overwriting the first line. You might want to reorder them or make the second line read more specifically background-color: #aeaba9;
Have you tried to just add the id to the image so
<div class="dropdown">
<img src="icons/settings-icon.png" id="myBtn" />
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
in replace of the button
background-image: url(../file.png);
you may want to try out using ../ before the file name