detect visibility status of an element

Question

Hi I would like to detect whether an element is visible or hidden. I thought about this

$("#mobile_navbar:visible").change(function() {
   console.log("detected")
});

but this does not seem to work...? Any ideas how to do this? Basically I what to check whether $("#mobile_navbar").is( ":visible" ) has changed... but I want that a function is called whenever that happens, lick the .click() function which gets triggered if an element is clicked on.
thanks carl

When you say "visible", do you mean the CSS property, or whether it's actually visible on the page? (Obviously it can be hidden by other means) — DBS, Apr 13 '16 at 16:17
what do you want to do exactly? want to detect the change of visibility as an event? — Rajaprabhu Aravindasamy, Apr 13 '16 at 16:18
I want to detect whether $("#mobile_navbar").is( ":visible" ) has changed... — carl, Apr 13 '16 at 16:19
Possible duplicate of [Checking if an element is hidden](http://stackoverflow.com/questions/178325/checking-if-an-element-is-hidden) — IrkenInvader, Apr 13 '16 at 16:20

chetank · Answer 1 · 2016-04-13T16:24:20.840

0

var isVisible = $("#mobile_navbar").css('display');
if(isVisible != 'none') {
   console.log("detected")
};

edited Apr 13 '16 at 16:24

answered Apr 13 '16 at 16:19

chetank

394
3
13

There is no `visible` CSS property, you may be looking for `visibility`. – DBS Apr 13 '16 at 16:20

digode · Answer 2 · 2016-04-13T16:23:33.013

0

If you want to check that the element is visible on the screen, you can do like this :

if($(selector).css('visibility') == 'hidden') {
   doSomething
}
else{
  doSomethingElse
}

edited Apr 13 '16 at 16:23

answered Apr 13 '16 at 16:21

digode

167
9

detect visibility status of an element

2 Answers2