Detect Visibility Change On DOM Element - jQuery HideShow

Detect Visibility Change On DOM Element - jQuery HideShow

HideShow is a jQuery visibility detection plugin that watches DOM visibility changes and fires an event when the DOM is shown or hidden.

1. Insert the minified version of the jQuery HideShow plugin after jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="js/hideshow.min.js"></script>

2. Detect for visibility change on DOM for attached elements:

<div id="test_hidden" style="display: none;">
  <h3>This div will fire hidden shown events.</h3>
</div>
$("#test_hidden").hideShow(function(e){
  console.log($(this).is(":visible"));
})
$("#test_hidden").hideShow().on("visibilityChanged", function(event,visibility){
  console.log(visibility);
})
$("#test_hidden").hideShow(function(e, visibility){
  alert("Element " + visibility)
})
$("#test_hidden").hideShow();
$("#test_hidden").on("visibilityChanged", function(event, visibility){
  alert("Element " + visibility)
})
$("#test_hidden").hideShow(function(e, visibility){
  console.log(e, visibility);
})

This awesome jQuery plugin is developed by pratik916. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 31.01.2018
  • Source