If all overlays closed, then execute function

Question

I have a button on a banner at the top of my page that launches several yui2 overlays on to the screen. Each overlay has a close button on it (which just changes the visibility to hidden so it can be reused). After the overlays are launched, there is also a button on the banner that appears will close all overlays if clicked.

This gives the use the option to close all or close each one individually. This is what i am stuck on:

If the user closes an individual overlay, after I close the overlay, I want to check if any other overlay is still open. If they happen to have closed all of them individually, then I need to revert the banner at the top and remove the "close all button".

I can search for all overlays by doing a:

var elements = YAHOO.util.Dom.getElementsByClassName('test');

I cant think of the logic I would need to do to go through that array each time they close an overlay to see all of them are set to visibility if hidden. If so, then execute a function. If there is still any overlays visible on the page, then do nothing.

This is the answer I came up with. Just not sure if it is correct.

 var elements = document.getElementsByClassName('test');
 var visiblecounter = 0;
 for (var i = 0; i < elements.length; i++) {
    if(elements[i].style.visibility!='hidden'){
      alert("not hidden");  
      visiblecounter ++;    
     }     
  }
     ​
if(visiblecounter > 0){
    alert("all overlays are closed individually. you can remove close all button");
} 

Answer 1

You mention you are reusing those overlays so since you are pooling the overlays for reuse, I assume you have them in an array or something like that. Instead of checking the DOM (which is always expensive) to see if they are visible or not, loop through the array of overlays checking the visible attribute, like:

   var anyVisible = false;
   for (i = 0; i < myOverlays.length; i+=1) {
        anyVisible |= myOverlays[i].cfg.getProperty("visible");
   }

If any of them are visible, disable the button.

Answer 2

I am not sure I get the question, but I will try my best to help. Here are some things I would do. I also define an active class, so my HTML elements would be written as this:

<div class="john active"></div>

and in my css I would write.

.john {display: none};
.active {display: block};

So by default the object is hidden! But when you append the "active" class to it, it appears on the screen. So now we can do the following wizardry.

$(".hideButton").click(function() {
    $(this).removeClass("active");
});

If I want to hide all the other objects, assuming that they have the same parent in the DOM

$(".hideOthersButton").click(function() {
    $(this).siblings().removeClass("active");
});

if I want to hide all objects that share the same parent.

$(".hideEverything").click(function() {
    $(".parent").children().removeClass("active");
});

I hope this helps! let me know if you need more help. The solution uses Jquery but you can repurpose the logic for anything else.