How to make a option in search to be always visible

How to make a option in search to be always visible - javascript

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>

Related

Mouse hover over button (Auto Hide & Auto Expand)

I have the code for my html button with CSS everything looks fine, just wanted to modify the button code because it should auto hide when user move away cursor from the button and same when it hover over the button should auto expand, basically it should auto expand and auto reduce and dropdown arrow would add value to it.
I already have code little confusion about adding the above points
The Dropdown arrow key to button,
Auto Expand & reduce on mouse cursor movement over the button),
/* 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";
}
}
}
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SURAH</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>

Use onmouseover and onmouseout.
I guess you would like to keep myDropdown open, when you hover it, so I added the onmouseover/onmouseout effect also there.
And JS code is simple:
function show() {
document.getElementById("myDropdown").classList.add("show");
}
function hide() {
document.getElementById("myDropdown").classList.remove("show");
}
function show() {
document.getElementById("myDropdown").classList.add("show");
}
function hide() {
document.getElementById("myDropdown").classList.remove("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";
}
}
}
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onmouseover="show()" onmouseout="hide()" class="dropbtn">SURAH</button>
<div onmouseover="show()" onmouseout="hide()" id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>

For the hovering part, you can achiveve it with CSS only:
.dropdown-content {
display: none;
}
.dropbtn:hover + .dropdown-content {
display: block;
}
Working example:
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropdown-content {
display: none;
}
.dropbtn:hover + .dropdown-content {
display: block;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SURAH</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>

How to make the search box stable?

This is an search box design and it is working perfectly but on typing it fluctuates. it keep on changing its position. I want the box to be fixed at a place and the dropdown below should not effect the position of box.
Here is the code that I am trying.
function filterFunction() {
let isInputAvail = false;
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;
filter = filter.replace(/\s/g, '')
txtValue = txtValue.replace(/\s/g, '')
if (txtValue.toLowerCase().indexOf(filter) > -1) {
isInputAvail = true;
a[i].style.display = "block";
} else {
a[i].style.display = "none";
}
}
if (!isInputAvail) {
document.getElementById("noMatches").classList.add('show');
} else {
document.getElementById("noMatches").classList.remove('show');
}
}
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.s01 {
min-height: 100vh;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
font-family: 'Poppins', sans-serif;
background: url("../images/Search_001.png");
background-size: cover;
background-position: center center;
padding: 15px;
}
.div {
display: none;
background-color: #0000D6;
}
.dropbtn {
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 10px;
}
input {
background: url("images/search/searchicon.png") top left no-repeat;
padding-left: 25px;
}
#myInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
color: #000000;
font-size: 18px;
font-family: Tahoma, Geneva, sans-serif;
padding: 14px 20px 12px 45px;
border: 3px solid #000000;
border-radius: 10px;
background-color: #C4C6C3;
}
#myInput:focus {
outline: none;
border-color: #171313;
background-color: #FFFFFF;
border: 5px solid #000000;
color: #000000;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
max-height: 215px;
display: none;
position: relative;
background-color: #A3A3A3;
min-width: 230px;
overflow-y: scroll;
border: none;
z-index: 1;
border-radius: 10px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="s01">
<div class="dropdown">
<input type="text" class="dropbtn" placeholder="Search Here..." id="myInput" onInput="filterFunction()">
<div id="myDropdown" class="dropdown-content">
Search 1
Search 2
Search 3
Search 1
Search 1
Search 5
Search 5
Search 5
</div>
<div id="noMatches" class="dropdown-content">
<b>No Matches?</b> Perform custom search
</div>
</div>
</div>
Try here typing 1, 2 and 3 you will get what I am asking. I want it to fix at a position.

just set .dropdown-content position absolute and width:100%
function filterFunction() {
let isInputAvail = false;
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;
filter = filter.replace(/\s/g, '')
txtValue = txtValue.replace(/\s/g, '')
if (txtValue.toLowerCase().indexOf(filter) > -1) {
isInputAvail = true;
a[i].style.display = "block";
} else {
a[i].style.display = "none";
}
}
if (!isInputAvail) {
document.getElementById("noMatches").classList.add('show');
} else {
document.getElementById("noMatches").classList.remove('show');
}
}
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.s01 {
min-height: 100vh;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
font-family: 'Poppins', sans-serif;
background: url("../images/Search_001.png");
background-size: cover;
background-position: center center;
padding: 15px;
}
.div {
display: none;
background-color: #0000D6;
}
.dropbtn {
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 10px;
}
input {
background: url("images/search/searchicon.png") top left no-repeat;
padding-left: 25px;
}
#myInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
color: #000000;
font-size: 18px;
font-family: Tahoma, Geneva, sans-serif;
padding: 14px 20px 12px 45px;
border: 3px solid #000000;
border-radius: 10px;
background-color: #C4C6C3;
}
#myInput:focus {
outline: none;
border-color: #171313;
background-color: #FFFFFF;
border: 5px solid #000000;
color: #000000;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
max-height: 215px;
display: none;
position: absolute;
width:100%;
background-color: #A3A3A3;
min-width: 230px;
overflow-y: scroll;
border: none;
z-index: 1;
border-radius: 10px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="s01">
<div class="dropdown">
<input type="text" class="dropbtn" placeholder="Search Here..." id="myInput" onInput="filterFunction()">
<div id="myDropdown" class="dropdown-content">
Search 1
Search 2
Search 3
Search 1
Search 1
Search 5
Search 5
Search 5
</div>
<div id="noMatches" class="dropdown-content">
<b>No Matches?</b> Perform custom search
</div>
</div>
</div>

how to overlap contents of iframe tag

I have made this search bar... And i want to use this page on many pages using iframe tag.
But when i use it and when results are shown, it shifts other elements, or a scroll bar is visible ... I want the result to overlaped on the other contents of the site... So that it is visible normally...
here is my code---
function filterFunction() {
let isInputAvail = false;
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) {
isInputAvail = true;
a[i].style.display = "block";
} else {
a[i].style.display = "none";
}
}
if (!isInputAvail) {
document.getElementById("noMatches").classList.add('show');
} else {
document.getElementById("noMatches").classList.remove('show');
}
}
.div {
display: none;
}
.dropbtn {
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 25px;
}
#myInput {
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: 5px solid #ddd;
border-radius: 25px;
}
#myInput:focus {
outline: 4px solid #f2f2f2;
border-color: #171313;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
max-height: 215px;
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow-y: scroll;
border: none;
z-index: 1;
border-radius: 25px;
}
.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" onInput="filterFunction()">
<div id="myDropdown" class="dropdown-content">
Result 1
Result 2
Result 3
Result 4
Result 5
Result 6
Result 7
Result 8
Result 9
Result 10
Result 11
Result 12
Result 13
Result 14
Result 15
</div>
<div id="noMatches" class="dropdown-content">
No Matches
</div>
</div>

I still don't get was this what you meant.
<style>
.dropbtn{
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 25px;
}
#myInput{
box-sizing: border-box;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: 5px solid #ddd;
border-radius: 25px;
}
#myInput:focus{
outline: 4px solid #f2f2f2;
border-color: #171313;
}
.dropdown{
position: relative;
display: inline-block;
flex-direction: column;
justify-content: flex-start;
}
.dropdown-content{
max-height: 215px;
display: none;
top: 60px;
left: 0;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
max-width: 70px;
overflow-y: scroll;
border: none;
z-index: 1;
border-radius: 25px;
}
.dropdown-content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover{background-color: #ddd;}
.show{display: block;}
body{margin: 0;}
.header{
height: 90px;width: 100vw;
display: flex;position: relative;
align-items: center;
justify-content: space-around;
z-index: 10;
}
.dropdown-content::-webkit-scrollbar{
background: transparent;
width: 0;
display: none;
}
.banner{
background-color: #AAA;color: white;
height: 150px;width: 100vw;
top: 90px;left: 0;
display: block;position: absolute;
z-index: 1;
}
</style>
<div class="header">
<div class="dropdown">
<input type="text" class="dropbtn"placeholder="Search Here..." id="myInput" onInput="filterFunction()"/>
<div id="myDropdown" class="dropdown-content">
Result 1 a very long long line one result
Result 2
Result 3
Result 4
Result 5
Result 6
Result 7
Result 8
Result 9
Result 10
Result 11
Result 12
Result 13
Result 14
Result 15
</div>
<div id="noMatches" class="dropdown-content">
No Matches
</div>
</div>
<div>Other</div>
</div>
<div class="banner">Banner Content<div>

Don't get it but is it something like top: 60px;left: 0; in .dropdown-content?

(HTML,CSS,JS) Trying to add Clickable Dropdown, icon button

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.

How can I force my dropdown box (HTML) to open on an iOS scroll wheel

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>

Develop Reference

JavaScript is the programming language of the Web.

How to make a option in search to be always visible - javascript

Related

Mouse hover over button (Auto Hide & Auto Expand)

How to make the search box stable?

how to overlap contents of iframe tag

(HTML,CSS,JS) Trying to add Clickable Dropdown, icon button

How can I force my dropdown box (HTML) to open on an iOS scroll wheel

Categories

Resources