Develop Reference

Javascript : Move to next element in a DIV using key

Is it possible to move to next element in my DIV wih E and return to previous element with A. I'm trying to make a menu and navigate within only with keys.
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn1");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
/* Mini menu CSS */
/* Style the buttons */
#myDIV{
margin-top:50px;
margin-left: 12px;
margin-right: px;
display:inline-flex;
}
#myDIV btn1{
top:3px;
}
#myDIV p{
top:4px;
/*margin-left: 10px;*/
letter-spacing: 1.8px;
}
.btn1 {
border: none;
outline: none;
padding: 3px 12px;
cursor: pointer;
font-size: 18px;
border-radius: 2rem;
transition: 0.2s;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
overflow: visible;
color: #000;
font-family: Proxima Nova;
font-weight: bold;
}
.active {
border-color: #366eaf;
border-width: 2px;
border-style: solid;
}
<div id="myDIV" style="display: inline-flex; margin-left: 15px; margin-right: 5px;">
<p class="btn1 active">ALL</p>
<p class="btn1">MENU1</p>
<p class="btn1">MENU2</p>
<p class="btn1">MENU3</p>
<p class="btn1">MENU4</p>
<p class="btn1">MENU5</p>
</div>

Semantically, you should be using an unordered list (<ul>) since you are actually making a list of menu items.
Next, it really isn't a "move" that you want, but a change of which element has the active class applied to it.
Your original JavaScript (while working) is more than you needed to be doing. See my reworked version with comments.
Lastly, you had some errors and some redundancy in your CSS.
See the comments inline for details.
// Listen for key strokes on the document
document.addEventListener("keydown", function(event){
// Get the currently active element
let activeElement = document.querySelector(".active");
// Check for "e" and if there is a previous sibling
if(event.key == "a" && activeElement.previousElementSibling){
// Make the previous sibling (if any) element active
deselectAll();
activeElement.previousElementSibling.classList.add("active");
} else if(event.key == "e" && activeElement.nextElementSibling){
// Make the next sibling element (if any) active
deselectAll();
activeElement.nextElementSibling.classList.add("active");
}
});
// Just set up one event handler on the parent of all the menu items
// Any click within that parent will bubble up and be handled here
document.getElementById("menu").addEventListener("click", function(event) {
// event.target is the actual element that triggered the event
if(event.target.classList.contains("btn1")){
deselectAll();
event.target.classList.add("active"); // Add active to the clicked item
}
});
// Don't use .getElementsByClassName() - - it's outdated
let items = document.querySelectorAll(".btn1");
function deselectAll(){
// Loop over all the menu items
items.forEach(function(item){
item.classList.remove("active"); // Remove the active class if its there
});
}
/* Mini menu CSS */
/* Style the buttons */
#menu{
margin-top:50px;
display: inline-flex;
margin-left: 15px;
margin-right: 5px;
list-style-type:none;
}
.btn1 {
top:3px;
letter-spacing: 1.8px;
border: none;
outline: none;
padding: 3px 12px;
cursor: pointer;
font-size: 18px;
border-radius: 2rem;
transition: 0.2s;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
overflow: visible;
color: #000;
font-family: Proxima Nova;
font-weight: bold;
/* Give non-active items an invisible 2px border
so that when they do become active the overall
size of the element doesn't shift around. */
border: 1px solid rgba(0,0,0,0);
}
.active {
border-color: #366eaf;
border-width: 2px;
border-style: solid;
}
<ul id="menu">
<li class="btn1 active">ALL</li>
<li class="btn1">MENU1</li>
<li class="btn1">MENU2</li>
<li class="btn1">MENU3</li>
<li class="btn1">MENU4</li>
<li class="btn1">MENU5</li>
</ul>

Not able to enter values in second textbox

