JQuery visiblechange event

Developer
Andrey Shchekin
Size
3,129 Kb
Views
22,264
  1. JQuery visiblechange event Previews
  2. JQuery visiblechange event HTML Codes
  3. JQuery visiblechange event CSS Codes
  4. JQuery visiblechange event JS Codes

How do I make an jquery visiblechange event?

Limited to the cases when the elements are not moved in the DOM.. What is a jquery visiblechange event? How do you make a jquery visiblechange event? This script and codes were developed by Andrey Shchekin on 15 November 2022, Tuesday.

JQuery visiblechange event Previews
IQ Test

JQuery visiblechange event - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery visiblechange event</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div id="parent"> <div id="child"> </div> </div>
</div>
<div><input type="checkbox" id="show-parent" />Show parent</div>
<div><input type="checkbox" id="show-child" />Show child</div>
<div><input type="checkbox" id="mutation-observer" />MutationObserver</div>
<div>Visible: <output id="visible">false</output></div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery visiblechange event - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body { padding: 20px; font-family: 'Open Sans', 'Segoe UI', sans-serif;
}
input[type=checkbox] { margin-right: 5px;
}
.container { width: 100px; height: 100px; float: left; margin-right: 10px; background: #d1e5fa;
}
#parent { display: none; background: #a2cbf6; margin-top: 10px; margin-bottom: 10px; width: 100px; height: 80px;
}
#child { display: none; width: 80px; height: 80px; margin-left: 10px; margin-right: 10px; background: #74b1f1;
}

JQuery visiblechange event - Script Codes JS Codes

(function($) { $.event.special.visiblechange = (function() { var visibleDataKey = '__visiblechange__.data'; function setup() { var $element = $(this); var visible = $element.is(':visible'); var unobserve = window.MutationObserver ? observeWithMutationObserver($element) : observeWithSetInterval($element); $element.data(visibleDataKey, { unobserve: unobserve, oldVisible: visible }); } function observeWithMutationObserver($element) { var observer = new MutationObserver(function(events) { checkVisible($element); }); $element.parents().addBack().each(function() { observer.observe(this, { attributes: true, attributeFilter: ['style'] }); }); return function() { return observer.disconnect(); }; } function observeWithSetInterval($element) { var timer = window.setInterval(function() { checkVisible($element); }, 500); return function() { window.resetInterval(timer); }; } function checkVisible($element) { var data = $element.data(visibleDataKey); var newVisible = $element.is(':visible'); if (newVisible === data.oldVisible) return; console.log('visiblechange!'); data.oldVisible = newVisible; var event = $.Event("visiblechange"); event.visible = newVisible; $element.trigger(event); } function teardown() { var $element = $(this); var data = $element.data(visibleDataKey); data.unobserve(); $element.data(visibleDataKey, null); } return { noBubble: true, setup: setup, teardown: teardown }; })(); $.fn.visiblechange = function(callback) { this.on('visiblechange', callback); };
})(jQuery);
$('#show-parent').change(function() { $('#parent').toggle(this.checked);
});
$('#show-child').change(function() { $('#child').toggle(this.checked);
});
var $child = $('#child');
function subscribe() { $child.visiblechange(function(e) { $('#visible').val(e.visible); });
}
subscribe();
window._savedMutationObserver = window.MutationObserver;
$('#mutation-observer').each(function() { this.checked = !!window.MutationObserver; this.disabled = !window.MutationObserver;
}).change(function() { window.MutationObserver = this.checked ? window._savedMutationObserver : null; $('#visible').val(''); $child.off('visiblechange'); subscribe();
});
JQuery visiblechange event - Script Codes
JQuery visiblechange event - Script Codes
Home Page Home
Developer Andrey Shchekin
Username ashmind
Uploaded November 15, 2022
Rating 3
Size 3,129 Kb
Views 22,264
Do you need developer help for JQuery visiblechange event?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andrey Shchekin (ashmind) Script Codes
Name
Hexagons
A Pen by Andrey Shchekin
Simple CORS test UI
Diamond-Square Terrain II
Labyrinth 1
Code Loader
Text Effect 1
Click to Shutdown
Wait what
TV Fall
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!