Execute A Fucntion When An Element Gets Visible - jQuery visibilityChanged
File Size: | 2.93 KB |
---|---|
Views Total: | 673 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.