Created
December 7, 2013 21:31
-
-
Save mundry/7849048 to your computer and use it in GitHub Desktop.
Filtering page content with an input field and CSS3.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| var searchStyle = document.getElementById('search-style'); | |
| var searchfield = document.getElementById('filter-field') | |
| var injectCssRule = function(query) { | |
| return query === "" ? "" : ('h1:not([data-filter-keywords*="' + query.replace(/\\/g, "") + '"]) { display: none; }'); | |
| } | |
| searchfield.addEventListener("keyup", function() { | |
| searchStyle.innerHTML = injectCssRule(searchfield.value.trim().toLowerCase()); | |
| }); | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>CSS Filtering</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Place favicon.ico and apple-touch-icon(s) in the root directory --> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| h1 { | |
| font-size: 1.4em; | |
| } | |
| </style> | |
| <style id="search-style"></style> | |
| </head> | |
| <!--[if lt IE 7]> <body class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]> <body class="lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]> <body class="lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <body> <!--<![endif]--> | |
| <div id="filterarea"> | |
| <input type="text" id="filter-field" /> | |
| </div> | |
| <h1 data-filter-keywords="complex but not dynamic using a static site to crowdsource playgrounds">Complex But Not Dynamic: Using A Static Site To Crowdsource Playgrounds</h1> | |
| <h1 data-filter-keywords="how to setup your mac to develop news applications like we do">How to Setup Your Mac to Develop News Applications Like We Do</h1> | |
| <h1 data-filter-keywords="user-generated graphics in the browser with svg">User-generated graphics in the browser with SVG</h1> | |
| <h1 data-filter-keywords="be our summer intern">Be our summer intern!</h1> | |
| <h1 data-filter-keywords="how to build a news app that never goes down and costs you practically nothing">How to build a news app that never goes down and costs you practically nothing</h1> | |
| <h1 data-filter-keywords="we re looking for teammates">We're looking for teammates!</h1> | |
| <h1 data-filter-keywords="our first news apps tracking weather and elections">Our first news apps: Tracking weather and elections</h1> | |
| <h1 data-filter-keywords="election 2012 electoral combinations">Election 2012: Electoral combinations</h1> | |
| <h1 data-filter-keywords="hello world nerd blogging with jekyll">Hello world: Nerd blogging with Jekyll</h1> | |
| <script src="css-filter.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment