AAPB - Browsing Topics Filter

Developer
Hamiltopia
Size
4,331 Kb
Views
16,192
  1. AAPB - Browsing Topics Filter Previews
  2. AAPB - Browsing Topics Filter HTML Codes
  3. AAPB - Browsing Topics Filter CSS Codes
  4. AAPB - Browsing Topics Filter JS Codes

How do I make an aapb - browsing topics filter?

What is a aapb - browsing topics filter? How do you make a aapb - browsing topics filter? This script and codes were developed by Hamiltopia on 17 November 2022, Thursday.

AAPB - Browsing Topics Filter Previews
IQ Test

AAPB - Browsing Topics Filter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AAPB - Browsing Topics Filter</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="input-group input-group-lg"> <span class="input-group-addon">I'm looking for</span> <input type="text" id="search-text" placeholder="Type Here" class="form-control search-box"> <span class="list-count input-group-addon"></span> </div> </div> </div> </div>
<div class="container-fluid"> <div class="row"> <div class="browsable"> <div class="inner"> <a href="/catalog?q=Agriculture"><span><strong>Agriculture</strong></span></a> <a href="/catalog?q=Animals"><span><strong>Animals</strong></span></a> <a href="/catalog?q=Antiques+and+Collectibles"><span><strong>Antiques and Collectibles</strong></span></a> <a href="/catalog?q=Biography"><span><strong>Biography</strong></span></a> <a href="/catalog?q=Business"><span><strong>Business</strong></span></a> <a href="/catalog?q=Call-in"><span><strong>Call-in</strong></span></a> <a href="/catalog?q=Children%E2%80%99s"><span><strong>Children’s</strong></span></a> <a href="/catalog?q=Consumer+Affairs+and+Advocacy"><span><strong>Consumer Affairs and Advocacy</strong></span></a> <a href="/catalog?q=Cooking"><span><strong>Cooking</strong></span></a> <a href="/catalog?q=Crafts"><span><strong>Crafts</strong></span></a> <a href="/catalog?q=Dance"><span><strong>Dance</strong></span></a> <a href="/catalog?q=Debate"><span><strong>Debate</strong></span></a> <a href="/catalog?q=Documentary"><span><strong>Documentary</strong></span></a> <a href="/catalog?q=Drama"><span><strong>Drama</strong></span></a> <a href="/catalog?q=Economics"><span><strong>Economics</strong></span></a> <a href="/catalog?q=Education"><span><strong>Education</strong></span></a> <a href="/catalog?q=Educational"><span><strong>Educational</strong></span></a> <a href="/catalog?q=Employment"><span><strong>Employment</strong></span></a> <a href="/catalog?q=Energy"><span><strong>Energy</strong></span></a> <a href="/catalog?q=Environment"><span><strong>Environment</strong></span></a> <a href="/catalog?q=Event+Coverage"><span><strong>Event Coverage</strong></span></a> <a href="/catalog?q=Exercise"><span><strong>Exercise</strong></span></a> <a href="/catalog?q=Film+and+Television"><span><strong>Film and Television</strong></span></a> <a href="/catalog?q=Fine+Arts"><span><strong>Fine Arts</strong></span></a> <a href="/catalog?q=Fundraiser"><span><strong>Fundraiser</strong></span></a> <a href="/catalog?q=Game+Show"><span><strong>Game Show</strong></span></a> <a href="/catalog?q=Gardening"><span><strong>Gardening</strong></span></a> <a href="/catalog?q=Geography"><span><strong>Geography</strong></span></a> <a href="/catalog?q=Global+Affairs"><span><strong>Global Affairs</strong></span></a> <a href="/catalog?q=Government"><span><strong>Government</strong></span></a> <a href="/catalog?q=Health"><span><strong>Health</strong></span></a> <a href="/catalog?q=History"><span><strong>History</strong></span></a> <a href="/catalog?q=Holiday"><span><strong>Holiday</strong></span></a> <a href="/catalog?q=Home+Improvement"><span><strong>Home Improvement</strong></span></a> <a href="/catalog?q=Humor"><span><strong>Humor</strong></span></a> <a href="/catalog?q=Instructional"><span><strong>Instructional</strong></span></a> <a href="/catalog?q=Interview"><span><strong>Interview</strong></span></a> <a href="/catalog?q=Journalism"><span><strong>Journalism</strong></span></a> <a href="/catalog?q=LGBTQ"><span><strong>LGBTQ</strong></span></a> <a href="/catalog?q=Literature"><span><strong>Literature</strong></span></a> <a href="/catalog?q=Local+Communities"><span><strong>Local Communities</strong></span></a> <a href="/catalog?q=Magazine"><span><strong>Magazine</strong></span></a> <a href="/catalog?q=Miniseries"><span><strong>Miniseries</strong></span></a> <a href="/catalog?q=Music"><span><strong>Music</strong></span></a> <a href="/catalog?q=Nature"><span><strong>Nature</strong></span></a> <a href="/catalog?q=News"><span><strong>News</strong></span></a> <a href="/catalog?q=News+Report"><span><strong>News Report</strong></span></a> <a href="/catalog?q=Parenting"><span><strong>Parenting</strong></span></a> <a href="/catalog?q=Performance"><span><strong>Performance</strong></span></a> <a href="/catalog?q=Performing+Arts"><span><strong>Performing Arts</strong></span></a> <a href="/catalog?q=Philosophy"><span><strong>Philosophy</strong></span></a> <a href="/catalog?q=Politics"><span><strong>Politics</strong></span></a> <a href="/catalog?q=Promo"><span><strong>Promo</strong></span></a> <a href="/catalog?q=Public+Affairs"><span><strong>Public Affairs</strong></span></a> <a href="/catalog?q=Public+Service+Announcement"><span><strong>Public Service Announcement</strong></span></a> <a href="/catalog?q=Race+and+Ethnicity"><span><strong>Race and Ethnicity</strong></span></a> <a href="/catalog?q=Radio+Theater"><span><strong>Radio Theater</strong></span></a> <a href="/catalog?q=Recorded+Music"><span><strong>Recorded Music</strong></span></a> <a href="/catalog?q=Religion"><span><strong>Religion</strong></span></a> <a href="/catalog?q=Science"><span><strong>Science</strong></span></a> <a href="/catalog?q=Social+Issues"><span><strong>Social Issues</strong></span></a> <a href="/catalog?q=Special"><span><strong>Special</strong></span></a> <a href="/catalog?q=Sports"><span><strong>Sports</strong></span></a> <a href="/catalog?q=Stand-up"><span><strong>Stand-up</strong></span></a> <a href="/catalog?q=Talk+Show"><span><strong>Talk Show</strong></span></a> <a href="/catalog?q=Technology"><span><strong>Technology</strong></span></a> <a href="/catalog?q=Theater"><span><strong>Theater</strong></span></a> <a href="/catalog?q=Travel"><span><strong>Travel</strong></span></a> <a href="/catalog?q=Unedited"><span><strong>Unedited</strong></span></a> <a href="/catalog?q=War+and+Conflict"><span><strong>War and Conflict</strong></span></a> <a href="/catalog?q=Weather"><span><strong>Weather</strong></span></a> <a href="/catalog?q=Women"><span><strong>Women</strong></span></a> <h1>Oh No, We Couldn't Find That!</h1> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

