Emulating jQuery :visible selector with plain Javascript

Question

I am converting a piece of code from jQuery to ChocolateChip UI, and this piece of code is stumping me as ChocolateChip UI doesn't support ':visible' for its implementation of is()

if (interactive && block.is(':visible')) {
            block.fadeOut(250, function() {
                block.html(newContent);
                block.fadeIn(750);
            });
            showHighlight($("#character_text"));
}

The error I get is:

Uncaught SyntaxError: Failed to execute query: ':visible' is not a valid selector.

Two questions:

How can I emulate is(':visible') using plain JavaScript?
How can I extend ChocolateChip UI's is() to handle :visible?

if(document.getElementById("elementId").style.visibility=="visible"){ // do something } — Adnan K., Nov 29 '13 at 08:03
I assume that doesn't work because `:visible` is an extension by jQuery. So you might run into the same issue with other selectors. jQuery actually does a couple of things to determine whether an element is visible, which is explained in the documentation: http://api.jquery.com/visible-selector/. — Felix Kling, Nov 29 '13 at 08:03
@AdnanK: That is not sufficient. The element might be styled through stylesheets and it might not have the `visibility` rule set but is visible nonetheless. — Felix Kling, Nov 29 '13 at 08:04
*"In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0"* — Denys Séguret, Nov 29 '13 at 08:10
Possible duplicate of [non-jQuery equivalent of :visible in JavaScript?](https://stackoverflow.com/questions/9637943/non-jquery-equivalent-of-visible-in-javascript) — user, Sep 22 '17 at 01:54

score 11 · Answer 1 · answered Nov 29 '13 at 08:10

11

As an answer on your first question:

In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0. (source)

So

$(element).is(":visible")

Should be the same as

(element.offsetWidth > 0 || element.offsetHeight > 0)

answered Nov 29 '13 at 08:10

Pieter De Bie

1,074
13
30

1

Be aware this works exactly like jQuery, therefore `"Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout."` – jave.web Aug 20 '22 at 12:17

score 4 · Accepted Answer · edited May 23 '17 at 11:58

As an answer to your second question :

ChocolateChip UI does not seem to offer a way to extend selectors. The code for the .is() function shows that, when the selector is a string, this string is directly fed to .querySelectorAll().

However, you can also pass a function as an argument, so using the predicate Pieter de Bie pointed out, you can write :

$.fn.extend({
   isVisible: function(){
       return this.is( function(elem){
           return elem.offsetWidth > 0 || elem.offsetHeight > 0;
       });
   }
});

if ( $('.mySelector').isVisible() ){
    ....
}

Another solution is to use jQuery : the authors stipulate that their library should be compatible with jQuery > 2.0.3 (see the project's Readme).

Emulating jQuery :visible selector with plain Javascript

2 Answers2

Linked