Mar & Apr 2020 Edition
Have a Unique Topic to Share or Just Want to Comment on How We're Doing
Since many of you have said that you haven't had a chance to apply things you've learned in the previous Blogger editions, we're going to keep this month's edition short. Go back and review earlier editions or spend time adding these new features to your skill set. There are only 3 topics with a 4th embedded in the Just for Fun, but they are well worth reading.
As a Reminder - Stick to the Home Page Standards outlined in the previous edition and found in your Guidebook. Banners on your home page are restricted and can only be added above the main slideshow, with permission. This area is reserved for district and community event postings and alert information.
March Topics & Tips
- Learning Forms Manager
- Pro-Tip: How to Use Anchors to link to Tabs or Accordions
- JUST FOR FUN: HTML 2 for 1: Flip Boxes & Photo Fun
- How to Change Snowflake HTML Animation to Other Icons
Learning Forms Manager
Forms can be created and used on your web pages to collect and report information. Let's first learn the four Element Libraries, including Standard Elements, Grouped Elements, Layout Elements and Saved Elements. Then, we'll dive into how to apply these elements, along with other features to create a dynamic form that is usable on your site. Let's get started.
FORMS MANAGER IS LOCATED UNDER THE 4-SQUARE MANAGER
Forms with un-reviewed submissions are bold and those marked with
have unpublished changes.
FORMS MANAGER DASHBOARD
ELEMENT LIBRARIES
STANDARD ELEMENTS
The Standards Elements include fields that allow the user to enter text or make selections.
Text Field:
Email Field:
Date Picker:
Hidden Field:
Radio Buttons:
A radio button provides the user with a choice where only one option must be chosen. Form authors are not limited to a simple yes/no choice and can present the users with as many options as they wish; however, only one option may be selected. (The name "radio button" comes from an old-style car stereo with preset buttons that can be set to a particular station; pushing one button in makes all other buttons pop back out.)
Checkbox:
A checkbox is used when a user is asked to make a choice that can have more than one response. When multiple checkboxes are present, selecting one does not preclude selecting any other.
Select List:
A select list functions similarly to a set of radio buttons; the user is presented with a choice, but only one option can be selected in order to proceed. The options appear in a dropdown list format.
Text Area:
The text area is similar to the text field, except that it has room for multiple lines to be input by the user. Use a text area instead of a text field when you are asking the user to input more than 255 characters.
Attach File:
Use this element when you require form users to upload a data file. See the list to the right for accepted formats and upload maximum size.
Attached File (additional information)
The "Attach File" element, under the Standard Elements library, can be used to allow a submitter to upload their own files to their form submission. This can be helpful for a number of situations, such as pictures on a student form, a resume on a job application form, or signed permission slips for a field trip.
To use this feature, simply add the Attach File element by dragging it from the Element Library to your form.
Accepted File Types
By default, the element is set to accept all file types that are allowed on your site. To limit the types of files that users can upload, uncheck the "Accept all approved file types" checkbox, and check off the file types you'd like to accept.
-
Documents: Word, Excel, pdf, rtf, note, notebook, one, txt, xml, numbers, pages
-
Images: jpg, jpeg, png, gif, eps, svg
-
Zip Files: zip
-
Presentation: PowerPoint, flipchart, key, keynote
-
Video: avi, mov, mpg, swf, mpeg, qt, mp4, wmv, m4v
-
Audio: mp3, mpg, mid, midi, mp4, wav
-
Adobe: indd, psd, swf, as
-
Web: css, js, htm, html, jar
-
Other: ds, cmbl, isf, omp, ico, epub
Files uploaded to an Attach File element have a maximum size of 10MB.
GROUPED ELEMENTS
Grouped elements are simply multiple standard elements that are arranged into logical collections in order to capture common information, such as a user's full name or mailing address. When placed on a form, the individual fields of a grouped element cannot be broken up or rearranged. Available Grouped Element types are:
Address Block:
This element collects street address, city, state, region, ZIP code, and country information. In the settings, the Prefill Options dropdown menu can be configured to accept information from Constituent Manager, if the form user is logged in. Addresses that can be pulled from Constituent Manager are: Home, Personal, School, Summer, Winter, and Work.
Name Block:
The name block collects Prefix, First Name, Middle Name, Last Name, and Suffix data. These fields can also be prefilled using data from Constituent Manager.
Phone & Extension Block:
The phone block collects a phone number and extension. Prefill information can be pulled from Constituent Manager on the settings screen.
LAYOUT ELEMENTS
Layout elements do not collect any data, but create organizational categories and logical divisions that help make a longer form easier for users to follow. They exist solely to assist the form author in tailoring the appearance and flow of the form on the page. Available form elements are:
Header:
A short block of headline-formatted text. The size of the headline can be changed in the Settings menu. H1 is the largest font size, and H6 is the smallest.
Text block:
A longer block of text formatted at standard size. Used to convey more detailed information to the reader in the body of the form page.
Horizontal Rule:
A horizontal line spanning the width of the form. Use the settings menu to adjust the thickness of the line in pixels, the width of the line (expressed as a percentage of the available width of the form), the horizontal alignment, and the shading effect.
Page Break:
Breaks the form up into pages and inserts buttons allowing the user to page back and forth. This is very useful for longer forms.
SAVED ELEMENTS
Any element can be customized and then saved for reuse, either in the same form or in another form. Those elements appear in the Saved Elements library. Form elements and lists, like those used for radio buttons, check boxes and selection lists, can be saved. You can also group elements and save them, as well. You'll make use of the Selection Tools: Copy, Save, Delete to manage this library.
Copying Elements
After an element has been created in the Build & Edit tab, it can be copied to the Element Clipboard, a temporary holding area where a single element or group of elements can be placed in order to create additional copies of them on the form.
To save an element to the clipboard, click on the element to highlight it, and then click the blue "Copy" button found under "Selection Controls."
Multiple elements can be copied at once. Click the form background and drag to create a selection box around a group of items, or click multiple elements while holding Shift. Note, however, that they will act like a single element when pasted back into the form - the pasted elements will take up the same number of rows as the original elements. If another element is copied, it will replace the element(s) on the clipboard.
Once the form is saved and closed, the contents of the clipboard will be lost. To save an element for longer-term use or use on another form, use the "Save Element" feature described below.
Saving Elements
The "Saved Elements" pane in the Element Library stores customized elements created by users. Saved elements can be used anywhere, not just on the form where they were created.
To save an element you have customized, click on the element to highlight it. While it's highlighted, click the green "Save" button under "Selection Controls."
The "Save Element(s)" screen will appear. Give the element a name and add a comment if you wish. If the element is to be used by other forms editors, select the checkbox marked "Add to the shared saved element library." If this box is not selected, then the only user who created the element will be able to see and use it.
Saved elements can be edited from the Dashboard without opening a specific form. Click the "Saved Elements List" button on the Dashboard tab to open the Manage Saved Elements screen. Click a saved element's name to open it for editing.
Users can only modify the elements that they saved; other users' elements will be locked. Another user's element may be cloned, however, and the clone can be edited and saved as a new saved element. Click the blue "Clone Saved Element" button to create a copy of an existing saved element.
Changes made to a saved element will not be applied retroactively to any copies that were previously used in other forms. Only future instances of the saved element will reflect the edits.
Sharing Saved Elements
There are 2 options to saving a list element. Choose My Elements if you want to save the element for your use only or Shared Elements to share what you have made with all other Forms Manager users. If you use Shared Elements, they must be named to truly describe what the item is.
Multiple items can be grouped by holding down your shift button and clicking on the elements. To save them, scroll to the Saved Elements library list, then select your items and click the green Save button. The selected items will display in the window with fields for you to add a Name, comments and a click box to add as a Shared element. Once complete, click Save Element.
Once your item has been added to the Saved Elements list, click on the item to view before adding it to your form.
Pro-Tip: How to Use Anchors to link to Tabs or Accordions
Linking to a specific panel using TABS OR ACCORDIONS
With so much content on one page, you may find you want to link to a specific panel rather than the page itself. Each panel has a built-in anchor link that you can use to automatically expand a particular panel on the page.
To find this link, visit the live version of the page with the Tabs or Accordion element. Right-click on the panel title and select “Copy Link Address” (Chrome), “Copy Link” (Safari), “Copy Link Location” (Firefox), or its equivalent in your browser of choice. On the Add Link menu, paste the link into the URL field.
Note: This link will not work for Tabs or Accordion elements that are inside of other Tabs or Accordion elements. Only panels that are initially displayed on the page when it is loaded will respond to the anchor link.
JUST FOR FUN: HTML 2 for 1: Flip Boxes & Photo Fun
Card Flip with Text
Hover over the image below:
Embed Code for above flip box
<div><meta content="width=device-width, initial-scale=1" name="viewport">
<style type="text/css">body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
</style>
</div>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<figure class="fsImage"><picture><img alt="PACKING BOXES" data-image-sizes="[{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto,t_image_size_1/v1578689489/troyk12mius/ptmxtpkrbuqya8snd1sx/Packingup.jpg%22,%22width%22:256},{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto,t_image_size_2/v1578689489/troyk12mius/ptmxtpkrbuqya8snd1sx/Packingup.jpg%22,%22width%22:512},{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto,t_image_size_3/v1578689489/troyk12mius/ptmxtpkrbuqya8snd1sx/Packingup.jpg%22,%22width%22:800},{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto,t_image_size_4/v1578689489/troyk12mius/ptmxtpkrbuqya8snd1sx/Packingup.jpg%22,%22width%22:1200},{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto,t_image_size_5/v1578689489/troyk12mius/ptmxtpkrbuqya8snd1sx/Packingup.jpg%22,%22width%22:1600},{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto,t_image_size_6/v1578689489/troyk12mius/ptmxtpkrbuqya8snd1sx/Packingup.jpg%22,%22width%22:2200}]" data-resource-description="" data-resource-filename="Packingup.jpg" data-resource-uuid="9e7a9ea4-3a73-463b-ae55-fcd29de627d3" id="" src="" style="width:300px;height:300px;" /></picture></figure>
</div>
<div class="flip-card-back">
<h1>SSAB</h1>
<p>Students & Volunteers</p>
<p>Thank you to everyone!</p>
<a href="https://athens.troy.k12.mi.us/">Click Here</a>
</div>
</div>
</div>
Extra Samples
Custom Flip Box w/code
Just for Fun
Quick way to display your photos, tell a story and add some fun to your page!
Learn how to create this imageJust for Fun
Quick way to display your photos, tell a story and add some fun to your page!
Learn how to create this imageTo change the photo in the flip box. Remove rotateY(180deg) from the code in the highlighted area, change the photo by clicking on the photo, then add the rotate back in the code.
If you want to rotate your image Vertically - change the rotation to rotateX(180deg). Just remember - you can't use both the Vertical and Horizontal flips on the same page. Since we don't have access to the full script that runs this page, adding multiple features can cause conflicts/error, so decide how you want your images to look and stick with 1 rotation and back panel color per page.
Embed code for Flip Box
<div><meta content="width=device-width, initial-scale=1" name="viewport">
<style type="text/css">body {
font-family: Arial, Helvetica, sans-serif; margin: 0px; padding: 10px;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #ff6d05;
color: white;
transform: rotateY(180deg);
}
</style>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<figure class="fsImage"><picture><img alt="PhotoFunia-123" data-image-sizes="[{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto,t_image_size_1/v1581087952/troyk12mius/wlhspcllsxbmnu3qfryu/PhotoFunia-123.jpg%22,%22width%22:256},{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto,t_image_size_2/v1581087952/troyk12mius/wlhspcllsxbmnu3qfryu/PhotoFunia-123.jpg%22,%22width%22:512},{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto,t_image_size_3/v1581087952/troyk12mius/wlhspcllsxbmnu3qfryu/PhotoFunia-123.jpg%22,%22width%22:800},{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto,t_image_size_4/v1581087952/troyk12mius/wlhspcllsxbmnu3qfryu/PhotoFunia-123.jpg%22,%22width%22:1200},{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto/v1581087952/troyk12mius/wlhspcllsxbmnu3qfryu/PhotoFunia-123.jpg%22,%22width%22:1400}]" data-resource-description="" data-resource-filename="PhotoFunia-123.jpg" data-resource-uuid="85e47628-9b70-46b8-a267-ebfd1986c620" id="" src="" style="width:300px;height:300px;" /></picture></figure>
</div>
<div class="flip-card-back">
<h1>Just for Fun</h1>
<p> Quick way to display your photos, tell a story and add some fun to your page! </p>
<a href="https://photofunia.com/">Learn how to create this image</a></div>
</div>
</div>
Using up to 3 in a row
Just for Fun
Quick way to display your photos, tell a story and add some fun to your page!
Learn how to create this imageJust for Fun
Quick way to display your photos, tell a story and add some fun to your page!
Learn how to create this imageJust for Fun
Quick way to display your photos, tell a story and add some fun to your page!
Learn how to create this imageJust for Fun
Quick way to display your photos, tell a story and add some fun to your page!
Learn how to create this imageJust for Fun
Quick way to display your photos, tell a story and add some fun to your page!
Learn how to create this imageJust for Fun
Quick way to display your photos, tell a story and add some fun to your page!
Learn how to create this imageHow to Change Snowflake HTML Animation to Other Icons
You can change the snowflake in the animation to any Windows 10 emoji. Just highlight the icon and replace it with one from the emoji keyboard. Click Windows + . at the same time. Select your icon and replace. You can also adjust the fall of the icons by changing the seconds in the keyframes section.
No need to change the word "snowflake" in the code. That is just a descriptor.
Change the icons and copy the code below into the Embed field.
Code for Animation
<div>
<style type="text/css">/* customizable snowflake styling */
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
}
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>
</div>
<div aria-hidden="true" class="snowflakes">
<div class="snowflake">π</div>
<div class="snowflake">π</div>
<div class="snowflake">π</div>
<div class="snowflake">π</div>
<div class="snowflake">π</div>
<div class="snowflake">π</div>
<div class="snowflake">π</div>
<div class="snowflake">π</div>
<div class="snowflake">π</div>
<div class="snowflake">π</div>
<div class="snowflake">π</div>
<div class="snowflake">π</div>
</div>
It's been a challenging few weeks for sure, and I'm sure you're pros at social distancing and getting creative with pantry staples. To spice things up (this doesn't require paprika or cinnamon from the pantry), I've added some Just for Fun features. No heavy learning, just fun, fun, fun! Enjoy and stay safe!
April Topics & Tips
- Play Webmaster Word Search - Just for Fun!
- Organization Anyone?
- Just for Fun - Cartoonize Yourself
- Creating Fundraising Coupons - HTML
- Creating Drop Down Menus
Play Webmaster Word Search - Just for Fun!
Interjecting a bit of distraction from the norm of staying inside and bingeing on Netflix. Drag your mouse or finger over over the letters to find the words. This is an interactive Word Search. Each puzzle expires in 30 days from publish date. Look for new puzzles each week while we are working from home. Enjoy!
Organization Anyone?
Our 1 Year Launch Anniversary is quickly approaching and along with that is the end of a school year. So, in next month's Blogger we'll discuss Best Practices for re-organizing, purging and archiving Resources. To get a head start, start reviewing and reorganizing now. Share your "Best Practices" for organizing - Contact Us today!
Just for Fun - Cartoonize Yourself
Have fun this month and spice up the photos on your page. Cartoonize students, your principal or you can even cartoonize type or clipart. Let your imagination run wild.
Note: the free version adds a logo in the right lower corner (see Armida's picture to the right). I've had fun changing you all to cartoons - see below. I've cropped out the logo, as well.
Here's an example of how you can use it:
https://primacartoonizer.com/Prima-Cartoonizer/
Creating Fundraising Coupons - HTML
Chipotle Fundraiser
33% OF THE PROCEEDS GO TO TSD
We do more than just roll burritos. Each of our restaurants is committed to supporting local groups like neighboring schools, youth sports teams and non-profit organizations. One way we do this is by hosting fundraisers at our restaurants. BRING THIS COUPON OR SHOW IT WHEN YOU CHECK OUT AT CHIPOTLE AT (add restaurant address here).
Use Promo Code:
BOH232 (you can also add a QR code or barcode here)
Expires: Jan 03, 2021
Athens Charity Week
20% OFF YOUR PURCHASE
Lorem ipsum dolor sit amet, et nam pertinax gloriatur. Sea te minim soleat senserit, ex quo luptatum tacimates voluptatum, salutandi delicatissimi eam ea. In sed nullam laboramus appellantur, mei ei omnis dolorem mnesarchum.
Use Promo Code: BOH232
Expires: Jan 03, 2021
05/20/2021 - FUNDRAISER
25% OFF YOUR PURCHASE
Lorem ipsum dolor sit amet, et nam pertinax gloriatur. Sea te minim soleat senserit, ex quo luptatum tacimates voluptatum, salutandi delicatissimi eam ea. In sed nullam laboramus appellantur, mei ei omnis dolorem mnesarchum.
Use Promo Code: BOH232
Expires: MAY 20, 2021
<div><meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">body {
font-family: Arial;
}
.coupon {
border: 5px dotted #bbb;
width: 80%;
border-radius: 15px;
margin: 0 auto;
max-width: 600px;
}
.container {
padding: 2px 16px;
background-color: #f1f1f1;
}
.promo {
background: #ccc;
padding: 3px;
}
.expire {
color: red;
}
</style>
</div>
<div class="coupon">
<div class="container">
<h3>Chipotle Fundraiser</h3>
</div>
<div style="text-align:center">
<figure class="fsImage" style="display:inline-block"><picture><img alt="" data-image-sizes="[{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto,t_image_size_1/v1584966792/troyk12mius/ydbuhatz74iahhelzmqj/burritofundraiserimages-1.png%22,%22width%22:256},{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto,t_image_size_2/v1584966792/troyk12mius/ydbuhatz74iahhelzmqj/burritofundraiserimages-1.png%22,%22width%22:512},{%22url%22:%22https://resources.finalsite.net/images/f_auto,q_auto/v1584966792/troyk12mius/ydbuhatz74iahhelzmqj/burritofundraiserimages-1.png%22,%22width%22:546}]" data-resource-description="" data-resource-filename="burritofundraiserimages-1.png" data-resource-uuid="c3772d81-0574-451c-8cf5-f5b775b9273c" id="" role="presentation" src="" style="width:100%;" /></picture></figure>
</div>
<div class="container" style="background-color:white">
<h2>33% OF THE PROCEEDS GO TO TSD</h2>
<p>We do more than just roll burritos. Each of our restaurants is committed to supporting local groups like neighboring schools, youth sports teams and non-profit organizations. One way we do this is by hosting fundraisers at our restaurants. BRING THIS COUPON OR SHOW IT WHEN YOU CHECK OUT AT CHIPOTLE AT (add restaurant address here).</p>
</div>
<div class="container">
<p>Use Promo Code:</p>
<p><span class="promo">BOH232 (you can also add a QR code or barcode here)</span></p>
<p class="expire">Expires: Jan 03, 2021</p>
</div>
</div>
Creating Drop Down Menus
Add lists, forms, web or page links to the menus.
<div><meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</div>
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown"><button class="dropbtn" onclick="myFunction()">Dropdown</button>
<div class="dropdown-content" id="myDropdown"><input id="myInput" onkeyup="filterFunction()" placeholder="Search.." type="text" /> <a href="#about">About</a> <a href="#base">Base</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a> <a href="#custom">Custom</a> <a href="#support">Support</a> <a href="#tools">Tools</a></div>
</div>
<script>
/* 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";
}
}
}</script>