🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The jQuery Offscreen library provides a set of filters to determine if any part of your element is out of view (is invisible on the screen).

Viewport

Documentation

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


You May Also Like