AAPB - Browsing Topics Filter - Script Codes CSS Codes

.browsable { text-align: center; background-color: #555;
}
.browsable .inner { padding: 2em;
}
/*.browsable a { background-color:rgba(255,255,255,.25); color:#FFF; display:inline-block; float:left; margin:0 1px 1px 0; padding:.5em;
} .browsable a:hover { background-color:rgba(255,255,255,.5); }*/
.browsable a { display: inline-block; width: 120px; height: 120px; position: relative; background-color: rgba(255, 255, 255, 0.3); box-sizing: border-box; word-wrap: break-word; color: #FFF; font-size: 14px; text-shadow: 1px 1px 0 #000; transition: all .15s ease-in-out; margin: 0;
}
.browsable a span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: table;
}
.browsable a span strong { display: table-cell; vertical-align: middle; text-align: center; padding: 10px; font-weight: normal; word-wrap: break-word;
}
a:hover { background-color: black; transform: scale(1.2);
}
.hidden { transform: scale(0);
}
.browsable h1 { display: none;
}
.browsable.empty h1 { display: block;
}

AAPB - Browsing Topics Filter - Script Codes JS Codes

$(document).ready(function() { //Height var howhigh = $(".browsable").height(); $('.browsable').css({ 'height': howhigh + "px" }); $('.browsable').css({ 'padding': '2em' }); var jobCount = $('.browsable .in').length; $('.list-count').text(jobCount + ' items'); $("#search-text").keyup(function () { //$(this).addClass('hidden'); var searchTerm = $("#search-text").val(); var listItem = $('.browsable').children('a'); var searchSplit = searchTerm.replace(/ /g, "'):containsi('") //extends :contains to be case insensitive $.extend($.expr[':'], { 'containsi': function(elem, i, match, array) { return (elem.textContent || elem.innerText || '').toLowerCase() .indexOf((match[3] || "").toLowerCase()) >= 0; }
}); $(".browsable a").not(":containsi('" + searchSplit + "')").each(function(e) { $(this).addClass('hiding out').removeClass('in'); setTimeout(function() { $('.out').addClass('hidden'); }, 300); }); $(".browsable a:containsi('" + searchSplit + "')").each(function(e) { $(this).removeClass('hidden out').addClass('in'); setTimeout(function() { $('.in').removeClass('hiding'); }, 1); }); var jobCount = $('.browsable .in').length; $('.list-count').text(jobCount + ' items'); //shows empty state text when no jobs found if(jobCount == '0') { $('.browsable').addClass('empty'); } else { $('.browsable').removeClass('empty'); } });
});
AAPB - Browsing Topics Filter - Script Codes
AAPB - Browsing Topics Filter - Script Codes
Home Page Home
Developer Hamiltopia
Username hamiltopia
Uploaded November 17, 2022
Rating 3
Size 4,331 Kb
Views 16,192
Do you need developer help for AAPB - Browsing Topics Filter?

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!

Hamiltopia (hamiltopia) Script Codes
Name
Product Gallery
Masterpiece v2
Custom.js - July 2014
Page Piling files
Panorama v2
Simple Responsive Breakpoints
RARE Prototype
Pagination JS File
First 8 Hackathon
Vars.scss
Create amazing blog posts 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!