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