Develop Reference

Is there a way to have multiple dropdowns on one page?

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>

drop down submenu in javascript

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

how to create google maps dropdown

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.

Linking a Javascript function on a layout that is loaded from the asset pipeline in ruby on rails?

When I link a function from an asset pipeline loaded javascript file(app/assets/javacripts/bootstrap.js) in my static page layout upon inspection I get: Uncaught ReferenceError: myFunction is not defined. I have googled for hours and without using Coffeescript or Jquery or methods inside of ruby I would simply like to link this function from my .js file into an layout in my views. Any specific explanation or if you could link me to any resources on how to do this...or something that is a tutorial designed to quickly link Javascript into views not disturbing the pipeline that would be great. Thank you in advance.
Here is the Javascript function:
/* When the user clicks on the button,
toggle between hiding and showing dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu 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');
}
}
}
}
Here is the corresponding css:
/* 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;}
Here is my html:
<li>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Work Places
Living Places
Learning Places
Interiors
Miscellaneous
</div>
</div>
</li>

Try defining your function this way to (hopefully) make it global and accessible in your view:
this.myFunction = function() {
document.getElementById('myDropdown').classList.toggle('show');
};
Otherwise you can remove onclick from the view and attach it within the javascript file:
document.getElementsByClassName('dropbtn')[0].onclick = function() {
document.getElementById('myDropdown').classList.toggle('show');
};

CSS how to make an image clickable with this dropdown function?

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