Search jQuery

jQuery Forum

:visible selector

in Using jQuery • 11 years ago

Hi!

As last question regarding :visible selector was two years ago (and frankly wasn't dealing with the problem), let me open up a new topic.

I've been working on adding my own expressions, as ":visible" takes into account only elements that consume space in the layout - fair enough. However, should an element that has position: absolute, clip: (0px 0px 0px 0px) be considered taking up the space?

A quick test:

<html>
      <head>
            <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
      </head>
      <body>
            <div class='abc' style='position: absolute; clip: rect(0 0 0 0)'><div class='def'>#</div></div>
            <script type='text/javascript'>
                $(document).ready(function()
                {
                    console.log($(".def").is(":visible"), $('.abc').is(':visible'));
                })
            </script>

      </body>
</html>

outputs true for both elements.

Replies(7)

jakecigar

Re: :visible selector

11 years ago

It exists, it is visible. Therefore it is :visible.

It’s just like a string that equals "". It is still a string. Or the object that equals {}. It’s still an object.

Of course I realize you want to change the behavior of :visible, but that would put a burden on the 99.99999% of users who don’t fit your use case.

I suggest you test for a 0 0 0 0 clipped rect the hard way.

JΛ̊KE

eithed

Re: :visible selector

11 years ago

Of course I've created my own expression to test for I want to test for :)

If I've not made myself clear enough it's not an issue of visibility - it's an issue of wording. Considering that :visible affects elements that still occupy space in the layout I can see no reason why here the behavior would be different than for display: none.

I agree that changing it doesn't make sense. I find it funny though that it's something that didn't come up :)

<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
</head>
<body>
<div class='abc' style='width: 0px; height: 0px'></div>
<div class='def' style='display: inline'></div>
<script type='text/javascript'>
$(document).ready(function()
{
console.log($('.abc').is(':visible'), $('.def').is(':visible'));
})
</script>

</body>
</html>

outputs false for both elements even though they exists and are visible by your definition :P

As for strings and objects - it's not so easy, I'm afraid. String is an object in Javascript, but it's also a string, but doing something like $.isEmptyObject("") returns correctly true, but I can do "".split(','), but it should be empty! :D

jakecigar

Re: :visible selector

11 years ago

:visible is not defined as "occupy space in the layout". Sorry.

JΛ̊KE

eithed

Re: :visible selector

11 years ago

Let's quote!

Elements are considered visible if they consume space in the document

Kevin B

Re: :visible selector

11 years ago

So, write your own selector that does what you want it to do.

What you consider visible or not visible is not exactly the same as what jQuery considers visible.

Think about the possibilities. A div that is absolutely positioned behind another element. How are you going to be able to figure out that that div is not visible? it has a width, a height, and is display: block, and is within the browser's viewport.

I think getting every possible way for an element to be visible or not visible covered by a single method is asking for trouble.

If it can be easily done without over-bloating the current method, Great!

As far as checking for clip, yeah that doesn't sound like a bad idea.

-- Kevin

Kevin B

Re: :visible selector

11 years ago

here's a small snippet that adds clip detection into :visible http://jsfiddle.net/he6L8/2/ however, i have no idea how cross-browser it is due to hardcoding rect(0px 0px 0px 0px) into it.

-- Kevin

eithed

Re: :visible selector

11 years ago

I don't have problems with absolutely positioned elements, or elements outside the viewport of the browser - they do consume space after all.

Other quirky things:

<html>
      <head>
            <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
      </head>
      <body>
            <div class='abc' style='position: absolute; width: 0px; height: 0px; overflow: hidden'><div class='def' style='width: 50px; height: 50px'>#</div></div>
            <div class='ghi' style='outline: 10px solid #ff0000; width: 0px; height: 0px'></div>
            <script type='text/javascript'>
                $(document).ready(function()
                {
                    console.log($(".abc").is(":visible"), $('.def').is(':visible'), $('.ghi').is(':visible'));
                })
            </script>

      </body>
</html>

outputs false, true, false.

I don't have problems how jQuery works, I don't have problems with what it considers visible, or not - it's working for majority of people! I'm saying that documentation is not precise and if I want to do something I can't look at the documentation, but figure out what's happening from the code and what kind of styling might not be affected by it, as shown with all the above examples. If it were written "a :visible selector affects elements that have bounding box dimensions greater than 0" I'd be satisfied: in the clip bounding box has width: 0px / height: 0px - the content of it would be considered visible, but not the container (the same for outline example).

Edit: As I've said, I've written my own expression:

$.expr.filters.concealed = function( elem ) {
        return ($(elem).add($(elem).parents('*')).filter(function()
        {
            return $(this).css('opacity') == 0 || $(this).css('visibility') == 'hidden' || ($(this).css('position') == 'absolute' && $(this).css('clip') == 'rect(0px, 0px, 0px, 0px)');
        }).length > 0 || $.expr.filters.hidden(elem));
    };

Dunno however how buggy is it ;) Thanks for trying though :)

Top Reply

Response title

Attachments

jQuery Forum

:visible selector

Replies(7)

Re: :visible selector

Re: :visible selector

Re: :visible selector

Re: :visible selector

Re: :visible selector

Re: :visible selector

Re: :visible selector

Statistics

Tags

Actions

Related Posts