off-screen check ?

asked 2013-11-05 12:50:45 +0800

sitansu gravatar image sitansu
2254 13

updated 2013-11-05 12:52:45 +0800

I need to check with jQuery if a DIV element is not falling off-screen. The elements is visible and displayed according CSS attributes but could be intentionally placed off-screen by:

position: absolute; 
left: -1000px; 
top: -1000px;

I could not use the jQuery :visible selector as element has 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.

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2014-01-19 09:18:34 +0800

sitansu gravatar image sitansu
2254 13

write a check to see if it's offscreen :

jQuery.expr.filters.offscreen = function(el) {
  return (
              (el.offsetLeft + el.offsetWidth) < 0 
              || (el.offsetTop + el.offsetHeight) < 0
              || (el.offsetLeft > window.innerWidth || el.offsetTop > window.innerHeight)

Also use that in several ways:

// returns all elements that are offscreen

// boolean returned if element is offscreen
link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2013-11-05 12:50:45 +0800

Seen: 16 times

Last updated: Jan 19 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More