detecting display of element?

[resin]

How can I allow a jQuery function to execute only if a certain div is displayed (or hidden)?

[AndrewGSW]

if ($('#somediv').css('display') != 'none' && $('#somediv').css('visibility') != 'hidden') {
    // function or call
}

[VIPStephan]

It’s even easier than this, depending on what you’re trying to do:

PHP Code:

$('#example:visible').blah… 


or

PHP Code:

if($('#example:visible').length) {
  // stuff…
} 


or

PHP Code:

if($('#example').is(':visible')) {
  // stuff…
} 


[AndrewGSW]

:visible is actually looking for display:none (and a couple of other circumstances) but (I understand) considers visibility: hidden as still being visible - since it still occupies space in the layout?!

I suppose most of the time this is not a concern as people tend to be confirming the application of show() or hide().

[VIPStephan]

Oh, you’re right. But let’s let the OP decide what works best for them.

[resin]

The :visible method will work fine in this case, but Andrew's method is not working for me, seems the if statement is being completely ignored and the function executes as if it weren't there. I was looking forward to using that method for other css properties as well, might you know why it isn't working?

[AndrewGSW]

The if statement won't be ignored, it's just not meeting the conditions.

Try using alerts (or console.log) to check what these values are:

window.alert($('#somediv').css('display'));
window.alert($('#somediv').css('visibility'));

.. and, of course, you've modified '#somediv' to the correct id for your own div element?

[VIPStephan]

If you do what Andrew suggested in the previous post you’ll see that the alert is giving the value of the attribute. That way you can check what comes out and whether it matches the condition.