ƒ.window - Get-Kraken/fixx GitHub Wiki

Viewport size

Viewport size differs from window size in that it includes the width of the browser scrollbar, if present.

ƒ.window.get.viewportSize(); // → {width:int, height:int}

returns an object containing the viewport.

As the viewport size includes the scrollbar, the values for jQuery window width and ƒ viewport width will differ when the browser has a scrollbar.

e.g. $(window).width() returns the window width EXCLUDING the scrollbar width
ƒ.window.get.viewportSize().width returns the window width INCLUDING the scrollbar width (same as css media queries)

ƒ breakpoints uses the viewport width to match css breakpoints. This eliminates the 17px discrepancy between JS width calculations on jQuery window width and CSS3 media queries.


Orientation

Get window orientation

ƒ.window.get.orientation(); // → 'landscape' / 'portrait'

see more on the stacked orientationchange event below


ƒ.window.stack

Normalised window resize, window scroll with added breakpoint and waypoint support.

You can also use ƒ.stack() as a shortcut to ƒ.window.stack

Normalisation required for resize- and scroll- end to avoid excessive event firing as well as iOS quirks where the resize method is fired when only scrolling.

Functions are “stacked” and can be added anywhere within the site's JavaScript flow (the script include needs to be in the page head if any methods are to be called in any page templates. If not, then the script can be put in the footer, after jQuery)

Supported events and methods: (see examples below)

  • resize
  • scroll
  • breakpoint
  • waypoint
  • orientationchange

Config options:

In order to throttle and normalise events, there are delays and pixel values that can be configured as follows:

default timeout for resize and scroll is set to 150ms. (0.15s)

delays can be individually set for:

'scroll' and 'resize'

This can be redefined at runtime:

ƒ.window.config.delays.scroll = 500; // set to ½ second delay.  
ƒ.window.config.delays.resize = 0.5e3; // set to ½ second delay.  

Scroll and resize trigger depth
To emulate scroll end, resize end and to facilitate throttling events, the scroll and resize functions are checked against both the delay AND a pixel distance.

Depths can be individually set for:

'scroll' \\ default 100
and
'resize' \\ default 75

This can be redefined at runtime:

ƒ.window.config.scroll.trigger.depth = 200; // set to 200 (pixels)
ƒ.window.config.resize.trigger.depth = 200; // set to 200 (pixels)

Scroll example:

ƒ.window.stack('scroll',function(delta){
    console.info('delta.direction: ' + delta.direction);   
});

The scroll function return object contains the direction of the last scroll event.
Possible return values are: 'up', 'down' or 'unchanged'


Resize example:

ƒ.window.stack('resize',function(delta){
    console.info('delta.x: ' + delta.x);
    console.info('delta.y: ' + delta.y);
});

The resize function return object contains the page scroll values for both x and y when triggered.
Possible return values are:
for x: 'wider', 'narrower' or 'unchanged'
for y: 'taller', 'shorter' or 'unchanged'


Waypoint options:

triggerOn: jQuery object or pixel value (int)
triggerDepth: (decimal) number between 0 and 1 (e.g. 0.75 is ¾ down the screen)
triggerOnce: optional boolean. Default value is true; Set to false to trigger every time the waypoint condition is satisfied

Waypoints are automatically fired when the window is scrolled and do not need to be wrapped in a scroll stack.

Waypoint example:

var exampleMethod = function(){
    console.log('waypoint triggered');
}

ƒ.window.stack('waypoint',
{   triggerOn: $('.home-row-2') // see note below
  , triggerDepth: 0.75
  , triggerOnce: true
},
    function () { exampleMethod(); }
);

Note: triggerOn takes a single DOM element (does not handle the selector as $.each(). This might be extended into future versions.)


Breakpoint options: at least one option is required.

minWidth: pixel value int
maxWidth: pixel value int

Breakpoints are automatically fired when the window is resized and do not need to be wrapped in a resize stack.
Width calculations are done on the viewport (same as CSS3) and differs from jQuery's $(window).width() value (see Viewport Size main section above)

Breakpoint example:

ƒ.window.stack('breakpoint', {minWidth:1024}, function(){
    console.log('fire when $(window).width >= 1024');
});

