Event listener for changing attribute in a div through javascript

Question

My div looks like the following:

<div id="modal"
     style="position: fixed;
       left: 0px;
       top: 0px;
       width: 100%;
       height: 100%;
       opacity: 0.4;
       background-color: rgb(204, 204, 204);
       display: block;
       z-index: 99;">
</div>

I want something to happen when my div changes to (note: display block has changed to none):

<div id="modal"
     style="position: fixed;
       left: 0px;
       top: 0px;
       width: 100%;
       height: 100%;
       opacity: 0.4;
       background-color: rgb(204, 204, 204);
       display: none;
       z-index: 99;">
</div>

I was thinking about a EventListener, does anybody have any idea how to get this working?

I have no working code, I puzzled with the div but i ain't got it working, so I was wondering if there is anybody with an idea about where i should be looking for. — Markie Doe, Dec 20 '16 at 09:45
How is the css of the div going to change? through some script? — Anupam, Dec 20 '16 at 09:47
Yes. It's a clickable table with records, and when a record is doubleclicked it changes the div. — Markie Doe, Dec 20 '16 at 09:49
Then why dont you "do your task" in that event only. Call a function when record is clicked — Anupam, Dec 20 '16 at 09:50
Wouldn't you listen for a doubleclick if a doubleclick is needed to change said div? — zer00ne, Dec 20 '16 at 09:51
@anu and zer00ne are right. The event you need to listen for is the record double-click. Since you know that *is* the event that changes the div styles, it can also serve as the event to listen for. — Rounin, Dec 20 '16 at 09:52
Yes i thought the same, but it's complex code and i've been trying alot to get that working, but i didn't manage to fix it on that way yet. But I will try some more. — Markie Doe, Dec 20 '16 at 09:55
Well, share some relevant markup and script code. Maybe people here can help then. — Anupam, Dec 20 '16 at 09:57
there are lots of third party editable table javascript libraries -- why re-invent the wheel? — mike510a, Dec 20 '16 at 09:57
@MarkieDoe - see my answer below for the simplest way I can think of to implement this kind of setup. — Rounin, Dec 20 '16 at 09:59

score 1 · Answer 1 · answered Dec 20 '16 at 09:53

1

You could use a MutationObserver

Something like

var target = document.getElementById('modal');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === 'style') {
      ...
    }
  });    
});

answered Dec 20 '16 at 09:53

Ovidiu Dolha

5,335
1
21
30

This is super useful information, however it could be more complete. Look at [this SO post too](https://stackoverflow.com/questions/41424989/javascript-listen-for-attribute-change) – StvnBrkdll Mar 10 '22 at 18:20

score 0 · Answer 2 · answered Dec 20 '16 at 09:57

You can listen out for the double click and then execute:

one function to change the CSS; and
another function for whatever is supposed to happen after the CSS changes

Example:

var records = document.getElementsByClassName('record');

function changeCSS() {

    [... CODE HERE...]

}

function doSomethingElse() {

    [... CODE HERE...]

}

for (var i = 0; i < records.length; i++) {
    var record = records[i];
    record.addEventListener('dblclick', function(){changeCSS(); doSomethingElse();}, false); 
}

score 0 · Answer 3 · answered Dec 20 '16 at 09:58

Add the following script in your code. You have to use set interval or timeout function to display div as a none.

Below I have used setTimeout() function, so after 2 seconds 'display : none' style get applied to the div.

 $(document).ready(function(){           
           setTimeout(function () {
               $('#modal').css('display','none');
            }, 2000);

       });

score 0 · Answer 4 · answered Dec 20 '16 at 10:47

If there is already a double click event happening when the user clicks the table, you can listen to that event with the .dblclick(function()

For example:

Script:

   $(document).ready(function(){
        $("#modal").dblclick(function(){
            $(this).toggleClass('newClass');
        });
    });

CSS:

.newClass
{
     width:100%,
     height:100%,
     background-color: rgb(204, 204, 204);
     ...
     ...
 }

score 0 · Answer 5 · answered Dec 20 '16 at 10:55

If you want to toggle between the display show and hide, then uncomment the commented tags. Also make "$('div#modal').on('click', function() {" and "$('div#modal').hide();" as comment

   $('div#modal').show();
    // $('button').on('click',function(){
   $('div#modal').on('click', function() {
     //$(this).css("display","none");
     //event.stopPropagation();
     //$('div#modal').toggle();
     $('div#modal').hide();
   })

<div id="modal" style="position: fixed;
           left: 0px;
           /*top: 50px;*/
           top:0px;
           width: 100%;
           height: 100%;
           opacity: 0.4;
           background-color: rgb(204, 204, 204);
           z-index: 99;">
</div>
<br>
<!--<button>Click</button>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Good Luck!!!

Event listener for changing attribute in a div through javascript

5 Answers5