Emulating jQuery :visible selector with plain Javascript
chocolatechip-ui, javascript, jquery
Solution
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).
Problem
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`?