Detect when a div tag is on screen or off screen.

Using JQuery determine if a matching item is on screen or off screen. This demonstrates creating custom selector filters and that applying multiple filters in a selector works.

by Brian Layman

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<button id="button1">Change colors</button>
<span id="resultY"></span>
<span id="resultB"></span>
<button id="button2">Change onscreen yellow to blue</button>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br/>
<br/>
<br/>

CSS

div {
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px;
    float: left;
    border: 2px blue solid;
    text-align: center;
    clear:both;
  }
  
  button {
        clear:both;
        display: block;
  }
  
  #resultY {
    color: yellow;
    background-color: black;
  }
  
  #resultB {
    color: blue;
    background-color: white;  
  }

JavaScript

$.expr[':'].onscreen = function(elem) {
  var rect = elem.getBoundingClientRect();

  return ( ( rect.right > 0 ) &&
					 ( rect.bottom > 0 ) &&
					(rect.left < window.innerWidth ) && 
          ( rect.top < window.innerHeight )
		);

};


$.expr[':'].offcreen = function(elem) {
  var rect = elem.getBoundingClientRect();

  return ( ( rect.right < 0 ) ||
			( (rect.bottom ) < 0 ) ||
			( rect.left > window.innerWidth ) || 
      ( rect.top > window.innerHeight ) 
		);

};

$.expr[':'].yellow = function(elem) {
  return $(elem).css("background-color") === "rgb(255, 255, 0)";
};

$.expr[':'].blue = function(elem) {
	return $(elem).css("background-color") === "rgb(0, 0, 255)";
};

function updateElementCount(){
    var numElems = $("*:yellow").length;
    $("#resultY").html(numElems);
    var numElems = $("*:blue").length;
    $("#resultB").html(numElems);
}
updateElementCount();

$( "#button1" ).click(function() {
	$( "div:onscreen" ).css( "backgroundColor", "yellow" );
	$( "div:offcreen" ).css( "backgroundColor", "blue" );
  updateElementCount();
});
$( "#button2" ).click(function() {
	$( "div:onscreen:yellow" ).css( "backgroundColor", "blue" );
  updateElementCount();
});