ℹ️ Skipped - page is already crawled
| Filter | Status | Condition | Details |
|---|---|---|---|
| HTTP status | PASS | download_http_code = 200 | HTTP 200 |
| Age cutoff | PASS | download_stamp > now() - 6 MONTH | 0 months ago |
| History drop | PASS | isNull(history_drop_reason) | No drop reason |
| Spam/ban | PASS | fh_dont_index != 1 AND ml_spam_score = 0 | ml_spam_score=0 |
| Canonical | PASS | meta_canonical IS NULL OR = '' OR = src_unparsed | Not set |
| Property | Value |
|---|---|
| URL | https://remysharp.com/2008/10/17/jquery-really-visible |
| Last Crawled | 2026-04-12 02:40:08 (3 hours ago) |
| First Indexed | 2016-07-15 02:32:10 (9 years ago) |
| HTTP Status Code | 200 |
| Meta Title | jQuery *really* :visible |
| Meta Description | On a project I worked with Paul Irish on recently we found that we needed to asset whether an element was visible, but the :visible selector doesn't always do … |
| Meta Canonical | null |
| Boilerpipe Text | On a project I worked with
Paul Irish
on recently we found that we needed to asset whether an element was visible, but the
:visible
selector doesn't always do the job.
MY EBOOK
£5 for Working the Command Line
Gain command-line shortcuts and processing techniques, install new tools and diagnose problems, and fully customize your terminal for a better, more powerful workflow.
£5 to own it today
Update:
As of jQuery 1.3.2 this is no longer a problem or required. See
Paul's comment
below.
The Problem with :visible
The
:visible
selector works fine if you're asking whether the particular element has been set to invisible (either via the
display
or
visibility
CSS style).
However, if the element is hidden because a parent element is set to hidden, the
:visible
selector returns a false positive.
Solution
If you want to know whether the element is truly visible, you need to step through the parent elements to be 100% sure.
You can do this via a macro selector too:
jQuery.extend(
jQuery.expr[ ":" ],
{ reallyvisible : function (a) { return !(jQuery(a).is(':hidden') || jQuery(a).parents(':hidden').length); }}
);
See the working example
(
source
)
An important note: I tried overloading the
:visible
selector using this new
:reallyvisible
and it actually breaks the show/hide functions within jQuery - so don't go renaming it! |
| Markdown | - [Home](https://remysharp.com/)
- [Search](https://remysharp.com/2008/10/17/jquery-really-visible#search)
- [Previous](https://remysharp.com/2008/10/06/js-bin-for-collaborative-javascript-debugging "JS Bin for Collaborative JavaScript Debugging")
- [Next](https://remysharp.com/2008/10/24/a-friday-meme-how-did-you-get-started "A Friday Meme: How did you get started?")
# [jQuery \*really\* :visible](https://remysharp.com/2008/10/17/jquery-really-visible "Permanent Link: jQuery *really* :visible")
On a project I worked with [Paul Irish](http://paulirish.com/) on recently we found that we needed to asset whether an element was visible, but the `:visible` selector doesn't always do the job.
[ MY EBOOK**£5 for Working the Command Line** Gain command-line shortcuts and processing techniques, install new tools and diagnose problems, and fully customize your terminal for a better, more powerful workflow. **£5 to own it today**](https://ko-fi.com/s/57e38e71bb)
**Update:** As of jQuery 1.3.2 this is no longer a problem or required. See [Paul's comment](https://remysharp.com/2008/10/17/jquery-really-visible#comment-135222) below.
## The Problem with :visible
The `:visible` selector works fine if you're asking whether the particular element has been set to invisible (either via the `display` or `visibility` CSS style).
However, if the element is hidden because a parent element is set to hidden, the `:visible` selector returns a false positive.
## Solution
If you want to know whether the element is truly visible, you need to step through the parent elements to be 100% sure.
You can do this via a macro selector too:
```
jQuery.extend(
jQuery.expr[ ":" ],
{ reallyvisible : function (a) { return !(jQuery(a).is(':hidden') || jQuery(a).parents(':hidden').length); }}
);
```
[See the working example](https://jsbin.com/ageta) ([source](https://jsbin.com/ageta/edit))
An important note: I tried overloading the `:visible` selector using this new `:reallyvisible` and it actually breaks the show/hide functions within jQuery - so don't go renaming it\!
Published 17-Oct 2008 under \#code & \#jquery & \#selector. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/jquery-really-visible.md)
## Archives
- [All years](https://remysharp.com/archive)
- [2026](https://remysharp.com/2026)
\#6
- [2025](https://remysharp.com/2025)
\#22
- [2024](https://remysharp.com/2024)
\#15
- [2023](https://remysharp.com/2023)
\#21
- [2022](https://remysharp.com/2022)
\#16
- [2021](https://remysharp.com/2021)
\#29
- [2020](https://remysharp.com/2020)
\#37
- [2019](https://remysharp.com/2019)
\#59
- [2018](https://remysharp.com/2018)
\#26
- [2017](https://remysharp.com/2017)
\#36
- [2016](https://remysharp.com/2016)
\#61
- [2015](https://remysharp.com/2015)
\#33
- [2014](https://remysharp.com/2014)
\#26
- [2013](https://remysharp.com/2013)
\#21
- [2012](https://remysharp.com/2012)
\#12
- [2011](https://remysharp.com/2011)
\#15
- [2010](https://remysharp.com/2010)
\#24
- [2009](https://remysharp.com/2009)
\#25
- [2008](https://remysharp.com/2008)
\#60
- [2007](https://remysharp.com/2007)
\#85
- [2006](https://remysharp.com/2006)
\#40
## Links
- [About Remy](https://remysharp.com/about)
- [Work with Remy](https://remysharp.com/work)
- [Speaking & Training](https://remysharp.com/speaking)
- [Links](https://remysharp.com/links)
- [Things I Fixed](https://remysharp.com/tif)
- [Things I Learned](https://remysharp.com/til)
- [Books I've Read](https://remysharp.com/books)
- [Ethos](https://remysharp.com/ethos)
- [House Rules](https://remysharp.com/house-rules)
- [The Attic](https://remysharp.com/attic)
- [On GitHub](https://github.com/remy)
- [On Twitter](https://twitter.com/rem)
- [RSS feeds](https://remysharp.com/feeds)
- **[Search](https://remysharp.com/search)**
## Remy Sharp [Follow **rem**](https://bsky.app/profile/remysharp.com) [3,472 followers](https://bsky.app/profile/remysharp.com)
I'm a JavaScript developer working professionally on the web since 1999. I run my own [consultancy](https://remysharp.com/work), build products, run training, speak at conferences and curate the UK's best [Web & JavaScript conference](https://ffconf.org/). You can **[hire me](https://remysharp.com/work)** too.
## License
All content by [Remy Sharp](https://remysharp.com/) and under [creative commons](http://creativecommons.org/licenses/by-nc-sa/2.0/uk/) and code under [MIT license](http://rem.mit-license.org/).
All code and content for this blog is available as [open source on GitHub](https://github.com/remy/remysharp.com). |
| Readable Markdown | On a project I worked with [Paul Irish](http://paulirish.com/) on recently we found that we needed to asset whether an element was visible, but the `:visible` selector doesn't always do the job.
[ MY EBOOK**£5 for Working the Command Line** Gain command-line shortcuts and processing techniques, install new tools and diagnose problems, and fully customize your terminal for a better, more powerful workflow. **£5 to own it today**](https://ko-fi.com/s/57e38e71bb)
**Update:** As of jQuery 1.3.2 this is no longer a problem or required. See [Paul's comment](https://remysharp.com/2008/10/17/jquery-really-visible#comment-135222) below.
## The Problem with :visible
The `:visible` selector works fine if you're asking whether the particular element has been set to invisible (either via the `display` or `visibility` CSS style).
However, if the element is hidden because a parent element is set to hidden, the `:visible` selector returns a false positive.
## Solution
If you want to know whether the element is truly visible, you need to step through the parent elements to be 100% sure.
You can do this via a macro selector too:
```
jQuery.extend(
jQuery.expr[ ":" ],
{ reallyvisible : function (a) { return !(jQuery(a).is(':hidden') || jQuery(a).parents(':hidden').length); }}
);
```
[See the working example](https://jsbin.com/ageta) ([source](https://jsbin.com/ageta/edit))
An important note: I tried overloading the `:visible` selector using this new `:reallyvisible` and it actually breaks the show/hide functions within jQuery - so don't go renaming it\! |
| Shard | 148 (laksa) |
| Root Hash | 13366540402819987748 |
| Unparsed URL | com,remysharp!/2008/10/17/jquery-really-visible s443 |