ScreenHeight

Fixes an element to a percentage of the screen height.

Useful for a horizontal strip which must always be 30% of the screen height.

Usage

HTML:

<div class="my-element">
</div>

SCSS:

.my-element {
  width: 100%;
  position: relative;
}

JS:

var ScreenHeight = require('../lib/ScreenHeight.coffee');

var screenHeight = new ScreenHeight(
  $('.my-element'), // the target element
  { // any overrides for the options
    height: 0.3, // set height to 30% of screen height
    mobile: false // disable on mobile
  }
);

Options

The ScreenHeight library can be customised to to set min and max height, disable on desktop/mobile and customise cutoffs for mobile and desktop:

/**
 * Instantiate with options as second parameter
 */
var screenHeight = new ScreenHeight(
  $('.my-element'),
  {
    // float - percentage of screen height
    height: 0.5,

    // height will not go below this height (pixels)
    minHeight: 150, // or false for no min

    // upper limit - height will not exceed this (pixels)
    maxHeight: 600, // or false for no max

    // apply to desktop
    desktop: true,

    // min width in pixels that marks when
    // a window is classed as 'desktop'
    desktopMinWidth: 641,

    // apply to mobile browsers
    mobile: true,

    // max width in pixels for screens classed
    // as 'mobile'
    mobileMaxWidth: 640
  }
);