-2

I am having trouble detecting when a button's visibility is dynamically hidden as per element.css("visibility","hidden"). I'm using the code below but seems I'm missing something:

var invisible = $('#next-button').filter(function() {
return ($(this).parent().css('visibility') == 'inline'
&& ($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none'));
});

setTimeout(function(){if ( invisible ) {
alert('not visible');
}}, 1000);

The button's visibility is dynamically hidden after a Youtube API 3 channel search finds the last video of a Youtube channel. The button visibility is hidden to preserve its layout between other display:inline visible elements, as opposed to display:none which cannot be used in the inline layout. The alert always triggers regardless if the button's visibility is hidden or not. I also tried if ( invisible == true ) and no alert pops up, and no errors in console. Am I missing something? Thx for pointers.

koolness
  • 166
  • 19
  • According to jQuery specs, "Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout." Maybe the filter method isn't helpful after all? – koolness Jan 03 '15 at 19:47
  • Perhaps it's best to read the fine print before downvoting needlessly? – koolness Jan 03 '15 at 20:41

1 Answers1

0

Finally, a working solution thanks to Barney Scott's answer found in jQuery detect visible but hidden elements which I've adapted for my needs: 

$('#button-placeholder:visible').find('#next-button').each(function(){
if ($(this).css('visibility') !== 'visible') {
alert('The visible parent contains an invisible child button that has layout');
}
});
Community
  • 1
  • 1
koolness
  • 166
  • 19