Question

Some introduction:
Hello, i wanted to ask, if there is an easy way, to know how many of “tabs” are visible for user when he clicks on some button?

Description of what i have so far:
http://jsfiddle.net/L7bPc/7/
Here, on jsfiddle, you can see example of tabs i am thinking of, when you widen or narrow the width, more or less tabs are visible (rest disappears thanks to “overflow:hidden;”).

Question:
My question is, is there any easy way to get to know, how many tabs are visible once clicking on red square in top right corner?

Explanation of what i want to achieve:
Why? Because i will try to generate a list of “not visible” tabs, once clicked on red square later (i will style it properly ofcourse). I want it to look similar to many programs with tabs, when there are too many of them, you can find a little arrow on the end of it, to expand the rest of tabs, in drop down menu.
I am asking how to know how many tabs are visible, and how many not (so i know which to generate after clicking on it in dropdown), i am NOT asking how to create the dropdown.

This part is generated by php, getting data from MySQL database, and style them in css to look like tabs (i didn’t use php in jsfiddle, just plain html):

<div class="tabs">
    <ul>
        <li id=090NCI class='active'><a href='#' class='active'><span class='active'>090NCI</span></a></li>
        <li id=061PPP><a href='#'><span>061PPP</span></a></li>
        <li id=072KWM><a href='#'><span>072KWM</span></a></li>
        <li id=057ALS><a href='#'><span>057ALS</span></a></li>
        <li id=099AKG><a href='#'><span>099AKG</span></a></li>
        <li id=090WPW><a href='#'><span>090WPW</span></a></li>
        <li id=020MSM><a href='#'><span>020MSM</span></a></li>
        <li id=014LSP><a href='#'><span>014LSP</span></a></li>
        <li id=010AAV><a href='#'><span>010AAV</span></a></li>
        <li id=080MKS><a href='#'><span>080MKS</span></a></li>
        <li id=006ALS><a href='#'><span>006ALS</span></a></li>
        <li id=007KSG><a href='#'><span>007KSG</span></a></li>
        <li id=091AOW><a href='#'><span>091AOW</span></a></li>
        <li id=004ALO><a href='#'><span>004ALO</span></a></li>
        <li id=003WWW><a href='#'><span>003WWW</span></a></li>
        <li id=002KSO><a href='#'><span>002KSO</span></a></li>
        <li id=001NWD><a href='#'><span>001NWD</span></a></li>   
    </ul>
    <div style="position: absolute; right:5px; top:26px; background: red; color:red; width:20px; height: 20px;" onclick="dosomething()"></div>
</div>

Any tips? Solutions might be both, in jQuery and javascript, no big difference for me.

Answer 1

Try this:

$("#redbox").click(function() {

    var visibleLis = $("li").filter(function() {
        var offset = $(this).offset();
        return $(document.elementFromPoint(offset.left, offset.top)).closest(this).length > 0;
    });

    alert(visibleLis.length);
});

http://jsfiddle.net/L7bPc/11/

If you defined the .tabs to fully vertically contain the tabs, you can use far more optimized version:

$("#redbox").click(function() {

    var boundingBox = $(".tabs")[0].getBoundingClientRect(),
        bbRight = boundingBox.left + boundingBox.width,
        bbBottom = boundingBox.top + boundingBox.height,
        bbLeft = boundingBox.left,
        bbTop = boundingBox.top;

    var visibleLis = $("li").filter(function() {
        var box = this.getBoundingClientRect(),
            left = box.left,
            top = box.top,
            right = box.left + box.width,
            bottom = box.top + box.height;
        return left >= bbLeft && right <= bbRight && top >= bbTop && bottom <= bbBottom;
    });

    alert(visibleLis.length);
});

http://jsfiddle.net/L7bPc/13/