htmlcssgoogle-sites
How do I use CSS/HTML Search Box for Links Section in Google Sites with Apps Script?
My workplace utilizes a Google Site, and I was able create a CSS dropdown menu to house link information as shown below:
However, I was wondering if there was also a way to give users a text box at the top they could use to search the entire container faster than having to manually click each section. Something like what W3Schools has, but specifically for this container with sub sections in it.
Any help/direction you all could provide would be greatly appreciated.
Here's the Code.GS
function doGet() {
var result=HtmlService.createTemplateFromFile('TestSidebar').evaluate();
return result;
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
Here's the Html
<!DOCTYPE html>
<!-- Notes for whoever looks at this in the future:
HTML/CSS modified in December 2017, taken from https://codepen.io/alexdevero/pen/avKpLX
Groups are in incremental numbers, along with sub-group and sub-sub-group
group-X
sub-group-X
sub-sub-group-X
sub-sub-sub-group-X
Technically, the CSS stylesheet allows for unlimited nesting. However, if more than 4 groups
are needed, then more sub-groups will need to be defined on the stylesheet
Body beautified at https://codebeautify.org/htmlviewer/
-->
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS sliding multi-level accordion</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300'>
<?!= include('Stylesheet'); ?>
</head>
<body>
<header role="banner">
<nav class="nav" role="navigation">
<ul class="nav__list">
<!-- Forms -->
<li>
<input id="group-Delivery/Tracking" type="checkbox" hidden />
<label for="group-Delivery/Tracking">
<span class="fa fa-angle-right"></span> Forms
</label>
<ul class="group-list">
<li>
<li>
<a href="https://www.google.com/forms/about/" target="_blank">Google Forms</a>
</li>
<li>
<a href="https://www.surveymonkey.com/" target="_blank">Survey Monkey</a>
</li>
</ul>
</li>
<li>
<input id="group-links" type="checkbox" hidden />
<label for="group-links">
<span class="fa fa-angle-right"></span> Links
</label>
<ul class="group-list">
<li>
<li>
<a href="https://stackoverflow.com/" target="_blank">Stack Overflow</a>
</li>
<li>
<a href="https://www.google.com/" target="_blank">Google</a>
</li>
</ul>
</li>
<!-- Final </ul> needed for Nav Pane -->
</ul>
</nav>
<!-- Commenting out; social media links not needed now, but maybe in the future
<footer><ul class="soc-media"><li><a href="https://twitter.com/alexdevero" target="_blank"><span class="fa fa-twitter"></span></a></li><li><a href="https://www.facebook.com/deveroalex" target="_blank"><span class="fa fa-facebook"></span></a></li><li><a href="https://plus.google.com/+AlexDevero" target="_blank"><span class="fa fa-google-plus"></span></a></li><li><a href="http://blog.alexdevero.com" target="_blank"><span class="fa fa-globe"></span></a></li></ul></footer>
-->
</header>
</body>
</html>
And here's the CSS (where I'm assuming any searchbox would go?)
<style>
body {
vertical-align: true;
font: 100% "Roboto", "Trebuchet MS", sans-serif;
}
a {
text-decoration: none;
}
/**
* Hidden fallback
*/
[hidden] {
display: none;
visibility: hidden;
}
/**
* Styling navigation
*/
header {
margin-right: auto;
margin-left: auto;
vertical-align: true;
/*max-width: 22.5rem;*/
-webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}
/**
* Styling top level items
*/
.nav a,
.nav label {
display: block;
padding: .25rem;
color: #fff;
font-size: 100%;
background-color: #012F60;
vertical-align: true;
-webkit-box-shadow: inset 0 -1px #1d1d1d;
box-shadow: inset 0 -1px #1d1d1d;
-webkit-transition: all .10s ease-in;
transition: all .10s ease-in;
border-radius: 0px;
}
.nav a:focus, .nav a:hover,
.nav label:focus,
.nav label:hover {
color: #012F60;
background: #DEB01A;
}
.nav label {
cursor: pointer;
}
/**
* Styling first level lists items
*/
.group-list a,
.group-list label {
padding-left: .5rem;
vertical-align: true;
font-size: 85%;
color: #fff;
background: #8E8E8F;
-webkit-box-shadow: inset 0 -1px #373737;
box-shadow: inset 0 -1px #373737;
}
.group-list a:focus, .group-list a:hover,
.group-list label:focus,
.group-list label:hover {
background: #DEB01A;
}
/**
* Styling second level list items
*/
.sub-group-list a,
.sub-group-list label {
padding-left: 1rem;
background: #012F60;
color: #fff;
-webkit-box-shadow: inset 0 -1px #474747;
box-shadow: inset 0 -1px #474747;
}
.sub-group-list a:focus, .sub-group-list a:hover,
.sub-group-list label:focus,
.sub-group-list label:hover {
background: #DEB01A;
}
/**
* Styling third level list items
*/
.sub-sub-group-list a,
.sub-sub-group-list label {
padding-left: 1.5rem;
background: #8E8E8F;
color: #fff;
-webkit-box-shadow: inset 0 -1px #575757;
box-shadow: inset 0 -1px #575757;
}
.sub-sub-group-list a:focus, .sub-sub-group-list a:hover,
.sub-sub-group-list label:focus,
.sub-sub-group-list label:hover {
background: #DEB01A;
}
/**
* Styling fourth level list items
*/
.sub-sub-sub-group-list a,
.sub-sub-sub-group-list label {
padding-left: 2rem;
background: #012F60;
color: #fff;
-webkit-box-shadow: inset 0 -1px #474747;
box-shadow: inset 0 -1px #474747;
}
.sub-sub-sub-group-list a:focus, .sub-sub-group-list a:hover,
.sub-sub-sub-group-list label:focus,
.sub-sub-sub-group-list label:hover {
background: #DEB01A;
}
/**
* Hide nested lists
*/
.group-list,
.sub-group-list,
.sub-sub-group-list,
.sub-sub-sub-group-list{
height: 100%;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .25s ease-in-out;
transition: max-height .25s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
transform: translateZ(0);
}
.nav__list input[type=checkbox]:checked + label + ul {
/* reset the height when checkbox is checked */
max-height: 1000px;
}
/**
* Rotating chevron icon
*/
label > span {
float: +.1rem + left + .1rem;
vertical-align: true;
-webkit-transition: -webkit-transform .25s ease;
transition: -webkit-transform .25s ease;
transition: transform .25s ease;
transition: transform .25s ease, -webkit-transform .25s ease;
}
.nav__list input[type=checkbox]:checked + label > span {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/**
* Styling footer
*/
footer {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: #050505;
}
.soc-media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.soc-media li:nth-child(n+2) {
margin-left: 1rem;
}
.soc-media a {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.65);
-webkit-transition: color .25s ease-in;
transition: color .25s ease-in;
}
.soc-media a:focus, .soc-media a:hover {
color: rgba(255, 255, 255, 0.2);
}
</style>
Thanks for looking!
Solution
If you use the solution shown on W3Schools and simply change the list iteration to incorporate one extra level for your categories then you should see some success.
So all you need to do is add an input box and add a filter function to onkeyup.
<input type="text" onkeyup="filterfunction()"/>
And for example you could take their filter function
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";
}
}
}
and transform it into something like this for now
function filterFunction() {
var input, filter, ul, li, cat, rows, i, j;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
cat = div.children;
for (i = 0; i < cat.length; i++) {
var displayCat = false;
rows = cat[i].getElementsByTagName("*");
for (j = 0; j < rows.length; j++){
if (rows[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
rows[i].style.display = "";
displayCat = true;
} else {
rows[i].style.display = "none";
}
}
if(displayCat){
cat[i].style.display = "";
//add some code to expand your list automatically
}else{
cat[i].style.display = "none";
}
}
}
and if you decide to incorporate further categories you can streamline the whole process by changing it to tree iteration.
- Bootstrap dropdown menu navbar
- My Visual- Code-Editor is not showing the included CSS in the Live preview
- DOM Element.Closest Child
- How do I use a variable from another component containing HTML and AngularMaterial Tooltips?
- iOS Toggle Switch with CSS
- Get selected option text with JavaScript
- Fix extra space on HTML page (due to JavaScript collapsing elements)
- Create a (clickable) heart shape using CSS only
- How can I open a new tab or window when a link is clicked?
- How to detect browser country in client site?
- How to make the HTML link activated by clicking on the <li>?
- How do I separate out these sections? (scraping, but should be simple loops/foreach)
- File Upload form using php
- How to externalize json-ld and include in html doc
- How to Make Bullet Points Appear When Using display: flex?
- Can one input field be used by multiple forms without JavaScript?
- Extracting text section from (Edgar 10-K filings) HTML
- How to modify the fill color of an SVG image when being served as background image?
- How do I get all h1,h2,h3 etc elements in javascript?
- Adding an input tag with js and dom appendChild seems to have no margin
- How do I make a field required in HTML?
- Fixing Transparent Line Between Div with Clip-Path and Parent Div
- How can set dynamically id to tag and use it in the same tag
- What html5 form attribute should be used for a zipcode?
- add the required property when browse form is clicked
- How to get these two divs side-by-side?
- Expand/Resize a div with JavaScript Touch Events
- Stop LastPass filling out a form
- Javascript: navigate table inputs with arrow keys
- Google calendars requires authentication to showcase my own calendar