Responsive Sensors are used in conjunction with Horizontal and Vertical Layouts to change the way the page displays based on screen/window size.
Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).
This control is used to make Coaches responsive, so no matter what device a user is on, the experience will be enjoyable.
Box Factors
Box Factors Names and page widths at which responsive functionality is triggered. Responsive functionality at each threshold can be controlled under the Responsive config options of the sections themselves (e.g. vertical or horizontal sections).
Example
These are the configuration option settings for the Responsive Sensor...
and these are the configuration options for the Horizontal Layouts that are within the Responsive Sensor...
This is the result when the page is larger than 1000px...
This is the result when the page is smaller than 1000px but larger than 600px...
And smaller than 600px..
Note: When the responsive behavior is not met, the default appearance is displayed.
Events
With the Responsive Sensor, there are 2 types of event handlers:
- On Load When the page loads
- On Responsive Boundary When there is responsive boundary
You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.
Methods
For detailed information on the available methods for this control, access the JS Doc file.
Related Article(s)
- Author: Courtney Silva
- Date Created: June 17, 2015
- Date Modified: July 17, 2015
Comments