Make one element disappear when another element disappears

Question

Context: I am making a small jQuery library for modals (in-window popups): https://github.com/hypesystem/d_modal.js

When creating a new modal, it is possible to also fade the page. This is done by adding a div with a semi-transparent black background.

When the modal is removed I want the "fade" to disappear as well. But not just when the modal is .remove()'d - I want the fade to disappear in the same way as the modal on any action that makes the modal disappear: fadeOut(), hide(), etc.

Here is a jsFiddle to test in (if you have any ideas): http://jsfiddle.net/n5fqS/

What I'm looking for is one solution that handles all the cases.

The second div will always have the class `.blackness`, but there may be several of it (if several modals with fade exist). But you should be able to assume that it is just called `#div-two` as in the fiddle - at the time of creation I have a reference to the unique DOM element. — Niels Abildgaard, Jan 12 '14 at 18:15
Update: Potential solution, hiding the original jQuery implementation: http://stackoverflow.com/a/2857952/1080564 - this seems very cumbersome. — Niels Abildgaard, Jan 13 '14 at 14:24

score 0 · Answer 1 · answered Jan 12 '14 at 18:58

there are many ways of hidding elements (removing content of div, changing css "display" property, fadeOut(), hide(), etc, etc) and Jquery does not have a universal event listener that would group all these events. I think you will have to manually trigger a "hide" event as a callback function in all the places where your first div is being hidden. For example:

$(".dismiss").click(function() {
    $("#div-one").hide(function(){
          $(this).trigger('hide');
    });
});

Then you only have to have once the event handler:

$("#div-one").on('hide', function(){ 
        //code that hides my second div 
)};

Of course, you will have to manually add the trigger every place where relevant. So its not "the one solution".

I got that far earlier. Again, the question is if a general purpose solution exists. Your answer is "not as far as I know". Well, not as far as I know, either... but this doesn't get me any further :) Thanks for your time, though. — Niels Abildgaard, Jan 12 '14 at 19:32

score 0 · Answer 2 · answered Jan 13 '14 at 07:11

0

you can use jquery dialog to achieve this functionality.

answered Jan 13 '14 at 07:11

Premshankar Tiwari

3,006
3
24
30

Thanks for the pointer, but this isn't really a solution for my question. I will look into how jQuery UI does it, though. – Niels Abildgaard Jan 13 '14 at 13:46
Update: Actually, jQuery UI dialogs do __not__ provide the functionality I am asking for. See http://jsfiddle.net/7LQhP/1/ - when calling `hide()` on the dialog, only the inner text is hidden, and definitely not the fade in the background. jQuery UI forces you to use their own handlers. – Niels Abildgaard Jan 13 '14 at 14:09

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

The short answer seems to be: jQuery does not emit events on hide.

In order to combat this, I have used the best solution I could find, and started an open project to enable sending of the required events: https://github.com/hypesystem/showandtell.js

This should cover, at the moment, the most common use-cases. Any feedback on this is appreciated.

edited May 23 '17 at 12:14

Community

1
1

answered Jan 13 '14 at 17:20

Niels Abildgaard

2,662
3
24
32

score -1 · Answer 4 · answered Jan 12 '14 at 18:02

-1

try like this

$(".dismiss").click(function() {
    $("#div-one").hide(function(){
          $("#div-two").hide('slow');
    });
});

answered Jan 12 '14 at 18:02

Ravi

853
8
17

As I specified, I would like one solution that works for every case. With your answer I would have to make a handler for each of the cases. – Niels Abildgaard Jan 12 '14 at 18:03

Make one element disappear when another element disappears

4 Answers4