
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:
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.
- Publication date: 23.03.2018
- Source