@claviska/jquery-offscreen

Filters that detect when an element is partially or completely outside of the viewport.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
130Feb 22, 2017Apr 11, 2015Minified + gzip package size for @claviska/jquery-offscreen in KB

Readme

jQuery Offscreen Plugin

Overview

Filters that detect when an element is at least partially outside of the viewport. Useful for repositioning menus, tooltips, etc. when they would otherwise appear off the screen.

Usage

$('#element').is(':off-top')    // top of the viewport
$('#element').is(':off-right')  // right-side of the viewport
$('#element').is(':off-bottom') // bottom of the viewport
$('#element').is(':off-left')   // left-side of the viewport
$('#element').is(':off-screen') // any side of the viewport

Each filter returns true if #element's bottom edge is 1px or more past the specified side of the viewport.

Bootstrap 3 dropdown example

This example will keep Bootstrap 3 dropdowns from going off the right side of the screen.

$('.dropdown').on('shown.bs.dropdown', function() {

    var dropdown = $(this),
        menu = dropdown.find('.dropdown-menu');

    // Restore to default position
    menu.removeClass('dropdown-menu-right');

    // Adjust if it's off the screen
    if( menu.is(':off-right') ) {
        menu.addClass('dropdown-menu-right');
    }

});

License

Copyright Cory LaViska for A Beautiful Site, LLC

License: http://opensource.org/licenses/MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.