Skip to content

Instantly share code, notes, and snippets.

@swashcap swashcap/format-onboard.js
Last active Aug 29, 2015

Embed
What would you like to do?
Example of responsive formatting an "Onboard" section.
/* global Modernizr */
jQuery(function ($) {
'use strict';
var SCREEN_SMALL = '(min-width: 768px)';
/**
* "Welcome" onboarding message.
*/
var $onboard = $('.onboard');
var $site = $('.site');
var formatOnboard = function () {
if (
$onboard.length &&
Modernizr.mq(SCREEN_SMALL) &&
$onboard.height() < $(window).height()
) {
$onboard.css({
position: 'fixed',
width: '100%'
});
$site.css({
top: $onboard.height(),
position: 'relative'
});
} else {
$onboard.removeAttr('style');
$site.removeAttr('style');
}
};
// Initialize
formatOnboard();
$(window).resize($.debounce(125, formatOnboard));
}(jQuery));
@swashcap

This comment has been minimized.

Copy link
Owner Author

commented Jul 14, 2014

Couple things:

  • Modernizr.mq(SCREEN_SMALL) runs Modernizr’s polyfill for matchMedia(). It returns a boolean based on the argument. Not all installs of Modernizr come with it; check your download.

  • You’ll need to tear down what you’re setting up. Note the block:

    else {
      $onboard.removeAttr('style');
      $site.removeAttr('style');
    }
  • The function needs to initialize, so call formatOnboard() (line 35).

  • $.debounce(125, formatOnboard) debounces the window’s onresize event using jQuery-Throttle-Debounce. It will need to be included on the page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.