Methods
-
<static> createMediaQueryObservable(queryString)
-
creates an observable that returns true or false based on a media query string.
Example:
var customQuery = oj.ResponsiveKnockoutUtils.createMediaQueryObservable( '(min-width: 400px)');
Parameters:
Name Type Description queryString
string media query string, for example '(min-width: 400px)' - Source:
Returns:
a knockout observable that returns true or false based on a media query string. -
<static> createScreenRangeObservable()
-
This function creates a computed observable, the value of which is one of the oj.ResponsiveUtils.SCREEN_RANGE constants. For example when the width is in the range defined by the sass variable $mediumScreenRange then the observable returns
oj.ResponsiveUtils.SCREEN_RANGE.MD
, but if it's in the range defined by $largeScreenRange then it returnsoj.ResponsiveUtils.SCREEN_RANGE.LG
, etc.Example:
// create an observable which returns the current screen range self.screenRange = oj.ResponsiveKnockoutUtils.createScreenRangeObservable(); self.label2 = ko.computed(function() { var range = self.screenRange(); if ( oj.ResponsiveUtils.compare( range, oj.ResponsiveUtils.SCREEN_RANGE.MD) <= 0) { // code for when screen is in small or medium range } else if (range == oj.ResponsiveUtils.SCREEN_RANGE.XL) { // code for when screen is in XL range } });
- Source:
Returns:
a knockout observable the value of which is one of the screen range constants, for example oj.ResponsiveUtils.SCREEN_RANGE.MD