I have created a searchbox and I have made it absolute and added one more text box on the bottom , I am unable to click and enter the value in the text box.
Note: Position must be the same, Click for the Second Text box is not working
Here is the jsFiddle Link
Here is the code snippet
var placeArr = ["Adele","Agnes","Billy","Bob","Calvin","Christina","Cindy"];
function myFunction() {
let input, filter, ul, li, liElem, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
liElem = li[i];
txtValue = liElem.textContent || liElem.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
function showDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
(liList[i]).style.display="block";
}
}
function hideDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
(liList[i]).style.display="none";
}
}
var selectPlace = function(ids){
document.getElementById("myInput").value=document.getElementById(ids).innerHTML;
hideDiv();
}
var generateList = function(array, eventfn){
let cnt=0;
array.forEach(function(item){
var node = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode(item); // Create a text node
node.appendChild(textnode);
node.setAttribute("id", "myLi"+(cnt++));
node.addEventListener("click", ()=>{eventfn(node.getAttribute("id"))});
document.getElementById("myUL").appendChild(node);
});
};
generateList(placeArr,selectPlace);
* {
box-sizing: border-box;
}
#myInput,.myInput {
background-position: 10px 12px;
background-repeat: no-repeat;
width: 50%;
font-size: 16px;
padding: 12px 20px 12px 10px;
border: 1px solid #ddd;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
width:50%;
height:200px;
overflow-y:auto;
position:absolute;
}
#myUL li {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: none;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<h2>My Phonebook</h2>
<div>
<input type="text" id="myInput" class="myInput" onkeyup="myFunction()" onclick=showDiv() placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
</ul>
</div>
<br/>
<div>
<input type="text" class="myInput">
</div>
I have added the Image

Currently, your ul tag is overriding the div underneath. So for:
<div style="z-index: 1; position: relative;">
<input type="text" class="myInput">
</div>
just add the z-index and position to have it on top. You will have to add in a style to the ul tag though onclick to override it when it is in use.
.override{
z-index: 10;
position: relative;
}
function showDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
(liList[i]).style.display="block";
}
li = document.getElementById('myUL'); // added this line
li.classList.add("override"); // added this line
}
function hideDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
(liList[i]).style.display="none";
}
li = document.getElementById('myUL'); // added this line
li.classList.remove("override"); // added this line
}
https://jsfiddle.net/tgq65jas/

The second text box is being obscured by the myUL element. In the hideDiv function, each of the li elements have their display set to none, but myUL is still there.
Rather than setting display: none for each li, set display: none on the entire ul.

Allow background-image url to be clickable

Is there a way to allow this (search) icon to be clickable? I would like it so that it can be used as an expand/collapse button for the list below it. The list is html and I can hide and show it. I'm more curious as to how I would allow the icon to be clickable to be able to hide/show the ul/li list. If this is possible, can an animation be applied somehow. This is a sample from w3 schools, but I have my own data. Should I convert it into a different type of list? There are examples online of retractable lists with animations as well.
function myFunction() {
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";
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('https://www.w3schools.com/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 0px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
</div>
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>

You can make clickable any DOM element by adding an event listener. In your example the icon is a background image of the input element, so you need to remove it from there and make it an independent image to interact with it. Then you can add the event listener to click, triggering a function to show / hide the list (I changed the css to start hidden).
var searchIco = document.getElementById("search-ico");
var myUL = document.getElementById("myUL");
searchIco.addEventListener("click", function() {
if(myUL.style.display == 'block') {
myUL.style.display = 'none';
// or: myUL.removeAttribute("style");
} else {
myUL.style.display = 'block';
}
});
function myFunction() {
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";
}
}
}
* {
box-sizing: border-box;
}
/* New */
#search-ico {
width: 16px;
height: 16px;
}
/* Background removed, size changed */
#myInput {
width: 80%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 0px;
}
#myUL {
display: none; /* Added to start hidden */
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div>
<!-- Add the icon as a separate image -->
<img id="search-ico" src="https://www.w3schools.com/css/searchicon.png">
<!-- end of edited -->
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
</div>
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>

