{"id":20741682,"url":"https://github.com/attitude/elementqueriesjs","last_synced_at":"2026-04-24T14:31:40.991Z","repository":{"id":15189145,"uuid":"17917223","full_name":"attitude/elementQueriesJS","owner":"attitude","description":"Element queries using conditional CSS classes. In javascript.","archived":false,"fork":false,"pushed_at":"2014-10-22T14:54:43.000Z","size":396,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-03-11T12:13:59.169Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/attitude.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-19T19:22:04.000Z","updated_at":"2014-10-22T13:31:42.000Z","dependencies_parsed_at":"2022-07-19T05:47:06.818Z","dependency_job_id":null,"html_url":"https://github.com/attitude/elementQueriesJS","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/attitude/elementQueriesJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attitude%2FelementQueriesJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attitude%2FelementQueriesJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attitude%2FelementQueriesJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attitude%2FelementQueriesJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/attitude","download_url":"https://codeload.github.com/attitude/elementQueriesJS/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attitude%2FelementQueriesJS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32227322,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-17T06:42:42.998Z","updated_at":"2026-04-24T14:31:40.975Z","avatar_url":"https://github.com/attitude.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"elementQueries.JS\n==================\n\nMedia queries in javascript with noscript and IE fallback.\nOnly 2 KB when minified, 0.89 KB gzipped.\n\nAny element can be watched for changes of width and height. This way you can\ndesign experience on element level instead of screen level.\n\n## Idea\n\nIf you use [Modernizr.js][] you are already familiar with principle of\nconditional CSS classes to enhance user experience. If you're not, you're\nmissing out and you definitely should.\n\nThis plugin works on same principle: let javascript watch elements (yes, you\ncan use it for element queries) and by defining conditional CSS, respond to\nit appropriately.\n\n## Usage\n\n```html\n\u003c!-- Include jQuery dependency --\u003e\n\u003cscript src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003ewindow.jQuery || document.write('\u003cscript src=\"js/vendor/jquery-1.11.0.min.js\"\u003e\u003c\\/script\u003e')\u003c/script\u003e\n\n\u003c!-- Include elementqueries.js --\u003e\n\u003cscript src=\"//js/elementQueries.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Add instances to watch for elements --\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    $('body').elementQueries({useBreakpoints: true, prefix: \"media-\"});\n    $('#search').elementQueries({prefix: \"el-\"});\n\u003c/script\u003e\n```\n\n# Demo\n\n[Temporary demo](http://www.martinadamko.sk/projects/elementqueries.js/)\n\n## Why\n\nThis plugin needs javascript, but you are not tied to use javascript at all.\nWriting conditional CSS for this plugin has few other beneficial side-effects:\n\n1. You can use any server-side to render classes needed to display the\n   site correctly and thus support even legacy devides.\n1. By adding 'eq-off' class you can pause this plugin from\n   processing.\n1. You can even add experience switcher independent from the screen size that\n   could allow users to switch best experience they need even without javascript.\n1. Works in older IE's (but can be disabled while serving predefined experience)\n\n\u003e **Tip:** You are even encouraged to serve prefilled classes on elements you\n\u003e plan to watch. Use Developer tools to inspect element and apply generated\n\u003e classes to enable state you're on by default.\n\nIf javascript is enabled and this plugin is present, it jumps right in\nand sets the correct classes for you.\n\n## PHP element queries switcher example\n\nThis example is simple, but illustrates the use of the conditional classes in\nyour project for enhancing user's experience.\n\n```php\n\u003c?php\n\nif (isset($_GET['experience'])) {\n    if ($_GET['experience']==='desktop') {\n        $experience_classes = \"is-responsive eq-width-desktop eq-width-desktop-small eq-width-13 eq-width-since-phone eq-width-since-tablet eq-width-since-desktop\";\n    } elseif ($_GET['eperience']==='phone') {\n        $experience_classes = \"eq-width-phone eq-width-phone-small eq-width-3 eq-width-since-phone\";\n    }\n} else {\n    // Default/initial experience is set to tablet\n    $experience_classes = \"is-responsive eq-width-tablet eq-width-tablet-small eq-width-9 eq-width-since-phone eq-width-since-tablet\";\n}\n?\u003e\u003cbody class=\"\u003c?=$experience_classes?\u003e\"\u003e\n...\n\u003c/body\u003e\n```\n\nRenders by default as:\n\n```html\n\u003cbody class=\"eq-width-tablet\n             eq-width-tablet--small\n             eq-width-9\n             eq-width-since-phone\n             eq-width-since-tablet\n\"\u003e...\u003c/body\u003e\n```\n\nOn the other hand, request with `?experience=phone` will result in:\n\n```html\n\u003cbody class=\"eq-width-phone\n             eq-width-phone--small\n             eq-width-width-3\n             eq-width-since-phone\n\"\u003e...\u003c/body\u003e\n```\n\n\u003e **Tip:** you can use `COOKIES` or `SESSION` to remember the user's preference\n\u003e for current session (or serve `m.yoursite.com` with the mobile classes set and\n\u003e without this plugin using same, probably already cached CSS).\n\n## Changelog\n\n\n- v0.3.3 - Rewrites, renamed to elementQueriesJS\n  ...\n- v0.2.2 - Add height breakpoints + orientation classes\n- v0.2.1 - Fixes to previous release\n- v0.2.0 - Complete rewrite\n  - More instances = element queries\n  - [Google Closure Compiler][GCC] used to [minify javascript][GCCApp]\n- v0.1.0 Proof of concept\n\n## Notes\n\n**IMPORTANT:** This is not a replacement for media queries.\n\nMedia queries are great, but I find one thing wrong about building responsive\nsites using media queries: they can't be turned off. You might say to serve\nmedia queries as separate file and just not include it to turn them off. It's\neasier said than done.\n\nBuilding mobile-first responsive website is basically:\n\n   1. write `@media (min-width: 60em) { #element {...} }`\n   1. repeat for each element, each device size...\n\nWith this plugin it's same as `.eq-width-since-tablet #element { ... }`.\n`width-since-tablet` is more semantic and you can change WHAT is tablet just by\nchanging plugin's module (which is 80 by the way).\n\nHaving width-9 means there is space for 9 columns available for extra control.\n\nIE support as a side effect of writing CSS (is whath `.no-js` on `\u003chtml\u003e` tag\nis for H5BP's Modernizr).\n\n## jQuery dependency\n\nThis is in the state of development. That's why I have used jQuery for\nfaster development and testing this approach.\n\nEnjoy!\n\n[@martin_adamko][me]\n\n[me]:     http://twitter.com/martin_adamko\n[GCC]:    http://dl.google.com/closure-compiler/compiler-latest.zip\n[GCCApp]: http://closure-compiler.appspot.com/\n\n[Modernizr.js]: http://modernizr.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fattitude%2Felementqueriesjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fattitude%2Felementqueriesjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fattitude%2Felementqueriesjs/lists"}