Move Content Off-Canvas with a Push Pane

The available screen space is much more limited on smaller devices, such as mobiles. As designers and developers, you should consider moving superfluous content off the screen. This content should still be easily accessible by users, but just not immediately on the page load.

To enable this design, there is a custom jQuery plugin that enables ‘push panes’, which is contained within jQueryExtras/jQuery.scPush.js. This allows you to store content ‘off-canvas’ until it is requested by a user by clicking on a button.

• Update the View – To implement this feature, you must do so at the view level. If your view already has push panes on it, you do not need to update the view and can skip to the next section.

First, you must add jQuery.scPush as a dependency to your view. Second, you must add a line to its showContent() method; if your view does not have one already defined, you must add one like this:

showContent: function showContent () {
    var self = this;
    this.application.getLayout().showContent(this).done(function () {
        self.initPlugins();
    });
}

This creates a listener for when the main layout view has been rendered, which is the perfect time to execute this kind of jQuery code. We then call your view’s initPlugins() method, which you should define as follows:

initPlugins: function initPlugins () {
    this.$el.find('[data-action="pushable"]').scPush();
}

• Update the Template –

You need to update the template to do two things:

1. Create a container to store your off-canvas content
2. Create a button to activate the push pane functionality

<button class="some-push-button-class" data-type="sc-pusher" data-target="my-push-pane">Read More<i></i></button>

<div class="some-push-pane-class" data-action="pushable" data-id="my-push-pane">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis leo sit amet faucibus euismod. Sed a nunc mi.</p>
</div>

On the button element, note that:

data-type="sc-pusher" is mandatory, data=target="my-push-pane" is mandatory, but the my-push-pane value can be set to whatever you want, so long as it matches the data-id value on your push pane container

The class names can be whatever you want them to be, as well as the content of the button element itself.

As for the div:

data-action="pushable" is mandatory, data-id="my-push-pane" is mandatory, but the my-push-pane value can be set to whatever you want, so long as it matches the data-target value on your push pane button

• Styling– The push pane container has basic styling already, so you may not need to make any further improvements.