FireFox warning "Unknown pseudo-class or pseudo-element 'hidden' " keeps running over and over

Question

Hello

I recently have discovered a warning happening in Firefox that says

Warning: Unknown pseudo-class or pseudo-element 'hidden'

Here is page http://eleven23.net/eleven23/beta/work/web/lounge22.php

And the warning happens when it gets to the part of javascript that has img:hidden

$('img:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one i++;//add 1 to the count

So Im wondering if anyone has an idea on how to resolve this warning.

Thanks!

Answer 1

Unfortunately this is a bug within JQuery itself. See: http://docs.jquery.com/Selectors/hidden

Check firebug, even on their example page you get this same warnring. It referes to a non-existing CSS pseudo-class :hidden. Where you are using $('img:hidden')

Answer 2

The first step is to really stop the repeated calling of doThis() via setInterval which at the moment doesn't happen. Thus the warning appears every 500ms.

Change

$(document).ready (function() {
  var int = setInterval("doThis(i)",500);
});

to

$(document).ready (function() {
  int = setInterval("doThis(i)",500);
});

Else your call to clearInterval(int) won't do anything as you declared var int twice and try to clear the "outer" int which isn't the interval.

After this fix only 4-5 of this warning should remain in your console.

---

Now to your error. There isn't much you can do to stop this error from appearing exactly that many times you call doThis().

jQuery uses Sizzle internally as selector engine. And in some cases Sizzle tries to use (on browsers supported) the querySelectorAll() function to find the elements matching your selector.

Now AFAIK is hidden not a valid CSS selector thus although Firefox supports the call to querySelectorAll() it correctly fails after encountering an unknown selector. jQuery catches the error and then does the selection of image:hidden itself.

If you don't want to see this error at all you can use a different jQuery syntax which in this case would stop Sizzle from trying to attempt to use querySelectorAll().

Change

$('img:hidden').eq(0).fadeIn(500);

to

$('img:hidden', $('div#content_wrapper')).eq(0).fadeIn(500);

But I don't advise you to do this as it doesn't really get you much only 4-5 warnings less in your console.