CSS not recognizing hover color set

CSS not recognizing hover color set - javascript

I created a filter search list on javascript and nested the elements of my list under 3 different categories.
Cuenta NT
Training On the Job
Manual de procedimientos
The table works great while looking for any of these terms and retrieves them instantly. However, the list is intended to grow very much and I want the table to display a color similar to the one on the headings when the mouse hovers the results.
The problem is this:
Despite the background-color property was properly defined in the CSS sheet, I cannot see any color displaying while hovering the mouse on any of the results.
CSS
#myUL li a.1:hover:not(.header) {background-color: #FCF3CF;}
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('/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 */
padding: 8px;
text-decoration: none;
font-size: 18px;
color: black;
background-color:#f6f6f6;
display: block;
}
#myUL li a.1:hover:not(.header) {
background-color: #FCF3CF;
}
#myUL li a.2:hover:not(.header) {
background-color: #D5F5E3;
}
#myUL li a.3:hover:not(.header) {
background-color: #D6EAF8;
}
#myTable1 {
background-color: #F9E79F;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable th.com {
background-color: #F9E79F;
}
#myTable2 {
background-color: #76D7C4;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable th.toj {
background-color: #76D7C4;
}
#myTable3 {
background-color: #85C1E9;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable3 th.doc {
background-color: #85C1E9;
}
p.invisible {visibility:hidden;
display:inline;
font-size:0.5px;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Matriz de Búsqueda Global</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ingresa palabra a buscar" title="Teclea para localizar">
<ul id="myUL">
<table id="myTable1">
<tr><th class="com">Cuenta NT</th></tr>
</table>
<li class="1"><a href="#">Cuenta NT
<p class="invisible">
Cuenta NT
</p></a></li>
<table id="myTable2">
<tr><th class="toj">Training on the Job</th></tr>
</table>
<li class="2"><a href="#">Training on the Job
<p class="invisible">
Training on the Job
</p></a></li>
<table id="myTable3">
<tr><th class="doc">Manual de procedimientos</th></tr>
</table>
<li class="3"><a href="#">Manual de procedimientos
<p class="invisible">
Manual de procedimientos
</p></a></li>
</ul>
</body>
</html>

First of all, class names must not begin with a numerical character, so i renamed your classes to .x1, .x2and .x3. Second, use this selector #myUL li.x1 a:hover on the first of your hover rules, and similar ones for the others as shown below.
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('/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 */
padding: 8px;
text-decoration: none;
font-size: 18px;
color: black;
background-color:#f6f6f6;
display: block;
}
#myUL li.x1 a:hover {
background-color: #FCF3CF;
}
#myUL li.x2 a:hover {
background-color: #D5F5E3;
}
#myUL li.x3 a:hover {
background-color: #D6EAF8;
}
#myTable1 {
background-color: #F9E79F;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable th.com {
background-color: #F9E79F;
}
#myTable2 {
background-color: #76D7C4;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable th.toj {
background-color: #76D7C4;
}
#myTable3 {
background-color: #85C1E9;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable3 th.doc {
background-color: #85C1E9;
}
p.invisible {visibility:hidden;
display:inline;
font-size:0.5px;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Matriz de Búsqueda Global</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ingresa palabra a buscar" title="Teclea para localizar">
<ul id="myUL">
<table id="myTable1">
<tr><th class="com">Cuenta NT</th></tr>
</table>
<li class="x1"><a href="#">Cuenta NT
<p class="invisible">
Cuenta NT
</p></a></li>
<table id="myTable2">
<tr><th class="toj">Training on the Job</th></tr>
</table>
<li class="x2"><a href="#">Training on the Job
<p class="invisible">
Training on the Job
</p></a></li>
<table id="myTable3">
<tr><th class="doc">Manual de procedimientos</th></tr>
</table>
<li class="x3"><a href="#">Manual de procedimientos
<p class="invisible">
Manual de procedimientos
</p></a></li>
</ul>
</body>
</html>

Do not use numbers as a name for html classes, it messes with the meaning of "classes" and your CSS too.
I changed 1,2,3 to child1, child2, child3
And i changed the their css, !important is set to assure the style applies (So it does not get overwritten).
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('/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 */
padding: 8px;
text-decoration: none;
font-size: 18px;
color: black;
background-color:#f6f6f6;
display: block;
}
#myUL li.child1 > a:hover:not(.header) {
background-color: #FCF3CF !important;
}
#myUL li.child2 > a:hover:not(.header) {
background-color: #D5F5E3 !important;
}
#myUL li.child3 > a:hover:not(.header) {
background-color: #D6EAF8 !important;
}
#myTable1 {
background-color: #F9E79F;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable th.com {
background-color: #F9E79F;
}
#myTable2 {
background-color: #76D7C4;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable th.toj {
background-color: #76D7C4;
}
#myTable3 {
background-color: #85C1E9;
border: 1px solid #ddd;
width:100%;
height:50px;
padding-left:10px;
text-align:left;
text-transform:uppercase;
}
#myTable3 th.doc {
background-color: #85C1E9;
}
p.invisible {visibility:hidden;
display:inline;
font-size:0.5px;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Matriz de Búsqueda Global</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ingresa palabra a buscar" title="Teclea para localizar">
<ul id="myUL">
<table id="myTable1">
<tr><th class="com">Cuenta NT</th></tr>
</table>
<li class="child1"><a href="#">Cuenta NT
<p class="invisible">
Cuenta NT
</p></a></li>
<table id="myTable2">
<tr><th class="toj">Training on the Job</th></tr>
</table>
<li class="child2"><a href="#">Training on the Job
<p class="invisible">
Training on the Job
</p></a></li>
<table id="myTable3">
<tr><th class="doc">Manual de procedimientos</th></tr>
</table>
<li class="child3"><a href="#">Manual de procedimientos
<p class="invisible">
Manual de procedimientos
</p></a></li>
</ul>
</body>
</html>

Related

Hide search elements in Javascript

In the following example code I want to hide the elements that show under the search field.
Code is from W3: https://www.w3schools.com/howto/howto_js_filter_lists.asp
Search elements should only show when users starts typing in the search field. Nothing complex just looking for solution for beginner. Thanks
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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 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">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, a, 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++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>

Just set display: none to #myUL li
#myUL li {
display: none;
}
and change in your js add li[i].style.display = "block"
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
Working Example
function myFunction() {
var input, filter, ul, li, a, 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++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
* {
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 {
display: none
}
#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;
}
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<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>
My approach would be different for making this search bar
const input = document.querySelector("input");
const listItems = document.querySelectorAll(".list-item");
input.addEventListener("input", (event) => {
const value = event.target.value;
listItems.forEach((listItem) => {
const target =
value.trim().length > 0 &&
listItem.innerText.toLowerCase().includes(value);
if (target === true) {
listItem.style.display = "block";
} else {
listItem.style.display = "none";
}
});
});
#import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
height: 100%;
display: grid;
place-items: center;
}
.container {
--space: 4px;
--border-color: #e1e1e1;
width: 100%;
display: flex;
max-width: 480px;
flex-direction: column;
row-gap: calc(var(--space) * 2);
}
.container input {
border: 0;
padding: calc(var(--space) * 4);
box-shadow: inset 0 0 0 1px var(--border-color);
transition: box-shadow 125ms ease;
}
.container input:focus {
--border-color: #2e86c1;
}
.container ul {
display: inherit;
row-gap: var(--space);
flex-direction: inherit;
}
.container ul .list-item {
display: none;
text-transform: capitalize;
padding: calc(var(--space) * 4);
box-shadow: inset 0 0 0 1px var(--border-color);
}
<div class="container">
<input type="text" placeholder="Search for names" />
<ul>
<li class="list-item">adele</li>
<li class="list-item">agnes</li>
<li class="list-item">billy</li>
<li class="list-item">bob</li>
<li class="list-item">calvin</li>
<li class="list-item">christina</li>
<li class="list-item">cindy</li>
</ul>
</div>
Now in my approach if your input is empty no list-item is visible.

