Here is a great little script that I have been using that allows me to change the class of an element depending upon the width of the element itself
https://github.com/ahume/selector-queries
Request:
Response.js will allow me to set queries via the width of the vp or the screen itself, it would be nice to also have the ability to have response.js to allow the option of measuring the container element as well.
Reason:
Some of my theme templates have sidebars, others do not. While I can change the content of an element via response for the screen size, there are many instances where I would also want to add/remove elements depending upon whether or not my container div has enough room to make it still look right.
Scenario:
I have a main content area element
and also a sidebar element
. Using response, I can choose to remove the sidebar element if say the screen size is less than >768px.
Same scenario as above, only there is are 2 sidebars. I want to remove one of them if the screen shrinks below a set amount. My choices are to either write more media queries, or to write up a ton of additional css to make the changes. By being able to put a conditional on the size of the parent element with response.js, then it is a simple matter of a couple lines of code. Much cleaner and easier to maintain.
I hope the idea is clear and the benefit is even more obvious.
The script I linked to does a fantastic job of changing the class name, thus allowing me to write custom css for when the element changes sizes, however I do not have the benefit of not displaying the element in the first place like I can with response.
@anointed Since v0.5 you can add custom tests to do stuff like this. That's probably the best way. Try something like:
Response.addTest("parent-width", function (min) {
return !!(min && min >= $(".example:parent").width());
}).create({
prop: "parent-width" // custom property
, prefix: "min-parent-width-" // prefix for data attributes
, breakpoints: [961,641,481,320,0] // custom min breakpoints
, lazy: true // make data attr contents lazyload (optional)
, dynamic: true // set this to true if test needs to be rechecked on resizes
});
This would create functionality for attributes like data-min-parent-width-961, data-min-parent-width-641, etc.
See the 0.5 change notes and the parts about Response.create and Response.addTest in the readme too.
Hi Ryanve
Thank you so much for the code snippet. Now that I see just how easy it is to extend, I suppose it makes sense to have it a separate function and not a core function. This is going to come in very handy.
Here is a great little script that I have been using that allows me to change the class of an element depending upon the width of the element itself https://github.com/ahume/selector-queries
Request: Response.js will allow me to set queries via the width of the vp or the screen itself, it would be nice to also have the ability to have response.js to allow the option of measuring the container element as well.
Reason: Some of my theme templates have sidebars, others do not. While I can change the content of an element via response for the screen size, there are many instances where I would also want to add/remove elements depending upon whether or not my container div has enough room to make it still look right.
Scenario: I have a main content area element
Same scenario as above, only there is are 2 sidebars. I want to remove one of them if the screen shrinks below a set amount. My choices are to either write more media queries, or to write up a ton of additional css to make the changes. By being able to put a conditional on the size of the parent element with response.js, then it is a simple matter of a couple lines of code. Much cleaner and easier to maintain.
I hope the idea is clear and the benefit is even more obvious.
The script I linked to does a fantastic job of changing the class name, thus allowing me to write custom css for when the element changes sizes, however I do not have the benefit of not displaying the element in the first place like I can with response.
@anointed Since v0.5 you can add custom tests to do stuff like this. That's probably the best way. Try something like:
This would create functionality for attributes like
data-min-parent-width-961,data-min-parent-width-641, etc.See the 0.5 change notes and the parts about
Response.createandResponse.addTestin the readme too.Hi Ryanve Thank you so much for the code snippet. Now that I see just how easy it is to extend, I suppose it makes sense to have it a separate function and not a core function. This is going to come in very handy.
@anointed Cool—let us know how it works out =]