I am building a toolbar that is going to be included into a page. the div
is going to be included in will default to display: none
.
Is there any way I can put an event listener on my toolbar to listen for when it becomes visible so it can initialize?
or will I have to pass it a variable from the containing page?
-
Does this answer help? stackoverflow.com/questions/1397251/…– kangaxSep 23, 2009 at 3:46
-
@kangax, thank you. But since its not widely implemented I think I'm going to scratch the whole event listener idea and go a different route.– JD IsaacksSep 23, 2009 at 12:51
-
See this answer for an implementation of an "onVisible" event in JavaScript: stackoverflow.com/a/3807340/975097– Anderson GreenApr 3, 2013 at 2:33
-
possible duplicate of How to implement an 'onVisible' event in Javascript?– userApr 8, 2014 at 6:31
-
Could see this please. stackoverflow.com/questions/45429746/…– Varun SharmaAug 2, 2017 at 8:38
11 Answers
Going forward, the new HTML Intersection Observer API is the thing you're looking for. It allows you to configure a callback that is called whenever one element, called the target, intersects either the device viewport or a specified element. It's available in latest versions of Chrome, Firefox and Edge. See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API for more info.
Simple code example for observing display:none switching:
// Start observing visbility of element. On change, the
// the callback is called with Boolean visibility as
// argument:
function respondToVisibility(element, callback) {
var options = {
root: document.documentElement,
};
var observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
callback(entry.intersectionRatio > 0);
});
}, options);
observer.observe(element);
}
In action: https://jsfiddle.net/elmarj/u35tez5n/5/
-
3> The Intersection Observer API allows you to configure a callback that is called whenever one element, called the target, intersects either the device viewport or a specified element;– stilNov 14, 2017 at 16:24
-
1Note that the InteractionObserver does not work on Safari at the moment. caniuse.com/#feat=intersectionobserver It looks like there is a patch in progress. bugs.webkit.org/show_bug.cgi?id=159475 May 26, 2018 at 23:15
-
14When is IE's lack of support for anything cool like this going to stop ruining our lives? Aug 3, 2018 at 22:27
-
14
-
7
var targetNode = document.getElementById('elementId');
var observer = new MutationObserver(function(){
if(targetNode.style.display != 'none'){
// doSomething
}
});
observer.observe(targetNode, { attributes: true, childList: true });
I might be a little late, but you could just use the MutationObserver to observe any changes on the desired element. If any change occurs, you'll just have to check if the element is displayed.
-
14This does not work when the targetNode is not displayed because an ancestor is not displayed but then gets displayed. Dec 18, 2018 at 0:40
-
Upvoted! I used this in another stackoverflow answer: stackoverflow.com/questions/48792245/… Dec 20, 2018 at 21:28
-
Unfortunately, this only works when using inline styles on the element, not when the change is a result of change of CSS-class (which is the more likely scenario, given that in the former situation you probably already have full programatic control). Fiddle that shows the issue: jsfiddle.net/elmarj/uye62Lxc/4. See here for a more complete discussion of how to observe style-changes: dev.to/oleggromov/observing-style-changes---d4f Apr 26, 2019 at 15:24
-
Actually the correct Observer to use here would be an
IntersectionObserver
- stackoverflow.com/a/52627221/2803743– kanoDec 17, 2019 at 15:57 -
1This solution is useful for when you want to toggle an element on and off, and have no direct control of that element, and want to react to the display value change May 4, 2020 at 12:38
If you just want to run some code when an element becomes visible in the viewport:
function onVisible(element, callback) {
new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.intersectionRatio > 0) {
callback(element);
observer.disconnect();
}
});
}).observe(element);
if(!callback) return new Promise(r => callback=r);
}
When the element has become visible (event slightly) the intersection observer calls callback
and then destroys itself with .disconnect()
.
Use it like this:
onVisible(document.querySelector("#myElement"), () => console.log("it's visible"));
or like this:
await onVisible(document.querySelector("#myElement"));
console.log("it's visible");
If you want the callback to trigger when the element becomes fully visible then you should change entry.intersectionRatio > 0
to entry.intersectionRatio === 1
.
If the element is already visible when you call onVisible
, then the callback will fire immediately.
Related: If you want to immediately get a true
or false
for whether the element is currently visible, use this code (change the intersectionRatio
to suit your requirements).
-
3
-
1
There is at least one way, but it's not a very good one. You could just poll the element for changes like this:
var previous_style,
poll = window.setInterval(function()
{
var current_style = document.getElementById('target').style.display;
if (previous_style != current_style) {
alert('style changed');
window.clearInterval(poll);
} else {
previous_style = current_style;
}
}, 100);
The DOM standard also specifies mutation events, but I've never had the chance to use them, and I'm not sure how well they're supported. You'd use them like this:
target.addEventListener('DOMAttrModified', function()
{
if (e.attrName == 'style') {
alert('style changed');
}
}, false);
This code is off the top of my head, so I'm not sure if it'd work.
The best and easiest solution would be to have a callback in the function displaying your target.
-
2Interesting, thank you. A few years later, the status of DOMAttrModified has changed: "Deprecated. This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped." (Mozilla) Jun 29, 2017 at 11:26
-
2
I had this same problem and created a jQuery plugin to solve it for our site.
https://github.com/shaunbowe/jquery.visibilityChanged
Here is how you would use it based on your example:
$('#contentDiv').visibilityChanged(function(element, visible) {
alert("do something");
});
-
12
As @figha says, if this is your own web page, you should just run whatever you need to run after you make the element visible.
However, for the purposes of answering the question (and anybody making Chrome or Firefox Extensions, where this is a common use case), Mutation Summary and Mutation Observer will allow DOM changes to trigger events.
For example, triggering an event for a elements with data-widget
attribute being added to the DOM. Borrowing this excellent example from David Walsh's blog:
var observer = new MutationObserver(function(mutations) {
// For the sake of...observation...let's output the mutation to console to see how this all works
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// Notify me of everything!
var observerConfig = {
attributes: true,
childList: true,
characterData: true
};
// Node, config
// In this case we'll listen to all changes to body and child nodes
var targetNode = document.body;
observer.observe(targetNode, observerConfig);
Responses include added
, removed
, valueChanged
and more. valueChanged
includes all attributes, including display
etc.
-
Probably because he wants to know when it is actually on screen. I do, I can only assume the downvoter has the same reason. Oct 31, 2017 at 0:17
-
Doesn't answer the question, and posting only links isn't advised. Nov 11, 2017 at 21:24
-
@AlexHolsgrove I've added an example, from the link. Since the poster talks about adding a toolbar to the page, it seems like they might be adding a toolbar to a third party page and waiting for an element to be added to the DOM, in which case Mutations is the best API. Nov 13, 2017 at 13:18
-
Note that this still does not cover that part that explains where in the mutation observation process "visibility" comes in. Oct 8, 2019 at 21:47
A simple solution to this which works even for nested elements is to use the ResizeObserver.
It should work in all modern browsers (https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API).
When an element has css rule display: none
applied to it (whether directly or via an ancestor element) then all of its dimensions will be zero. So in order to detect becoming visible we just need an element with non-zero dimensions when visible.
const element = document.querySelector("#element");
const resizeWatcher = new ResizeObserver(entries => {
for (const entry of entries) {
console.log("Element", entry.target,
(entry.contentRect.width === 0) ?
"is now hidden" :
"is now visible"
)
}
});
resizeWatcher.observe(element)
-
1This is best because waiting for an element to intersect with the viewport means you can't style until the user scrolls to it. Sounds like nothing major, but there's a difference between styling while the page is scrolling versus styling the moment the element is sized. Using
ResizeObserver
works around the issue of Web Components being defined out of order. Sometimes the element isn't sized yet whenconnectedCallback
is fired. Mar 16 at 20:32
Just to comment on the DOMAttrModified event listener browser support:
Cross-browser support
These events are not implemented consistently across different browsers, for example:
IE prior to version 9 didn't support the mutation events at all and does not implement some of them correctly in version 9 (for example, DOMNodeInserted)
WebKit doesn't support DOMAttrModified (see webkit bug 8191 and the workaround)
"mutation name events", i.e. DOMElementNameChanged and DOMAttributeNameChanged are not supported in Firefox (as of version 11), and probably in other browsers as well.
Source: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events
-
Use
MutationObserver
instead. Mutation Events are deprecated. stackoverflow.com/questions/20420577/… Feb 18 at 19:10
Expanding on Elmar's earlier answer, I used this to put focus on an input box in a Bootstrap navbar submenu.
I wanted the focus to go on the search box when the menu was expanded. .onfocus() wasn't working, I think because the element isn't visible at the time the event is triggered (even with the mouseup event). This worked perfectly though:
<ul class="navbar-nav ms-auto me-0 ps-3 ps-md-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" title="Search" id="navbardrop" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-search"></i>
</a>
<div class="dropdown-menu dropdown-menu-end search-menu">
<form action="{% url 'search' %}" method="get">
<div class="form-group row g-1 my-1 pb-1">
<div class="col">
<input type="text" name="query" id="searchbox" class="form-control py-1 ps-2" value="{% if search_query %}{{ search_query }}{% endif %}">
</div>
<div class="col-auto">
<input type="submit" value="Search" class="btn-primary form-control py-1">
</div>
</div>
</form>
</div>
</li>
</ul>
Then in the js:
respondToVisibility = function (element, callback) {
var options = {
root: document.documentElement,
};
var observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
callback(entry.intersectionRatio > 0);
});
}, options);
observer.observe(element);
};
respondToVisibility(document.getElementById("searchbox"), (visible) => {
if (visible) {
document.getElementById("searchbox").focus();
}
});
Javascript events deal with User Interaction, if your code is organised enough you should be able to call the initialising function in the same place where the visibility changes (i.e. you shouldn't change myElement.style.display
on many places, instead, call a function/method that does this and anything else you might want).
-
10But how would you be able to detect the change in visibility (i. e., call a function as soon as an element becomes visible)? Apr 3, 2013 at 2:15
-
I thiiiink you can't do that. What you would do instead of trying to detect the change, is knowing exactly where it is provoked, and put your call there. If the change in visibility is not something your own code is directly responsible for (e.g. some lib) and the logic by which that happens is very contrived, I guess you're out of luck? :)– maltalefApr 3, 2013 at 10:10
-
6I downvoted this question because despite all the sense it makes, it's irrelevant to the actual issue. (if I display none on a frame, all children elements become invisible)– SebasJan 11, 2016 at 0:54
-
2@Sebas, I don't really understand why the visibility of the children matters here. Anyway, if the answer wasn't useful for you particular case (whatever it might be) but points to a solution (or explanation why there isn't a solution) for most programmers, it's still a valid answer in my humble opinion. If you like better one of the other answers (especially one that was made at a later time, when technology improved and new options became available), I believe that a request to change the correct answer would be more appropriate than a downvote. In any case, thanks for the heads-up :)– maltalefJan 13, 2016 at 21:31
-
2@figha, not the children, but if the element you're watching is in a frame that is displayed=none, you won't have any sign of it.– SebasJan 13, 2016 at 23:16
my solution:
; (function ($) {
$.each([ "toggle", "show", "hide" ], function( i, name ) {
var cssFn = $.fn[ name ];
$.fn[ name ] = function( speed, easing, callback ) {
if(speed == null || typeof speed === "boolean"){
var ret=cssFn.apply( this, arguments )
$.fn.triggerVisibleEvent.apply(this,arguments)
return ret
}else{
var that=this
var new_callback=function(){
callback.call(this)
$.fn.triggerVisibleEvent.apply(that,arguments)
}
var ret=this.animate( genFx( name, true ), speed, easing, new_callback )
return ret
}
};
});
$.fn.triggerVisibleEvent=function(){
this.each(function(){
if($(this).is(':visible')){
$(this).trigger('visible')
$(this).find('[data-trigger-visible-event]').triggerVisibleEvent()
}
})
}
})(jQuery);
for example:
if(!$info_center.is(':visible')){
$info_center.attr('data-trigger-visible-event','true').one('visible',processMoreLessButton)
}else{
processMoreLessButton()
}
function processMoreLessButton(){
//some logic
}
-
5You should tell everyone that you've used the original jQuery's code, it would inspire more confidence ;)– aemongeSep 8, 2014 at 15:54
-
3
-
1