Add responsive classes to html and changes when window resizes.
Used in combination with css, which set content
on body:after
.
Content in body:after
should always be one of the following:
is-media-xs
is-media-sm
is-media-md
is-media-lg
Dependencies:
- Lo-Dash
- jQuery
- EventEmitter (native EventEmitter is used i Browserify)
- ds-frontend/less/tools/media.less
In browser:
<script src="scripts/libs/lodash.js"></script>
<script src="scripts/libs/jquery.js"></script>
<script src="scripts/libs/eventemitter.js"></script>
<script src="scripts/libs/ds-frontend/scripts/utils/responsive-classes.js"></script>
<script>
ds.utils.responsiveClasses;
</script>
With browserify:
var responsiveClasses = require('ds-frontend/scripts/utils/responsive-classes');
body:after {
position: fixed;
left: -99999px;
content: "is-media-xs";
}
@media (min-width: 768px) {
body:after { content: "is-media-sm"; }
}
@media (min-width: 992px) {
body:after { content: "is-media-md"; }
}
@media (min-width: 1200px) {
body:after { content: "is-media-lg"; }
}
Set class on <body>
and updates on window resize and orientation change.
Name | Type | Description |
---|---|---|
callback |
function | Callback when class/media has changed |
ds.utils.responsiveClasses.on('media:changed', function() {
if (ds.utils.responsiveClasses.isXs()) {
// Collapsed menu
} else {
// Full menu
}
});
Checks if media size is of type.
Return
boolean
: Whether the media size is of type.
Example
ds.utils.responsiveClasses.on('media:changed', function() {
if (ds.utils.responsiveClasses.isXs()) {
// Collapsed menu
} else {
// Full menu
}
});
Checks if media size is greater/less than.
Return
boolean
: Whether the media size is greater/less than.
Example
ds.utils.responsiveClasses.on('media:changed', function() {
if (ds.utils.responsiveClasses.isGtXs()) {
// Full menu for sm, md and lg
}
});