You can call the slideToggle function based on jQuery (since you are already using jQuery)
$('#myInput').click(function(){
$('#myUL').slideToggle('slow');
});
Learn more about sideToggle here - http://api.jquery.com/slidetoggle/

Trying to Fix the (Auto Search & Auto Sort ) Code with my current HTML code

I need some help, actually I am stuck with this school project. I am trying to use the attached code, creating an auto-search website. Initially i have trouble with sorting out the tables, but eventually was fixed. However, i still have the Auto Sort issue. If i search for something, e.g. i search for "1", a list of "1" will appear. However, i wanted the page to auto sort based on the highest value to the lowest (descending). Here are the edited codes: http://plnkr.co/edit/HeFy7mONHCJDweqi03Zp?p=preview
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL ll a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a.header {
background-color: #e2e2e2;
cursor: default;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<table border="0">
<tr>
<td><li>2000</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>3000</td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>1000</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>1500</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>1400</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>2500</li></td>
<td><ll>Hotmail</ll></td>
</tr>
</table>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, ll, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
ll = ul.getElementsByTagName("ll");
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";
}
}
}
</script>
</body>
</html>

So am I right that you want to search for a Number (e.g. 2000) and the result should be: 2000 / Hotmail (matching your number)?
Edit: I saw u re not setting the display style for your 'll' elements.
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
ll[i].style.display = ""; // <- this is new
} else {
li[i].style.display = "none";
ll[i].style.display = "none"; // <- this is new
}}
Here is the live result: http://plnkr.co/edit/HeFy7mONHCJDweqi03Zp?p=info

html/css interactive calendar next/prev day button coding

