CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Markie Doe
Markie Doe

Reputation: 125

Event listener for changing attribute in a div through javascript

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?

Upvotes: 1

Views: 2459

Answers (5)

Pawan
Pawan

Reputation: 565

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!!!

Upvotes: 0

Rhaebosis
Rhaebosis

Reputation: 57

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);
     ...
     ...
 }

Upvotes: 0

Learner
Learner

Reputation: 281

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);

       });

Upvotes: 0

Rounin
Rounin

Reputation: 29493

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); 
}

Upvotes: 0

Ovidiu Dolha
Ovidiu Dolha

Reputation: 5413

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') {
      ...
    }
  });    
});

Upvotes: 1

Related Questions