ƒ.window.stack('breakpoint', {maxWidth:1024}, function(){
    console.log('fire when $(window).width <= 1024');
});

ƒ.window.stack('breakpoint', {minWidth:600, maxWidth: 800}, function(){
    console.log('fire when $(window).width >= 600 and $(window).width <= 800');
});

Optional failovers:

Optional failover functions can be overloaded when declaring ƒ breakpoints.

These will be fired in the opposite direction of the min or max value, for single value breakpoints.
For ranged breakpoitns, the first overload will fire for the smaller than fail, and the second overload will fire for the larger than fail.

(Think of it as an "else" clause to an "if" statement.)

var testBreakpoints = {
    rangeMin: {
        init: function () {
            ƒ.window.stack('breakpoint',
            { minWidth: 900 },
            function () {
                // required method
                testBreakpoints.rangeMin.methods.testSuccess();
            },
            function () {
                // optional failover
                testBreakpoints.rangeMin.methods.testFail();
            });
            console.log('rangeMin init with minWidth:900');
        },
        methods: {
            testSuccess: function () {
                $('#output').append('<div>rangeMin success: window is &gt; 900</div>');
            },
            testFail: function () {
                $('#output').append('<div>rangeMin fail: window is &lt; 900 (OPTIONAL failover)</div>');
            }
        }
    },
    rangeMax: {
        init: function () {
            ƒ.window.stack('breakpoint',
            { maxWidth: 900 },
            function () {
                // required method
                testBreakpoints.rangeMax.methods.testSuccess();
            },
            function () {
                // optional failover
                testBreakpoints.rangeMax.methods.testFail();
            });
            console.log('rangeMax init with maxWidth:900');
        },
        methods: {
            testSuccess: function () {
                $('#output').append('<div>rangeMax success: window is &lt; 900</div>');
            },
            testFail: function () {
                $('#output').append('<div>rangeMax fail: window is &gt; 900 (OPTIONAL failover)</div>');
            }
        }
    },
    rangeMinMax: {
        init: function () {
            ƒ.window.stack('breakpoint',
            { minWidth: 500, maxWidth: 1200 },
            function () {
                // required method
                testBreakpoints.rangeMinMax.methods.testSuccess();
            },
            function () {
                // optional failover
                testBreakpoints.rangeMinMax.methods.testFailMin();
            }
            ,
            function () {
                // optional failover
                testBreakpoints.rangeMinMax.methods.testFailMax();
            });
            console.log('rangeMinMax init with minWidth:500 and maxWidth:1200 ');
        },
        methods: {
            testSuccess: function () {
                $('#output').append('<div>rangeMax success: window is &gt; 500 and &lt; 1200</div>');
            }
            ,
            testFailMin: function () {
                $('#output').append('<div>rangeMin fail: window is &lt; 500 (OPTIONAL failover)</div>');
            }
            ,
            testFailMax: function () {
                $('#output').append('<div>rangeMax fail: window is &gt; 1200 (OPTIONAL failover)</div>');
            }
        }
    }
}
$(document).ready(function () {
    $('body').append('<div id="output"></div>');
    testBreakpoints.rangeMin.init();
    testBreakpoints.rangeMax.init();
    testBreakpoints.rangeMinMax.init();
});

Orientation examples:

Fires on viewport orientation change.

// fire on any orientation
ƒ.window.stack('orientationchange', function(){
    console.log(ƒ.window.get.orientation());
});
// fire on landscape orientation
ƒ.window.stack('orientationchange','landscape', function(){/**/}); 
// fire on portrait orientation
ƒ.window.stack('orientationchange','portrait', function(){/**/}); 

ƒ.window.unstack

In the rare case of having to unstack window stacks, this method can be called.

ƒ.window.unstack();

unstacks ALL method groups (resize, scroll, waypoint, orientation and breakpoint)

passing a string parameter of the method group will clear only that group.
e.g. if you want to clear only waypoints:

ƒ.window.unstack('waypoint'); // unstack all waypoint events
ƒ.window.unstack('resize'); // unstack all resize events
⚠️ **GitHub.com Fallback** ⚠️