This is my HTML code
<div class="location-dropdown dropdown">
<button onclick="locations_dropdown()" class="dropbtn" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">{{site_network_status['sitename']}}</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<div>
<a class="dropdown-item" href="link1">link1</a>
<a class="dropdown-item" href="link2">link2</a>
</div>
</div>
</div>
And this is my js code used to show all the options and let user search.
function locations_dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
this works fine. But I have way too many option links in the dropdown menu. So i want an option to be able to scroll through those options. i only want to be able to show around 10 options and scroll from that down.
Any help will be appreciated.
Update
this is the css file i am using.
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
add scrolable-container class and style it.
h1,
h2 {
font-family: Lato;
}
.dropbtn {
background-color: #04aa6d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.scrolable-container {
overflow: auto;
max-height: 420px;
}
<body>
<div class="location-dropdown dropdown">
<button onclick="locations_dropdown()" class="dropbtn" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">{{site_network_status['sitename']}}</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<div class="scrolable-container">
<a class="dropdown-item" href="link1">link1</a>
<a class="dropdown-item" href="link2">link2</a>
<a class="dropdown-item" href="link2">link3</a>
<a class="dropdown-item" href="link2">link4</a>
<a class="dropdown-item" href="link2">link5</a>
<a class="dropdown-item" href="link2">link6</a>
<a class="dropdown-item" href="link2">link7</a>
<a class="dropdown-item" href="link2">link8</a>
<a class="dropdown-item" href="link2">link9</a>
<a class="dropdown-item" href="link2">link10</a>
<a class="dropdown-item" href="link2">link11</a>
<a class="dropdown-item" href="link2">link12</a>
<a class="dropdown-item" href="link2">link13</a>
<a class="dropdown-item" href="link2">link14</a>
<a class="dropdown-item" href="link2">link15</a>
<a class="dropdown-item" href="link2">link16</a>
</div>
</div>
</div>
<script>
function locations_dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</script>
</body>
Related
I have made an search bar using html, css and javascript and it is working perfectly but I want the answers to be shown when the user starts typing, not before. And I also want to add one option in it which is always shown whether it matches the result or not.
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.div {
display: none;
}
.dropbtn {
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
#myInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border: 5px solid #ddd;
}
#myInput:focus {
outline: 7px solid #ddd;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="dropdown">
<input type="text" onclick="myFunction()" class="dropbtn" placeholder="Search Here..." id="myInput" onkeyup="filterFunction()">
<div id="myDropdown" class="dropdown-content">
About
Base
Blog
Contact
Custom
Support
Tools
Cyber Warriors YouTube Channel
</div>
</div>
Please try to remove onclick event and code to show dropdown inside onkeyup event.
For better understanding see the attached code snippet.
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toLowerCase();
if (filter.length > 0) {
document.getElementById("myDropdown").classList.add("show");
} else {
document.getElementById("myDropdown").classList.remove("show");
}
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].innerText;
if (txtValue.toLowerCase().indexOf(filter) > -1 || txtValue.toLowerCase() === 'more') {
a[i].style.display = "block";
} else {
a[i].style.display = "none";
}
}
}
.div {
display: none;
}
.dropbtn {
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
#myInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border: 5px solid #ddd;
}
#myInput:focus {
outline: 7px solid #ddd;
}
.dropdown{
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="dropdown">
<input type="text" class="dropbtn" placeholder="Search Here..." id="myInput" onInput="filterFunction()">
<div id="myDropdown" class="dropdown-content">
About
Base
Blog
Contact
Custom
Support
Tools
Cyber Warriors YouTube Channel
More
</div>
</div>
</body>
</html>
Remove onclick from input and add a class "fixed-input" on the value you wanted to be fixed
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function hideOptions() {
document.getElementById("myDropdown").classList.remove("show");
}
function showOptions() {
hideOptions();
document.getElementById("myDropdown").classList.add("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
if( input.value === ''){
hideOptions();
return false;
}
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else if(a[i].classList.contains('fixed-input') === true) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
showOptions();
}
.div {
display: none;
}
.dropbtn {
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
#myInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border: 5px solid #ddd;
}
#myInput:focus {
outline: 7px solid #ddd;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="dropdown">
<input type="text" class="dropbtn" placeholder="Search Here..." id="myInput" onkeyup="filterFunction()">
<div id="myDropdown" class="dropdown-content">
About
Base
Blog
Contact
Custom
Support
Tools
Cyber Warriors YouTube Channel
</div>
</div>
I made "hamburger" icon on my website navigation bar.
I added simple animation JavaScript, it works great.
Now I want the icon to open Clickable Dropdown, I am kinda confused since I am already using script file, and class.
I am not sure how can i combine two JS code to the same Class, and how to edit the dropdown links with the original icon bars..
this is my Icon :
HTML:
<div class="hamburger" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
CSS:
.hamburger {
cursor: pointer;
color:#333;
list-style: none;
float: right;
padding: 18px;
position: relative;
display: inline-block;
}
Javascript:
function myFunction(x) {
x.classList.toggle("change");
}
Finally this is the dropdown I am trying to add:
HTML:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
CSS:
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
Javascript:
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');
}
}
}
}
You can use the same function for both elements. I think the main issues is that you make the drop down disappear when clicked outside it. This "outside" includes the hamburger menu icon.
Here is a working example:
// Keep a refernce for dropdown to access it from any function
const dropdown = document.getElementById("myDropdown");
function myFunction() {
dropdown.classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
// Make sure ".hamburger" or any other class is included so when it is clicked it won't hide the dropdown
if (!event.target.matches('.dropbtn, .hamburger')) {
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');
}
}
}
}
.hamburger {
cursor: pointer;
color: #333;
list-style: none;
float: right;
padding: 18px;
position: relative;
display: inline-block;
width: 20px;
}
.hamburger>div {
height: 2px;
background-color: black;
width: 100%;
margin-bottom: 5px;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="dropdown">
<div class="hamburger" onclick="myFunction()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
I tried this solution, hope it works for you:
<style>
.hamburger {
cursor: pointer;
color: #333;
list-style: none;
float: right;
padding: 18px;
position: relative;
display: inline-block;
}
.bar1, .bar2,.bar3 {
width: 40px;
height: 2px;
background-color: black;
margin-bottom: 5px;
}
.dropbtn {
background-color: #3498db;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980b9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 50px;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
</style>
<div class="dropdown">
<div class="hamburger" onclick="myFunction()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<!-- <button onclick="myFunction()" class="dropbtn">Dropdown</button> -->
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<script>
function myFunction() {
const dropdown = document.getElementById('myDropdown')
dropdown.classList.toggle('show')
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.hamburger')) {
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')
}
}
}
}
</script>
As you can see I commented out the button, I'm not sure why you would use both, the button and the hamburguer button. Also added some styles to the 'bar; divs, otherwise you didn't see any 'hamburguer'.
Lastly change the thing you are matching on the window event listener to see if it contains the 'hamburger' class.
I am relatively new to codeing and I am keen to learn... but...
I have the following HTML dropdown box - I have included the javascript and css just in case.
I want for, when a user is on an iOS device, when the user clicks on the dropdown, for the options to be selectable using the iOS scrolling wheel... as shown in the image below, I hope somebody can help!
Code:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 250px;
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
welcome to the site!
I think your issue here is that you've implemented your own dropdown rather than used the built in and tags. I believe that using these will cause iOS to automatically render a picker when that element is interacted with.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("dropdown-block").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("option");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: none;
}
.dropdown-content {
background-color: #f6f6f6;
min-width: 250px;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid #ddd;
z-index: 1;
display:block;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="dropdown-block" class="dropdown">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<select id="myDropdown" class="dropdown-content">
<option href="#about">About</option>
<option href="#base">Base</option>
<option href="#blog">Blog</option>
<option href="#contact">Contact</option>
<option href="#custom">Custom</option>
<option href="#support">Support</option>
<option href="#tools">Tools</option>
</select>
</div>
This question already has answers here:
UL or DIV vertical scrollbar
(4 answers)
Closed 4 years ago.
I followed the "tutorial" here, but it's not working. I'll put all relevant code below. I'm fairly sure the reason it doesn't work is because I have overflow-y: hidden; in the body, and the list is contained within the body, so maybe it defaults. However, if I don't do this, the whole page scrolls and not just the list. Thanks so much.
function SearchBar() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
body{
background-color: #081543;
overflow-y:hidden;
}
p{
color: white;
text-align: center;
height: 25%;
font-size: 25pt;
margin-left: 30%;
margin-right:30%;
font-family: sans-serif;
}
#logo{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
* {
box-sizing: border-box;
}
#myInput {
width: 50%;
font-size: 16px;
padding: 12px 0px 12px 10px;
border: 1px solid #ddd;
margin-bottom: 12px;
margin-left: 25%;
margin-right: 25%;
}
ul{
min-height: 200px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
overflow: scroll;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
width: 50%;
margin-left: 25%;
margin-right: 25%;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<!Doctype html>
<body>
<input type="text" id="myInput" onkeyup="SearchBar()" placeholder="type in an item" title="Type in a name">
<ul id="myUL">
<li><a href="main.html" onclick=''>apple</a></li>
<li><a href="main.html" onclick=''>fruit</a></li>
<li><a href="main.html" onclick=''>shirt</a></li>
<li><a href="main.html" onclick=''>thing</a></li>
<li><a href="main.html" onclick=''>stack</a></li>
<li><a href="main.html" onclick=';'>overflow</a></li>
<li><a href="main.html" onclick=''>list</a></li>
</ul>
</body>
Use height instead on min-height of element ul.
function SearchBar() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
body{
background-color: #081543;
overflow-y:hidden;
}
p{
color: white;
text-align: center;
height: 25%;
font-size: 25pt;
margin-left: 30%;
margin-right:30%;
font-family: sans-serif;
}
#logo{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
* {
box-sizing: border-box;
}
#myInput {
width: 50%;
font-size: 16px;
padding: 12px 0px 12px 10px;
border: 1px solid #ddd;
margin-bottom: 12px;
margin-left: 25%;
margin-right: 25%;
}
ul{
height: 150px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
overflow: scroll;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
width: 50%;
margin-left: 25%;
margin-right: 25%;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<!Doctype html>
<body>
<input type="text" id="myInput" onkeyup="SearchBar()" placeholder="type in an item" title="Type in a name">
<ul id="myUL">
<li><a href="main.html" onclick=''>apple</a></li>
<li><a href="main.html" onclick=''>fruit</a></li>
<li><a href="main.html" onclick=''>shirt</a></li>
<li><a href="main.html" onclick=''>thing</a></li>
<li><a href="main.html" onclick=''>stack</a></li>
<li><a href="main.html" onclick=';'>overflow</a></li>
<li><a href="main.html" onclick=''>list</a></li>
</ul>
</body>
For the scrollbar to appear you need to make the height of ul smaller than the height of its children elements, so there is content to be scrolled towards. You can also hide the horizontal scrolbar by using overflow-y: auto instead of overflow: auto.
function SearchBar() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
body {
background-color: #081543;
overflow-y: hidden;
}
p {
color: white;
text-align: center;
height: 25%;
font-size: 25pt;
margin-left: 30%;
margin-right: 30%;
font-family: sans-serif;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
* {
box-sizing: border-box;
}
#myInput {
width: 50%;
font-size: 16px;
padding: 12px 0px 12px 10px;
border: 1px solid #ddd;
margin-bottom: 12px;
margin-left: 25%;
margin-right: 25%;
}
ul {
height: 200px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: scroll;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
width: 50%;
margin-left: 25%;
margin-right: 25%;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<!Doctype html>
<body>
<input type="text" id="myInput" onkeyup="SearchBar()" placeholder="type in an item" title="Type in a name">
<ul id="myUL">
<li><a href="main.html" onclick=''>apple</a></li>
<li><a href="main.html" onclick=''>fruit</a></li>
<li><a href="main.html" onclick=''>shirt</a></li>
<li><a href="main.html" onclick=''>thing</a></li>
<li><a href="main.html" onclick=''>stack</a></li>
<li><a href="main.html" onclick=';'>overflow</a></li>
<li><a href="main.html" onclick=''>list</a></li>
</ul>
</body>
Your indication would be correct, that the body overflow:hidden is causing the issue. However, I've noticed as well that in the css for your ul that you have a min-height. All this will do is continue to increase the size of your ul past the point of the body whereupon it would be hidden.
The purpose of a scroll is to enable you to view content when the height or width of the content exceeds the boundaries of the element it is in - by including a min-height, it never exceeds those boundaries, instead increasing them.
Change your ul min-height to height and you will be fine :) Hope that helps!
I have code below for 2 ddls containing 3 items. Is it possible to have the title shown on each drop down list change to whatever item the user selects, but only using vanilla JavaScript or CSS? Anything would help, cheers.
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
var div = document.getElementsByClassName('dropdown-content');
for(var i =0;i<div.length;i++){
for(var j =0;j<div[i].children.length;j++){
div[i].children[j].addEventListener('click',function(){
this.parentNode.previousElementSibling.innerHTML = this.innerHTML;
})
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You can do this with Vanilla JS.
You'll simply attach click listeners to each anchor, then traverse up the parent nodes to find the button and replace the innerHTML.
Please note that anchors is all the links in you page, so if there are other anchors on your page beside what you've provided, you'll need to be a little more specific when defining the anchors array.
var anchors = document.getElementsByTagName('a');
for(var i = 0, len = anchors.length; i < len; i++) {
var thisAnchor = anchors[i];
thisAnchor.onclick = function () {
var btn = this.parentNode.parentNode.getElementsByTagName('button')[0];
btn.innerHTML = this.innerHTML;
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Here is a jsfiddle for you.
JSFIDDLE
<div class="dropdown">
<button id="btn1" class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button id="btn2" class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<script>
function doSelect(text,btn){
var myElement = document.getElementById(btn);
myElement.innerText = text;
}
</script>