Not the elegant solutions but useful to help you to understand how that scripts works, add style="display:none" to the li from the start:
<ul id="myUL">
<li style="display:none">Adele</li>
<li style="display:none">Agnes</li>
<li style="display:none">Billy</li>
<li style="display:none">Bob</li>
<li style="display:none">Calvin</li>
<li style="display:none">Christina</li>
<li style="display:none">Cindy</li>
</ul>

Sorting and Display Search Results Without Display them First

I have the Tables Sort Script which sort results.
However, i want the script to sort and display results AFTER the search.
I mean, instead of this display:
It will show only the search input (without results):
So only AFTER i enter some text in the input, THEN i will got the immidiat results:
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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 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">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, a, 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++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>

Got it:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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 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"></ul>
<script>
function myFunction() {
var items = ['Adele', 'Agnes', 'Billy', 'Bob', 'Calvin', 'Christina', 'Cindy'];
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById('myUL');
ul.innerHTML = '';
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (filter && item.toUpperCase().includes(filter.toUpperCase())) {
ul.innerHTML += `<li>${item}</li>`;
}
}
}
</script>
</body>
</html>

How to use Get-EventLog, Convert-ToHTML and add a javascript search box to filter entries?

Edit: added a screenshot for Santiago of the HTML event viewer
To describe what I am trying to do. Note: in the meantime, I use ctrl f which is still way quicker than the Windows event viewer on a slow server.
I want to use PowerShell's Get-EventLog (done)
Convert the system event log into a nicely formatted HTML File (done)
Enable the ability to search the HTML generated EventLog data with a JavaScript
search box that will essentially filter the data as you might with
the filter functions in an Excel Spreadsheet (not yet working in
Get-EventLog.ps1)
I have a test script where this works because I set the document.getElementByID, - table = document.getElementById("myTable"); - creating the html table myself and setting the ID. I'm not able to use the same function to grab the ID of the EventLog info to apply the same principle
Artefacts:
The working search function from Convert-toHTML-and-Search-Test.htm
#------------------------------------------------#
# Convert to HTML and Search #
#------------------------------------------------#
# Version 1 #
$TESTCSSbody = #"
<h1>Type in a value from the table below to search</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:auto;">Hostname</th>
<th style="width:auto;">DomainName</th>
<th style="width:auto;">ServerRole</th>
<th style="width:auto;">ServerDescription</th>
<th style="width:auto;">MaintenanceWindow</th>
<th style="width:auto;">PatchingStatus</th>
</tr>
<tr>
<td>Server1</td>
<td>Domain1</td>
<td>Role</td>
<td>Domain Controller</td>
<td>MaintenanceW1</td>
<td>Patched</td>
</tr>
<tr>
<td>Server2</td>
<td>Domain2</td>
<td>Role</td>
<td>Domain Controller</td>
<td>MaintenanceW2</td>
<td>Pending</td>
</tr>
<tr>
<td>Server3</td>
<td>Domain3</td>
<td>Role</td>
<td>Domain Controller</td>
<td>MaintenanceW3</td>
<td>Failed</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, ii;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.querySelectorAll("tbody tr:not(.header)");
for (i = 0; i < tr.length; i++) {
var tds = tr[i].getElementsByTagName("td");
var found = false;
for (ii = 0; ii < tds.length && !found; ii++) {
if (tds[ii].textContent.toUpperCase().indexOf(filter) > -1) {
found = true;
break;
}
}
tr[i].style.display = found?"":"none";
}
}
</script>
<style>
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 20%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable { width: auto; border: 1px solid #ddd; font-size: 18px;}
#myTable th, #myTable td { text-align: left; padding: 12px; }
#myTable tr { border-bottom: 1px solid #ddd; }
#myTable tr.header, #myTable tr:hover { background-color: #c4c4c4;
}
h1 { text-align: left; font-size: 20pt; font-family: Calibri; }
h5, th { text-align: left; font-size: 14pt; font-family: Calibri; }
table { width: auto; font-family: Calibri; box-shadow: 5px 5px 5px #888; border: thin ridge grey; }
th { background: black; color: white; max-width: 400px; padding: 5px 10px; }
td { font-size: 11pt; padding: 5px 20px; color: black; }
tr { background: #b8d1f3; }
tr:nth-child(even) { background: white; }
tr:nth-child(odd) { background: #f1f1f1; }
tr:hover {background-color: #ddd;}
</style>
"#
#HTML Report info
$SEARCHTESTREPORT = "C:\htmlreports\ConvertToHTML-and-Search-Test.htm"
$SEARCHTESTREPORTtitle = "TESTING SEARCH FUNCTIONALITY"
ConvertTo-Html -Body $TESTCSSbody -Title $SEARCHTESTREPORTtitle |
#Output the HTML File to $HTMLREPORT
Out-File $SEARCHTESTREPORT
start $SEARCHTESTREPORT
Get-EventLog.ps1
#----------------------------------------------------------------------------#
# This script produces the Windows Event Viewer in HTML #
#----------------------------------------------------------------------------#
#HTML Report info
$HTMLREPORT = "C:\Get-EventLog\eventlogreport.htm"
$HTMLREPORTtitle = "Event Log Report"
#Apply CSS Formatting
$CSSbody = #"
<h1>Event Viewer</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..." title="Type in a name">
<script>
function myFunction() {
var input, filter, table, tr, td, i, ii;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.querySelectorAll("tbody tr:not(.header)");
for (i = 0; i < tr.length; i++) {
var tds = tr[i].getElementsByTagName("td");
var found = false;
for (ii = 0; ii < tds.length && !found; ii++) {
if (tds[ii].textContent.toUpperCase().indexOf(filter) > -1) {
found = true;
break;
}
}
tr[i].style.display = found?"":"none";
}
}
</script>
<style>
#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 20%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable { width: auto; border: 1px solid #ddd; font-size: 18px;}
#myTable th, #myTable td { text-align: left; padding: 12px; }
#myTable tr { border-bottom: 1px solid #ddd; }
#myTable tr.header, #myTable tr:hover { background-color: #c4c4c4;
}
h1 { text-align: left; font-size: 20pt; font-family: Calibri; }
h5, th { text-align: left; font-size: 11; font-family: Calibri; }
table { width: auto; font-family: Calibri; box-shadow: 5px 5px 5px #888; border: thin ridge grey; }
th { background: #00078A; color: white; max-width: 400px; padding: 5px 10px; }
td { font-size: 11pt; padding: 5px 20px; color: black; }
tr { background: #b8d1f3; }
tr:nth-child(even) { background: white; }
tr:nth-child(odd) { background: #f1f1f1; }
tr:hover {background-color: #ddd;}
</style>
"#
#EntryTypes:
#-EntryType Error, FailureAudit, Information, SuccessAudit, Warning
#Lognames
#-Logname Application, Security, Setup, System
#$Begin = Get-Date -Date 01/01/2021 08:00:00
#$End = Get-Date -Date 04/02/2021 16:00:00
Get-EventLog -LogName System -Newest 100 |
Select -Property EventID,Source,MachineName,EntryType,Message,TimeGenerated,UserName |
ConvertTo-Html -Body $CSSbody -Title $HTMLREPORTtitle |
#Output the HTML File to $HTMLREPORT
Out-File $HTMLREPORT
start $HTMLREPORT

Why is search bar changing position of headers?

I am creating an HTML/CSS/JS project with a search bar and a header. When the search bar is activated/deactivated (clicked on), it changes the position of my headers. How can I fix this issue and keep the headers in the same position? Thanks a lot!
function myFunction() {
var input, filter, ul, li, a, 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++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1 && filter != "") {//change here
li[i].style.display = "";
li[i].style.visibility = "visible";//change here
} else {
li[i].style.display = "none";
}
}
}
body {
background-image: url('paperforrite-removebg-preview.png');
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 500px;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
border-radius: 4px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
width: 558px;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." style="font-family: 'Poppins', sans-serif;">
<ul id="myUL" style="visibility: hidden">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
<br>
<br>
<h1><center style="font-family: 'Poppins', sans-serif; font-size: 100px; color: #000000;">Some text here</center></h1>
<br>
<br>
<h2><center style="font-family: 'Poppins', sans-serif; font-size: 20px; color: #000000;">Some text here</center></h2>

Just add position: absolute; to the #myUl css tag, like shown below.
Your current ul tag is part of the flow and thus push everything down.
At first, it pushes everything down because it has visibility: hidden, which renders the ul with its height/width.
Then, when you type in the search bar, your javascript kicks in, which in turn hides the block with display: none, removing its block property and not making it render the height/width.
If you wish to keep the block behavior (push down the header), just switch the visibility: hidden to display: none in the ul html.
function myFunction() {
var input, filter, ul, li, a, 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++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1 && filter != "") {//change here
li[i].style.display = "";
li[i].style.visibility = "visible";//change here
} else {
li[i].style.display = "none";
}
}
}
body {
background-image: url('paperforrite-removebg-preview.png');
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 500px;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
border-radius: 4px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
width: 558px;
position: absolute;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." style="font-family: 'Poppins', sans-serif;">
<ul id="myUL" style="visibility: hidden">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
<br>
<br>
<h1><center style="font-family: 'Poppins', sans-serif; font-size: 100px; color: #000000;">Some text here</center></h1>
<br>
<br>
<h2><center style="font-family: 'Poppins', sans-serif; font-size: 20px; color: #000000;">Some text here</center></h2>

Show Hide <li> Elements

I am creating a simple html search box with live list filtering. The user will enter text in search box and the list will filter according to the user entered data. The problem I am facing is that my list is not showing up after I used the code to hide the "li" elements. As for the hiding list part the css is working its function very accurately but the query function is not listing up the results. Here is the Code...
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");
$(".menu-hide").show(); // <-- code to show the list
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('/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 li a:hover:not(.header) {
background-color: #eee;
}
.menu-hide {
display: none;
}
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL" class="menu-hide">
<li>John</li>
<li>Angela</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
sorry for the long code because as a student I am new to asking question prciesly.

You have lots more code there than needed, and only a single line of jQuery, which is easily eliminated.
Also, your demo doesn't actually load the jQuery library, so that would be an issue
Here's a rewrite that maintains something close to your initial approach, but simplifies the DOM selection using querySelectorAll, and drops the unnecessary library.
Click for demo...
function myFunction() {
var filter = document.getElementById("myInput").value.toUpperCase().trim();
document.querySelector(".menu-hide").style.display = filter ? "block" : "none";
var a = document.querySelectorAll("#myUL li a");
for (var i = 0; i < a.length; i++) {
if (a[i].textContent.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
* {
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 li a:hover:not(.header) {
background-color: #eee;
}
.menu-hide {
display: none;
}
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL" class="menu-hide">
<li>John</li>
<li>Angela</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
Here's one that reworks it to further shorten and simplify it. It uses a for-of loop to iterate the collection, and the conditional operator to set the .display.
Click for demo...
function myFunction() {
var filter = document.getElementById("myInput").value.toUpperCase().trim();
document.querySelector(".menu-hide").style.display = filter ? "block" : "none";
for (const a of document.querySelectorAll("#myUL li a")) {
a.style.display =
a.textContent.toUpperCase().includes(filter) ? "block" : "";
}
}
* {
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: none;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL" class="menu-hide">
<li>John</li>
<li>Angela</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>

Develop Reference

JavaScript is the programming language of the Web.

CSS not recognizing hover color set - javascript

Related

Hide search elements in Javascript

Sorting and Display Search Results Without Display them First

How to use Get-EventLog, Convert-ToHTML and add a javascript search box to filter entries?

Why is search bar changing position of headers?

Show Hide <li> Elements

Categories

Resources