Skip to content
Head Home with Cool Dog
  • Home
  • C#
  • CSS
  • HTML
  • JavaScript
  • PHP

Tags

AngularJS Apache ASP.NET Bourbon Browserify Browsersync C# Chinook CMS Compass CSS Docker DotNetNuke Drupal Grunt Gulp HTML 5 JavaScript Joomla jQuery Knockout Laravel Linux Mobile MVC MySQL NodeJs OS X PHP PowerShell Razor Sass SQL Server Visual Studio Vue.js Web API Webpack Windows WordPress Xdebug

Pages

  • Adobe Experience Manager (AEM)
  • C#
    • Working with Lists
  • Code Editors
    • Atom
    • Sandbox
    • Sublime Text
    • Visual Studio Code
  • CSS
    • Animation
    • Browser Extensions
    • Centering Content
    • CSS 1
    • CSS 2.1
    • CSS 3
    • Element Count
    • Images Larger than Container
    • Responsive Hotspots
    • Responsive Sidebar
  • Docker
    • Nginx Reverse Proxy
    • Node.js Koa Container
  • HTML
  • HTML – Color Selector
  • HTML 5 – Elements
  • HTML 5 Template
  • HTML X11 Color Names
  • JavaScript
    • Best Practices
    • Browser
    • Design Patterns
    • Document
    • Helper Functions
    • jQuery
    • Node.js
    • Responsive Filter
  • Joomla
    • Customizing Media Manager
    • Language Files
  • Laravel Tips and Tricks
  • Links & Resources
  • Linux
  • PHP
  • Shell Scripting
  • Windows PowerShell
    • Commands
    • Customization / Modules
  • WordPress
  • XML and HTML Characters
profile for Jim Frenette at Stack Overflow, Q&A for professional and enthusiast programmers

JavaScript - Responsive Filter

This code sample shows how to create a responsive list filter. JavaScript and jQuery fetch the breakpoint value from a hidden css pseudo element that sets the value. Therefore, it is not necessary to maintain rendundant responsive breakpoint values in the script.

demo

  • Responsive SidebarResponsive Sidebar
  • Responsive HotspotsResponsive Hotspots
  • Centering ContentCentering Content
  • Element CountElement Count
  • AnimationAnimation
  • Bourboneat WordPress ThemeBourboneat WordPress Theme
Head Home with Cool Dog
  • Jim Frenette | GitHub
  • Twitter
  • Jim Frenette | LinkedIn
  • jimfrenette.com | facebook
  • jimfrenette.com Slack Channel
π