Responsive Events

The X5 Engine API provides you a set of responsive-related events.
All the events listed below are triggered on the #imContent DOM element.

beforeBreakpointChanged

This event is triggered every time a window resize is going to trigger a breakpoint change in the responsive template. The event is triggered before breakpointChanged.

Kind: Event
Since: 12.0.0
Example:

$("#imContent").on("beforeBreakpointChanged", function (e, breakpoint) {
    // The breakpoint is passed as argument to the event handler and has 
    // the same structure returned by x5engine.responsive.getCurrentBreakpoint();
    alert('The current viewport is going to change to ' + breakpoint.name);
});

breakpointChanged

This event is triggered every time a window resize triggers a breakpoint change in the responsive template.

Kind: Event
Since: 12.0.0
Example:

$("#imContent").on("breakpointChanged", function (e, breakpoint) {
    // The breakpoint is passed as argument to the event handler and has 
    // the same structure returned by x5engine.responsive.getCurrentBreakpoint();
    alert('The current viewport is changed to ' + breakpoint.name);
});

breakpointChangedOrFluid

This event is triggered every time a window resize triggers a breakpoint change or everytime the window is resized in a fluid breakpoint (usually the smallest one).

Kind: Event
Since: 12.0.0
Example:

$("#imContent").on("breakpointChangedOrFluid", function (e, breakpoint) {
    // The breakpoint is passed as argument to the event handler and has 
    // the same structure returned by x5engine.responsive.getCurrentBreakpoint();
    if (!breakpoint.fluid) {
        alert('The current viewport is changed to ' + breakpoint.name);
    } else {
        alert('The current window width is now: ' + $(window).innerWidth() + 'px');
    }
});