How to check if an element is off-screen

Question

I need to check with jQuery if a DIV element is not falling off-screen  The elements are visible and displayed according CSS attributes  but they could be intentionally placed off-screen by   position  absolute   left  -1000px   top  -1000px    I could not use the jQuery  visible selector as the element has a non-zero height and width   I am not doing anything fancy  This absolute position placement is the way my Ajax framework implements the hide show of some widgets

User · Answer

Get the distance from the top of the given element Add the height of the same given element  This will tell you the total number from the top of the screen to the end of the given element  Then all you have to do is subtract that from total document height  jQuery function          var documentHeight   jQuery document  height        var element   jQuery   you-element        var distanceFromBottom   documentHeight -  element position   top   element outerHeight true        alert distanceFromBottom

User · Answer

Depends on what your definition of  offscreen  is  Is that within the viewport  or within the defined boundaries of your page   Using Element getBoundingClientRect   you can easily detect whether or not your element is within the boundries of your viewport  i e  onscreen or offscreen     jQuery expr filters offscreen   function el      var rect   el getBoundingClientRect      return               rect x   rect width   lt  0                   rect y   rect height   lt  0                  rect x  gt  window innerWidth    rect y  gt  window innerHeight                   You could then use that in several ways      returns all elements that are offscreen     offscreen        boolean returned if element is offscreen    div   is   offscreen

User · Answer

Well    I ve found some issues in every proposed solution here    You should be able to choose if you want entire element to be on screen or just any part of it Proposed solutions fails if element is higher wider than window and kinda covers browser window    Here is my solution that include jQuery  fn instance function and expression  I ve created more variables inside my function than I could  but for complex logical problem I like to divide it into smaller  clearly named pieces   I m using getBoundingClientRect method that returns element position relatively to the viewport so I don t need to care about scroll position  Useage       some-element   filter   onscreen   doSomething        some-element   filter   entireonscreen   doSomething        some-element   isOnScreen       true   false     some-element   isOnScreen true      true   false  partially on screen      some-element   is   onscreen       true   false  partially on screen      some-element   is   entireonscreen       true   false    Source     fn isOnScreen   function partial          let s be sure we re checking only one element  in case function is called on set      var t     this  first           we re using getBoundingClientRect to get position of element relative to viewport       so we dont need to care about scroll position     var box   t 0  getBoundingClientRect           let s save window size     var win             h     window  height            w     window  width                 now we check against edges of element        firstly we check one axis       for example we check if left edge of element is between left and right edge of scree  still might be above below      var topEdgeInRange   box top  gt   0  amp  amp  box top  lt   win h      var bottomEdgeInRange   box bottom  gt   0  amp  amp  box bottom  lt   win h       var leftEdgeInRange   box left  gt   0  amp  amp  box left  lt   win w      var rightEdgeInRange   box right  gt   0  amp  amp  box right  lt   win w          here we check if element is bigger then window and  covers  the screen in given axis     var coverScreenHorizontally   box left  lt   0  amp  amp  box right  gt   win w      var coverScreenVertically   box top  lt   0  amp  amp  box bottom  gt   win h         now we check 2nd axis     var topEdgeInScreen   topEdgeInRange  amp  amp    leftEdgeInRange    rightEdgeInRange    coverScreenHorizontally        var bottomEdgeInScreen   bottomEdgeInRange  amp  amp    leftEdgeInRange    rightEdgeInRange    coverScreenHorizontally         var leftEdgeInScreen   leftEdgeInRange  amp  amp    topEdgeInRange    bottomEdgeInRange    coverScreenVertically        var rightEdgeInScreen   rightEdgeInRange  amp  amp    topEdgeInRange    bottomEdgeInRange    coverScreenVertically           now knowing presence of each edge on screen  we check if element is partially or entirely present on screen     var isPartiallyOnScreen   topEdgeInScreen    bottomEdgeInScreen    leftEdgeInScreen    rightEdgeInScreen      var isEntirelyOnScreen   topEdgeInScreen  amp  amp  bottomEdgeInScreen  amp  amp  leftEdgeInScreen  amp  amp  rightEdgeInScreen       return partial   isPartiallyOnScreen   isEntirelyOnScreen         expr filters onscreen   function elem      return   elem  isOnScreen true         expr filters entireonscreen   function elem      return   elem  isOnScreen true

User · Answer

You could check the position of the div using   div  position   and check if the left and top margin properties are less than 0    if   div  position   left  lt  0  amp  amp    div  position   top  lt  0       alert  off screen

User · Answer

No need for a plugin to check if outside of view port   var w   Math max document documentElement clientWidth  window innerWidth    0  var h   Math max document documentElement clientHeight  window innerHeight    0  var d     document  scrollTop       each    div   function        p     this  position          vertical     if  p top  gt  h   d    p top  gt  h - d           console log   this               horizontal     if  p left  lt  0 -   this  width      p left  gt  w           console log   this

User · Answer

I know this is kind of late but this plugin should work  http   remysharp com 2009 01 26 element-in-view-event-plugin      p inview   bind  inview   function  event  visible    if  visible        this  text  You can see me       else       this  text  Hidden again

User · Answer

There s a jQuery plugin here which allows users to test whether an element falls within the visible viewport of the browser  taking the browsers scroll position into account       element   visible      You can also check for partial visibility       element   visible  true     One drawback is that it only works with vertical positioning   scrolling  although it should be easy enough to add horizontal positioning into the mix

[javascript] How to check if an element is off-screen

Examples related to javascript

Examples related to jquery

Examples related to zk