EasyBB
EasyBB

Reputation: 6554

Testing if elements are hidden

Ok guys so I am testing if elements are hidden, problem is if the parent element is hidden then the children are considered hidden as well so the line that I append is being appending even if the children elements that aren't technically "display:none"

function checkIfVisible() {
  var checkLeft= $('#left').children('.module').filter(':hidden');
  if(checkLeft.length > 0) {
   if(!$('.resetLeft').length) {
      left.prepend('<span class="resetLeft">Reset Left Widgets</span>');
    } 
  }

I run this script on page load, and when ever any of the children elements are clicked to be hidden. How do I stop the script from assigning the prepended element from being added if the parent elements is hidden but none of the children are hidden (Display:none) in style?

So basically.

If #left is hidden (parent) and none of the children are I don't want the resetLeft to be prepended. But if #left is hidden and 1 or more of the children of it are display:none then prepended. even if left isn't hidden I need to this work as well.

Upvotes: 2

Views: 138

Answers (2)

EasyBB
EasyBB

Reputation: 6554

I took what Blender sort of said to do but I changed it around to work just the way I wanted. I used the && and logical operator...

function checkIfVisible() {
 var checkLeft=  
    $('#left').is(':visible')
    &&
    $('#left').children('.module').filter(':hidden').length > 0;
   if(checkLeft) {
       if(!$('.resetLeft').length) {
      left.prepend('<span class="resetLeft">Reset Left Widgets</span>');
     }
   }

This worked wonderfully for me, and all I did was add the function to the click function of showing the #left element!

Upvotes: 1

Blender
Blender

Reputation: 298176

This should do it:

var visible = $('#left').is(':hidden') && $('#left').children('.module').filter(function() {
    return this.style.display === 'none';
}).length === 0;

But this seems like a hack. Why are you forced to do this?

Upvotes: 3

Related Questions