onHide() type event in jQuery

Question

Does anyone know of an onHide() event or something similar in jQuery?

I tried:

$(this).bind('hide', function(){
    console.log('asdasda')
})

But apparently that doesn't work.

Edit:
Just to clarify, it's being hidden using CSS display:none.
I'm aware of the callback function but as I'm not hiding it (the CSS is) I can't use it. For what it's worth, I need to check when a dropdown is visible. It's being shown by the following CSS:

ul li:hover ul {
    display: block;
}

http://stackoverflow.com/questions/941113/jquery-javascript-dom-visibility-event — Robert Harvey, May 18 '10 at 14:00

score 75 · Answer 1 · answered May 18 '10 at 14:03

75

There isn't a native or built in "hide" event but if you are using jQuery to hide it you can easily add a hide event:

var _oldhide = $.fn.hide;
$.fn.hide = function(speed, callback) {
    $(this).trigger('hide');
    return _oldhide.apply(this,arguments);
}

answered May 18 '10 at 14:03

PetersenDidIt

25,562
3
67
72

Unfortunately I'm not hiding it, it's being hidden by my CSS. – Sam May 18 '10 at 14:16
This is quite a cool hack, but personally Id rather override core jq – John Dec 05 '12 at 17:13
Cool as long as the element is hidden using `$.hide()`; – Mister Smith Jul 12 '13 at 12:12
1

I have started a project on GitHub to provide a more general-purpose solution: https://github.com/hypesystem/jquery.hide-event.js – Niels Abildgaard Jan 13 '14 at 17:21
1

I think [this](https://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/) is a slightly more elegant version of the same solution, as it doesn't leave a var hanging around. Plus one for early delivery! – wordragon Sep 16 '18 at 14:23

score 16 · Answer 2 · answered Oct 22 '15 at 09:07

16

You can pass call back function in hide function.

function iAmCallBackForHide() { 
             alert('I am visible after hide'); 
}
$('#clickMeToHide').hide( iAmCallBackForHide );

answered Oct 22 '15 at 09:07

Faisal Ahsan

928
1
12
22

This is the most proper answer. bang bang! – plushyObject May 09 '17 at 18:18
This is nice, just bear in mind that when you specify a callback function to hide (or show) they become animation functions with a default duration of 400ms. Specify `0` if that's a problem: `$('#clickMeToHide').hide( 0, iAmCallBackForHide );` – rc_luke Apr 22 '20 at 11:45

sohtimsso1970 · Accepted Answer · 2010-05-18T15:11:43.583

11

There is no "hide" event for any HTML element in the DOM. How are you "hiding" your elements? Are you using CSS to change the display or visibility?

If you're using display:none to hide an element, you can't detect when CSS changes. In IE, you can detect when a property changes but that doesn't extend to style values. You'll need to throw an event or do whatever the event is doing at the time the CSS display is changed.

edited May 18 '10 at 15:11

answered May 18 '10 at 14:03

sohtimsso1970

3,216
4
28
38

1

Using [MutationObservers](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) it is now possible to listen to changes of attributes on dom nodes, including the style and class attribute I believe...so the answer to the question should be *yes*. – dan-man Dec 29 '13 at 19:37
If you are using jQuery's `.css('display','none')` it should be supported in https://github.com/hypesystem/jquery.hide-event.js - just listen for "hide" events. – Niels Abildgaard Jan 13 '14 at 17:23

score 5 · Answer 4 · answered Jun 28 '12 at 12:58

5

For anyone finding this post two years later:

You know exactly when the menu is visible, right?! The CSS rule tells you. So instead of relying on onShow or onHide events, you can recreate the very same rule using jQuery and rely on the very same 'hover event':

$('ul li').hover(function () {
    // Whatever you want to do 'onShow'
}, function () {
    // Whatever you want to do 'onHide'
});

Also, your script now acts independent of any stylesheet, so that presentation details do not dictate website behavior (nice).

answered Jun 28 '12 at 12:58

5

This solution works if the the mouse is the only input. If the application supports a keyboard or touch interface then it's not sufficient. – jbustamovej Oct 10 '13 at 21:58
True, @jbustamovej, but the li:hover from the question will not work either. Good point though. – Jul 31 '14 at 19:42

score 3 · Answer 5 · answered Nov 16 '16 at 21:59

3

In jQuery 3 exposes a "hide" and "show" events.

$(document).on("hide", function() { 
    console.log("browser page has been hidden");
});

answered Nov 16 '16 at 21:59

trn

76
3

2

This is nice, but I am not running 3, but this is good for futuristic folks :D – plushyObject May 09 '17 at 18:19

Pratik Soni · Answer 6 · 2017-02-27T06:41:48.123

I have recently made a plugin to detect when an element gets hidden or shown in any way ( by core javascript or inspector or jQuery hide / show ).

pratik916/jQuery-HideShow

This extension keeps watching on element for visibility change. once changed it will emmit an event where you can handle your stuff

$("#test_hidden").hideShow(function(e, visibility){
    if(visibility == "shown") {
        console.log("Element is visible");
    } else {
        console.log("Element is hidden");
    }
})

score 2 · Answer 7 · answered Feb 11 '18 at 20:05

2

Easy-pizy, use DOM mutation observers for this:

JS:

var observer = new MutationObserver(function(mutations) {
    console.log('div hide event fired!');
  });
  var target = document.querySelector('.mydiv');
  observer.observe(target, {
    attributes: true
  });

HTML:

<div class='mydiv'>
</div>

Here's the fiddle https://jsfiddle.net/JerryGoyal/qs01umdw/2/

answered Feb 11 '18 at 20:05

GorvGoyl

42,508
29
229
225

This triggers on each change of that div. It will also trigger if you change e.g. the CSS or add a class. In order for it to trigger only on e.g. a class change, you'll need to add conditions: `if(mutations.attributeName === "class" && mutations.classList.contains("hidden") {` ... Not *that* Easy-pizy, but still doable. – berkes Jan 12 '21 at 16:47

score 0 · Answer 8 · edited May 23 '17 at 11:54

0

This can be useful on some use cases: Using waitUntilExists jquery plugin (How to wait until an element exists?) you can detect when the value changes:

$(li:hidden).waitUntilExists(function(){                        
   // your code when it is hidden 
}, /*onlyOnce = */ true);

I used it for detecting when a loading gif was hidden.

edited May 23 '17 at 11:54

Community

1
1

answered Nov 14 '14 at 18:51

Paco Zarate

1,925
1
15
13

onHide() type event in jQuery

8 Answers8

Linked