tysonmatanich / elementquery Goto Github PK
View Code? Open in Web Editor NEWAn element query polyfill you can use today.
An element query polyfill you can use today.
Hi,
Sorry for my bad english.
This script is great.
I have a situation, in Chrome run OK, but in Firefox not.
See the demo. You see an error in my code?
http://www.accuweatherglobal.com/AWG-Widget/test/widget/v.1.0.0/test.html
This is really interesting. Any ideas on how to make this work with SASS ?
I'm going to use this in a production environment. Is there any chance you would either add, or accept a PR for unregistering selectors?
Use case: For a single page app, I'm thinking of writing a Grunt task that will create a JSON object with all of my possible selectors like this:
{
".elem1": {
"min-width": [ "600px" ],
"max-width": ["700px"]
},
".elem2": {
"min-height": ["20em"]
},
".elem3": {
"min-width": ["20em", "30em", "40em"]
}
}
I'm not going to pass a laundry list of selectors to elementQuery
, but instead, each of my Backbone Views will be responsible for:
refresh()
by passing true
.
elQueries: ['.elem1', '.elem2']
elQueries
to the Grunt generated JSON object to register only selectors needed for a given view.How does everyone feel about something like this?
When elementQuery tries to load an external style sheet, some browsers will throw an error: “SecurityError: The operation is insecure.” -- this comment explains how to fix it.
The error is thrown from line 151 in the unminified source:
if (styleSheet[cssRules] && styleSheet[cssRules].length > 0) {
Using try/catch, we can detect this error and return instead of letting the script fail. The simplest way to do this is to add the following line right above the if-statement (add this line to line 151, pushing the if-statment to line 152)
try { styleSheet[cssRules].length; } catch(err) { return; }
With this in place, the security error and it’s side-effects will disappear.
Hi!
Firefox 25.0.1.
elementQuery produces:
SecurityError: The operation is insecure.
http://localhost:4567/javascripts/vendor/elementQuery.js?body=1
Line 19
It works in other browsers.
On the off chance you want to add more dynamic sensing of element size changes, you may find this helpful: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/
Thanks for the great library. I think it would be a good advancement to support styles loaded with "@import".
Would it be possible to have a preprocessor that would take a css file with element queries in it, and output: a "pure" css file with classes instead of the queries, and a js file that contains the element queries and the new css classes they map to?
This would allow maintaining the queries in css whilst delivering pure CSS to the client and avoiding processing the css files in js on the client.
I'll be nice to support the AMD for requireJS
This doesn't work in firefox.
I have this error
SecurityError: The operation is insecure.
if (styleSheet[cssRules] && styleSheet[cssRules].length > 0) {
but even when changed to
if (styleSheet.lenght >0) {
The query doesn't work.
Could you make this available via bower? We would love to use it without having to check the script into our code base.
Thank you!
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library tysonmatanich/elementQuery
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "tysonmatanich/elementQuery",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Hey guys!
I can't get the plugin to style the element until the window resizes, I'm using Chrome 37.
Anybody else having this issue?
I'm looking at a handful of options around the idea of element queries. I just pulled your repo and did a small experiment that made me curious about performance.
Essentially, I generated 1000, then 2000, then 3000 DOM nodes with a single class using element queries just to test the impact on the page. A quick snippet:
<!-- using angular to make the DOM, class="tester" is the one node with the queries -->
<div ng-controller="list.items">
<div ng-repeat="item in list" layout row outline>
<div outline>{{item.id}}</div>
<div flex outline class="tester">{{item.random}}</div>
<div outline>{{item.string}}</div>
</div>
</div>
The queries I used are the same as those from the README.md file, just changing header
to .tester
:
.tester {
background-color: #fefefe;
}
.tester[min-width~="500px"] {
background-color: #eee;
}
.tester[min-width~="500px"][max-width~="800px"] {
background-color: #eee;
}
What I found was interesting.
So there is a pretty massive performance hit. At minimum this should probably be addressed in the README file.
I'm using dotdotdot.js (multiple lines ellipsis) on blocks styled with elementQuery.
The problem is that I have to wait for elementQuery to finish its job if I want to apply dotdotdot.js.
I've added this on line 176 of the prod branch of elementQuery :
$.event.trigger({
type:"elementQueriesDone",
});
And now I can apply dotdotdot.js when elementQuery has finished.
Don't now how to trigger an event without jQuery, sorry...
And thanks for this great polyfill
https://gist.github.com/itsravenous/8320654
The sizzle error thrown:
Uncaught Error: Syntax error, unrecognized expression: .menu li::after
It's a great library, works well on resize(drag your window to different sizes). But Pretty wonky when maximize and restore buttons are used for browsers.
Tested on Chrome Version 55.0.2883.87
Anything with display:none won't properly respect queries on page load -- a window-resize is then required for these objects to 'snap' into their proper dimensions/properties.
Perhaps a performant way around this problem would be to expose a refresh function to developers to be able to trigger the plugin manually?
I am working on a SharePoint 2010 site. User can add more than one Web Part in a page and can resize a Web Part as per their requirement.
Is their anyway to make Web Part content responsive on each Web Part resize?
Any lead/help will be appreciated. Thanks in advance.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.