Execute A Fucntion When An Element Gets Visible - jQuery visibilityChanged

visibilityChanged is a lightweight and cross-browser jQuery plugin that determines if a specific element is visible and executes a callback function when the element gets hidden or visible in DOM.

See also:

• Execute A Function When An Element's Visibility Changes - jQuery scrollIntoView
• Detect Visibility Change On DOM Element - jQuery HideShow

How to use it:

1. Put jQuery JavaScript library and the jQuery visibilityChanged plugin's script at the bottom of your web page.

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

2. Call the function on the target element and we're ready to go.

<div class="element">
  ...
</div>

$(function(){

  $("#element").visibilityChanged();

});

3. Detect the visibility changes and trigger a custom function when the elements gets hidden or visible. Possbile parameters:

• element: target element
• visible: true = visible; false = hidden
• initialLoad: true = trigger the function for the first time on the element

$("#element").visibilityChanged({
  callback: function(element, visible, initialLoad) {
    // do something
  },
});

4. Decide whether to detect the visibility changes on page load.

$("#element").visibilityChanged({
  callback: function(element, visible, initialLoad) {
    // do something
  },
  runOnLoad: true
});

5. Specify how offen to detect the visibility changes.

$("#element").visibilityChanged({
  callback: function(element, visible, initialLoad) {
    // do something
  },
  frequency: 100
});

---

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