Geek Answers Handbook

How to determine if a link is hidden in the twitter bootstrap routine navigation bar with jQuery or vanilla JS

I had a problem detecting the visibility of a navigation link inside a custom twitter navigation bar when it is in a folded state.

The root of the problem is that the .collapsed div has an overflow: a hidden rule set for it. This means that although the ul navigation has non-zero dimensions, it is still hidden because the .collapse container has zero height (set in the style attribute in the closed state).

The problem is that if # some-nav-link is one of the li elements in .nav ul, it will match $ ('# some-nav-link: visible') because it does not know that the element is hidden overflow.

Is there any evidence that you can check the visibility of an element that could explain this?

I tried relying on elementFromPoint using the li $ .fn.offset () method, but it is not good enough in cases where li will have some addition, for example, in this case the FromPoint element returns one of li's parents.

NOTE. - My code is third-party code on the corresponding website, so I can’t change anything about how the navigation bar works.

IMPORTANT UPDATE I'm looking for a solution that is independent of the mechanics of how twitter bootstrap crashes. This is a general solution to the problem of determining the visibility of an element located in the overflowing part of a child overflow element: hidden. I felt that it would be better to connect this with the specific problem that caused this question, but if the current issue is considered confusing, I am ready to reconsider it. I hope this update is enough, though.

Thanks for reading, I look forward to some smart decision!

Here is a fiddle showing validation: visible returns true when minimized - http://jsfiddle.net/VDR3Y/

+4
source share
3 answers

Implementing the :visible selector for jQuery requires that both width and value be set to 0 for any ancestors. Otherwise, your source code would work.

AFAIK there is no selector that will do this directly, so a custom function may be required:

 (function () { function isCollapsed(element) { var $e = $(element); return $e.width()*$e.height() === 0; } $.fn.isReallyVisible = function () { var $this = $(this).filter(':visible'); // if jQuery says its not visible, trust it, otherwise // check if any of the parents are collapsed return $this ? !$this.parents().toArray().some(isCollapsed) : false; }; })();

This will handle your cases when your parents crumble.

 $('#some-nav-link').isReallyVisible();

Jsfiddle

You may need to add more to handle the overflow, but since this was not in the OP, I believe this will work for now.

+5
source

Check this box

 $('div.nav-collapse.in').length > 0 ? 'links are visible' : 'links are not visible'
+1
source

For everyone who is interested, I moved on to another solution based on document.elementFromPoint.

 (function($) { function checkFromPoint(index) { var $e = $(this); var fromPoint = document.elementFromPoint($e.offset().left + $e.width() / 2, $e.offset().top + $e.height() / 2); return $e.get(0) == fromPoint || $e.has(fromPoint).length; } $.fn.isReallyVisible = function() { var $this = $(this).filter(':visible'); return $this.length ? !!$this.filter(checkFromPoint).length : false; }; }(jQuery));

I updated jsfiddle where you can see it at work.

0
source

More articles:


All Articles