I am using a tutorial I found online to fit my needs for a project. I would like to add in functional buttons that select between days (changing "active" days in calendar) and select between months.
My first question is how do I code the prev day and next day buttons to change the previous and next day to active according to css?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
}
body {
font-family: Verdana, sans-serif;
}
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .prevDay {
float: left;
}
.month .next {
float: right;
padding-top: 10px;
}
.month .nextDay {
float: right;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size: 12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
/* Add media queries for smaller screens */
#media screen and (max-width: 720px) {
.weekdays li,
.days li {
width: 13.1%;
}
}
#media screen and (max-width: 420px) {
.weekdays li,
.days li {
width: 12.5%;
}
.days li .active {
padding: 2px;
}
}
#media screen and (max-width: 290px) {
.weekdays li,
.days li {
width: 12.2%;
}
}
</style>
<style>
.pM_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #cc9900;
background-color: #ffff00;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.pM_button:hover {
background-color: #ffff00
}
.pM_button:active {
background-color: #ffcc00;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.nM_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #ffffff;
background-color: #9900cc;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.nM_button:hover {
background-color: #9900cc
}
.nM_button:active {
background-color: #660066;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.nD_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #ffffff;
background-color: #ff0000;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.nD_button:hover {
background-color: #ff0000
}
.nD_button:active {
background-color: #800000;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.pD_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #ffffff;
background-color: #33cc33;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.pD_button:hover {
background-color: #33cc33
}
.pD_button:active {
background-color: #009900;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body onkeydown="GetKey()">
<div class=" month ">
<ul>
<li class="prev ">
<button class="pM_button ">Prev Month</button>
</li>
<li class="prevDay ">
<button class="pD_button ">Prev Day</button>
</li>
<li class="next ">
<button class="nM_button ">Next Month</button>
</li>"
<li class="nextDay ">
<button class="nD_button ">Next Day</button>
</li>
<li style="text-align:center ">
August
<br>
<span style="font-size:18px ">2016</span>
</li>
</ul>
</div>
<ul class="weekdays ">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days ">
<li><span class="active ">1</span>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
<script type="text/javascript ">
function GetKey(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
//var character = String.fromCharCode(code);
setTimeout('ShowTree(' + code + ');', 100);
}
function nextDay() {
}
function ShowTree(character, k) {
//Main Menu Key
if (character == 106) {
cWindow.close();
}
//Close Key
if (character == 111) {
alert(" Key: / ");
responsiveVoice.speak("Close ", "UK English Male ");
}
//PageUP Key, next month
if (character == 98) {
alert(" Key: 2 ");
responsiveVoice.speak("Page Up ", "UK English Male ");
}
//PageDOWN key, previous month
if (character == 99) {
alert(" Key: 3 ");
responsiveVoice.speak("Page Down ", "UK English Male ");
}
//Previous Key, Previous Day
if (character == 65) { //keypad key 101
responsiveVoice.speak("Previous ", "UK English Male ");
//alert(" Key: 5 ");
}
//Next Key, Next Day
if (character == 68) { //keypad key 102
responsiveVoice.speak("Next ", "UK English Male ");
$(".pD_button ").click(.days.active++);
//alert(" Key: 6 ");
}
//Select Key
if (character == 83) { //keypad key 104
responsiveVoice.speak("Select ", "UK English Male ");
}
//alert(" Key: 8 ");
}
</script>
</body>
</html>

You can easily add the active class to any DOM element by using addClass("class") and remove the class with removeClass("class"), provided you're using jQuery.
So if you wish to mark the pD_button as active, you can do it like this with jQuery
$(".pD_button").addClass("active");
If you wish to accomplish this with vanilla JavaScript you would have to write your own functions that add and remove a class.
You could do that with
classList https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
or
className https://developer.mozilla.org/en-US/docs/Web/API/Element/className.
This approach is better than using the :active pseudo-class in CSS.
The :active pseudo-class is triggered when the mouse is being clicked, but only while the mouse button is held down. That means after you release the mouse click, :active is turned off. By using the approach mentioned above you just add another class when an onclick event happens to get the desired behavior.
var prevButton = $(".pD_button");
prevButton.on("click", function() {
if (!prevButton.hasClass("active")) {
prevButton.addClass("active");
} else /*if (prevButton.hasClass("active"))*/ {
prevButton.removeClass("active");
}
});
You can check it out here: https://jsfiddle.net/cqm26q1n/.
It is important that the .active in your CSS comes after the .pD_button class, so that it overwrites its CSS when the active class get's attached to it.
EDIT:
Use the approach I suggested combined with jQuery .keydown(handler):
var prevButton = $(".pD_button");
prevButton.on("keydown", function(e) {
if (e.which === 102 || e.which === 68) {
if (!prevButton.hasClass("active")) {
prevButton.addClass("active");
} else /*if (prevButton.hasClass("active"))*/ {
prevButton.removeClass("active");
}
}
});
Check the documentation of keydown here.

Assuming you are jQuery ( noticing presence of $ sign and .click event), There are couple of errors in this section you wrote.
//Next Key, Next Day
if (character == 68) { //keypad key 102
responsiveVoice.speak("Next ", "UK English Male ");
$(".pD_button ").click(.days.active++);
//alert(" Key: 6 ");
}
More specifically in this like $(".pD_button ").click(.days.active++);
General jQuery event works like, $("SELECTOR").EVENT(CALLBACK_FUNCTION);
So, in your case, to go to next date, the code should be like
//Next Key, Next Day
if (character == 68) { //keypad key 102
responsiveVoice.speak("Next ", "UK English Male ");
$(".pD_button ").click(function(e){
$('ul.days').find("li.active").removeClass('active').next().addClass('active');
e.preventDefault();
});
//alert(" Key: 6 ");
}
Similarly, to go make previous date active, you just need to use .after() method instead of .next() at this line $('ul.days').find("li.active").removeClass('active').next().addClass('active');
To know more about jQuery .next() methods, check the links
https://api.jquery.com/click/ to know about .click event