Trigger Events Based On Visibility - jQuery hideShow.js

hideShow.js is a small yet sometimes useful jQuery plugin to fire events when a specific element is hidden or visible in the web page.

See also:

• Execute A Function When An Element's Visibility Changes - jQuery scrollIntoView

How to use it:

1. To use this plugin, first you need to load the hideShow.js script after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="hideshow.min.js"></script>

2. Initialize the plugin and done.

<div id="test_hidden" style="display: none;">
  <h3>This div will fire hidden shown events.</h3>
</div>

$("#test_hidden").hideShow()

3. Trigger a function when the visibility status is changed.

$("#test_hidden").on("visibilityChanged", function(event, visibility){
  alert("Element " + visibility)
})

4. More usages.

$("#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(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.