if-max-width
Syntax
if-max-width: (element) integer;
This conditional action will return true if the chosen selector has a maximum display width of the specified value. This is useful if you need to set a class based on an element's width rather than the device's width. Media queries only allow checking for device width and sometimes this isn't enough, so this is a workaround solution for that. Of course, this conditional can be used for other purposes as well.
element = Selector reference to a specific element.
integer = The maximum width of the element. This can include the "px" or it can be left out.
For example, this will return true if the element #myInput has a width less than 400px.
@conditional ifSmallDiv {
if-max-width: #myDiv 400px;
}
When used on an event selector with no element in parentheses, it will default to checking "self". Eg. #myDiv:if-max-width(400px): ...
Note: Internally this uses the element.getBoundingClientRect() JavaScript method of fetching the width of the element.
if-max-width
You will need to resize the browser to see this example in action.
This example shows how this command can be used to display CSS based on an element's own width or height. The Active CSS embeddable code editor component uses this method, as it needs to be displayed responsively regardless of the amount of space it is given on a page. Using a CSS media query would not have worked - only JavaScript would have given a solution to this in the past.
Reset example
#myContainer:if-max-width(#myContainer 750px):draw {
add-class: .smaller;
}
window:if-min-width(#myContainer 751px):resize {
#myContainer {
remove-class: .smaller;
}
}
window:if-max-width(#myContainer 750px):resize {
#myContainer {
add-class: .smaller;
}
}
<div id="myOuterContainer">
<div id="myContainer"></div>
</div>
#myOuterContainer {
width: 100%;
max-width: 1200px;
}
@media (max-width: 1024px) {
#myOuterContainer {
max-width: 900px;
}
}
#myContainer {
width: 100%;
height: 400px;
background-color: green;
}
#myContainer.smaller {
height: 200px;
background-color: gray;
}
