Filtered Search RWD Pattern

Developer
Chris Coyier
Size
3,722 Kb
Views
48,576
  1. Filtered Search RWD Pattern Previews
  2. Filtered Search RWD Pattern HTML Codes
  3. Filtered Search RWD Pattern CSS Codes
  4. Filtered Search RWD Pattern JS Codes

How do I make an filtered search rwd pattern?

What is a filtered search rwd pattern? How do you make a filtered search rwd pattern? This script and codes were developed by Chris Coyier on 11 July 2022, Monday.

Filtered Search RWD Pattern Previews
IQ Test

Filtered Search RWD Pattern - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Filtered Search RWD Pattern</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
body { padding: 20px; width: 70%; margin: 0 auto;
}
.screen-reader-text { position: absolute; top: -9999px; left: -9999px;
}
.search-form { width: 35%; float: left; padding-right: 20px;
}
.search-term { width: 100%; margin: 0 0 5px 0;
}
.search-terms { display: table; margin: 0 0 10px 0;
}
.search-filters { overflow: hidden; margin: 0 0 10px 0; background: #eee; padding: 10px;
}
.search-filters-title { font-weight: normal; font-size: 1em; margin: 0 0 10px 0;
}
.filter-group { margin: 0 0 10px 0;
}
.cloned-filters { display: none;
}
.search-results { width: 65%; float: right; padding-bottom: 2500px; /* just scrolling space */
}
.result { float: left; width: 24%; height: 100px; margin-right: 1.33%; margin-bottom: 1.33%; background: #eee;
}
.result:nth-child(4n) { margin-right: 0;
}
.result img { width: 100%; height: auto; display: block;
}
@media (max-width: 1000px) { body { width: 90%; }
}
@media (max-width: 600px) { body, .search-form, .search-results { width: 100%; } .search-form { padding: 0; } .search-terms { display: table; width: 100%; margin: 0; } .search-terms > div { display: table-row; } .search-terms > div > span { display: table-cell; } .search-term-wrap { padding-right: 10px; } .search-button { width: 100%; } .search-filters-title { color: blue; text-decoration: underline; cursor: pointer; margin: 0; } .search-filters.pinned { position: fixed; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.2); } .filter-group { display: none; } .filter-explanation { display: none; } .filters-open .filter-group, .filters-open .filter-explanation { display: block; } .filters-open .search-filters-title { margin: 0 0 10px 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <form role="search" class="search-form" id="search-form" action="#" method="post"> <section class="search-terms"> <label for="search-term" class="search-term-label screen-reader-text">Search Terms</label> <div> <span class="search-term-wrap"> <input type="search" id="search-term" class="search-term"> </span> <span class="search-term-button-wrap"> <input type="submit" value="Search" class="search-button"> </span> </div> </section> <section class="search-filters" id="search-filters"> <h3 class="search-filters-title" id="search-filters-title">Search Filters</h3> <div class="size-filters filter-group"> <div> <input type="checkbox" id="filter-size-small"> <label for="filter-size-small">Small</label> </div> <div> <input type="checkbox" id="filter-size-medium" checked> <label for="filter-size-medium">Medium</label> </div> <div> <input type="checkbox" id="filter-size-large"> <label for="filter-size-large">Large</label> </div> </div> <div class="content-filters filter-group"> <div> <input type="radio" id="filter-content-cats" name="filter-content"> <label for="filter-content-cats">Cats</label> </div> <div> <input type="radio" id="filter-content-dogs" name="filter-content"> <label for="filter-content-dogs">Dogs</label> </div> <div> <input type="radio" id="filter-content-Birds" name="filter-content"> <label for="filter-content-birds">Birds</label> </div> </div> <small class="filter-explanation">Choosing filters automatically refines and refreshes search.</small> </section>
</form>
<section class="search-results"> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div> <div class="result"></div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Filtered Search RWD Pattern - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { padding: 20px; width: 70%; margin: 0 auto;
}
.screen-reader-text { position: absolute; top: -9999px; left: -9999px;
}
.search-form { width: 35%; float: left; padding-right: 20px;
}
.search-term { width: 100%; margin: 0 0 5px 0;
}
.search-terms { display: table; margin: 0 0 10px 0;
}
.search-filters { overflow: hidden; margin: 0 0 10px 0; background: #eee; padding: 10px;
}
.search-filters-title { font-weight: normal; font-size: 1em; margin: 0 0 10px 0;
}
.filter-group { margin: 0 0 10px 0;
}
.cloned-filters { display: none;
}
.search-results { width: 65%; float: right; padding-bottom: 2500px; /* just scrolling space */
}
.result { float: left; width: 24%; height: 100px; margin-right: 1.33%; margin-bottom: 1.33%; background: #eee;
}
.result:nth-child(4n) { margin-right: 0;
}
.result img { width: 100%; height: auto; display: block;
}
@media (max-width: 1000px) { body { width: 90%; }
}
@media (max-width: 600px) { body, .search-form, .search-results { width: 100%; } .search-form { padding: 0; } .search-terms { display: table; width: 100%; margin: 0; } .search-terms > div { display: table-row; } .search-terms > div > span { display: table-cell; } .search-term-wrap { padding-right: 10px; } .search-button { width: 100%; } .search-filters-title { color: blue; text-decoration: underline; cursor: pointer; margin: 0; } .search-filters.pinned { position: fixed; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.2); } .filter-group { display: none; } .filter-explanation { display: none; } .filters-open .filter-group, .filters-open .filter-explanation { display: block; } .filters-open .search-filters-title { margin: 0 0 10px 0; }
}

Filtered Search RWD Pattern - Script Codes JS Codes

var Search = { searchForm: $("#search-form"), searchTerms: $("#search-terms"), searchFilters: $("#search-filters"), searchFiltersTitle: $("#search-filters-title"), offset: $("#search-filters-title").offset(), win: $(window), init: function() { Search.bindUIEvents(); }, bindUIEvents: function() { Search.searchFiltersTitle .on( "click", Search.toggleSearchFilters ); Search.win .on( "scroll", Search.filterHeaderPosition ); Search.searchForm .on( "submit", Search.searchSubmit ); }, toggleSearchFilters: function() { Search.searchForm .toggleClass("filters-open"); }, filterHeaderPosition: function() { var scrollTop = Search.win.scrollTop(); if (scrollTop > Search.offset.top) { Search.searchFilters.addClass("pinned"); Search.searchTerms.css("margin-bottom", Search.searchFilters.outerHeight()); } else { Search.searchFilters.removeClass("pinned"); Search.searchTerms.css("margin-bottom", "10px"); }; }, searchSubmit: function() { // process new search return false; }
};
Search.init();
Filtered Search RWD Pattern - Script Codes
Filtered Search RWD Pattern - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded July 11, 2022
Rating 4.5
Size 3,722 Kb
Views 48,576
Do you need developer help for Filtered Search RWD Pattern?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Coyier (chriscoyier) Script Codes
Name
Glowing Blue Inputs
Chriscoyier
Data on Performance Culture
Play Button for YouTube
Vertical-align examples
Simple jQuery Slideshow
Slider like Yahoo Weather App
Label Pattern with just CSS
Stairway Hover Nav
JQuery and CoffeeScript
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!