Conditional

A jQuery plugin that replaces content within a page based on the grid level xs, s, m, l that the current viewport width falls within.

The plugin uses ajax to load in the defined content. The url paths to the content are defined in the same format as jQuery's Load() method which allows you to specify selectors. After each initial call the content is cached so that no further requests are made. If no fallback is defined then any html contained withing the plugin element will be saved and cached instead.

Comes with a markup API that allows running the plugin without writing a single line of JavaScript. This is Responsive's first class API and should be your first consideration when using a plugin.

Resize the browser window to see dynamically loaded content change.

Examples

Standard

Initial Content as Fallback

In this example the content that is within the bounds of the plugin element before the plugin initializes is saved and used as fallback content for any undefined grid ranges. This ensures that search engine crawlers can find content to add to their results.

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn't have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'
- John Allsopp, "A Dao of Web Design"

All Responsive plugins within loaded markup that use the Data-API will automatically register themselves.

Markup

<div data-conditional-xs="../css/grid.html #basic" 
     data-conditional-fallback="tabs.html #examples" 
     data-conditional-l="carousel.html #carousel-1">
</div>

Methods

The conditional plugin exposes the following method signatures.

.conditional(options)

Initialises the plugin with an optional options object

options

Contains parameters to pass to the plugin.

xs: The path to the content to load when the grid is in xs mode.
s: The path to the content to load when the grid is in s mode.
m: The path to the content to load when the grid is in m mode.
l: The path to the content to load when the grid is in l mode.
fallback: The path to the content to load when no specific content to load has been defined for each mode.

.conditional("resize")

Triggers the plugin to reload the content.

Events

The conditional plugin exposes the following events allowing the developer to tap into its behaviour.

loaded.r.conditional

This event is fired when the plugins resize instance method is invoked and content is loaded. The event data contains three custom properties:

relatedTarget: The containing element that the plugin is bound to.
loadtarget: The url to the target html to load.
grid: The current grid range in which the event is firing. xs, s, m, or l

error.r.conditional

This event is fired when the plugin encounters an error when attempting to load ajax content. The event data contains three custom properties:

relatedTarget: The containing element that the plugin is bound to.
loadtarget: The url to the target html to load.
grid: The current grid range in which the event is firing. xs, s, m, or l

Data API

The conditional's default behaviour is bound using a markup API that allows running the plugin without writing a single line of JavaScript. If you need to override this behaviour the following code will allow you to do so.

// Override the default behaviour
$(document).off("ready.r.conditional domchanged.r.conditional")
           .on("ready.r.conditional domchanged.r.conditional", function () {
    // Your custom behaviour...
}); 
// Bind to the loaded event.
$("YOUR_SELECTOR").on("loaded.r.conditional", function(event) {
    // Your custom behaviour...
});
                                               
// Bind to the error event.
$("YOUR_SELECTOR").on("error.r.conditional", function(event) {
    // Your custom behaviour...
});