Checking inherited visibility of DOM element with jQuery - javascript

If I have the HTML below:
<div style="display:none;">
<span id="hello">Hey</span>
</div>
And I do alert($("#hello").css("display"));, it will say "inline". The span is clearly not visible, but since it doesn't directly have a display:none; property on it, it still says it's viewable.
How do I test whether a certain DOM element is actually visible or not, even if its parent or a parent of its parent is not displaying?

You can use:
if ($('#myitem').is(':visible')){
/*Do some sort of stuff in here */
}
Items still animating (like using .hide or .fadeOut) will be "visible" until the animation is complete

You can use the :visible selector, and the is method:
if($("#hello").is(":visible")) {
//It's visible!
}
The is method returns a boolean value indicating whether or not any of the matched elements match that selector.

Use $(selector).is(':visible')

use the .is() function along with the :hidden or :visible psuedoselectors:
http://jsfiddle.net/jbabey/ucSVx/
$('#hello').is(':hidden')

Related

How do I remove non-visible elements from an entire document?

I want to use Javascript and JQuery to make a copy of the web page's entire html and remove all elements that are not visible to the user. This is what I've tried so far:
$('html').not(':visible').remove()
However, it does not seem to work. Does anyone know how I can accomplish this?
Right now you are only targeting the <html> element with your selector. You need to iterate through all the elements and check their visibility like this:
$('*').each(function(){
if($(this).not(':visible')){
$(this).remove();
}
});
Even more concise would be to just target hidden elements and remove them as such:
$('*:hidden').remove();
The jQuery API reference states that elements are considered visible if they take up space in the document. So elements that have a height and width greater than 0 are considered visible. This means we should instead look at the computed CSS if you are having issues with the above code removing things that are visible.
$('*').each(function(){
if($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none'){
$(this).remove()
}
});
you are removing html elements which are not visible. you should remove its children.
try this
$('html').children().not(':visible').remove()
EDIT:
as Barmar said this only removes immediate children of html. use other answers to remove all elements.
This should do it:
$("body :hidden").remove();

Using querySelector to Find Descendant Elements Returns Unexpected Results

So I've been playing around with querySelector recently and noticed some really odd behaviour when trying to select descendant elements.
Take the following markup as an example:
<div id="parent">
<div id="foo">
<div id="bar"></div>
</div>
</div>
If I want to query this DOM tree from the context of the #parent element, I may do the following:
var parent = document.getElementById('parent');
parent.querySelector('div')
This returns the #foo element as expected. Now, if I wanted to get the #bar element by only referencing tag names, I could do either of these:
var parent = document.getElementById('parent');
parent.querySelector('div div')
parent.querySelector('div > div')
Instead, both selector strings return the #foo element, not the #bar element? However, changing the contextual element (#parent) to a span fixes the issue? It seems as if the contextual element influences how it interprets the selector string. Alternatively, jQuery's selector engine performs as expected.
I created a CodePen that illustrated the problem.
I don't think this is a bug because the results are consistent in multiple browsers (I'm using Chrome 37). I suppose my question is; am I missing something? Is this part of the spec? Does anyone have an explanation for this behaviour?
Any insight would be appreciated, thanks,
Ryan
Per the docs, "Selectors are evaluated against a given element in the context of the entire DOM tree in which the element is located."
That is, it's not a jQuery-style "find an element matching the selector path starting here".
#parent #foo definitely matches div div and div > div, when viewed from the DOM tree level, per the spec.
It "works" when you change #parent to a span because #parent #foo no longer matches div div, and #foo #bar is the new first match.

Determine which element is first and do this

I need to set focus on the first form element or class of ".focus"; whichever is visible or first.
This does not seem to sort through each to determine which comes first?
http://jsfiddle.net/infatti/tdvHJ/1/
$('.focus:visible:first, body:not(:has(.focus:visible)) input:visible:first, body:not(:has(.focus:visible)) textarea:visible:first').focus();
This will locate all visible input elements, textarea elements and .focus elements:
$('input:visible, .focus:visible, textarea:visible')
It will also have them ordered according to their order in the DOM, so the first of those elements in the document will be the first in the jQuery object. To access the first:
$('input:visible, .focus:visible, textarea:visible').eq(0);
and to focus on it:
$('input:visible, .focus:visible, textarea:visible').eq(0).focus();
Note that, as I just found out, jQuery considers elements to be 'visible' if they take up space in the document. So elements with visibility:hidden or opacity:0 will still be considered visible:
http://api.jquery.com/visible-selector/
Like this ?
$('.focus:visible:first, body:not(:has(.focus:visible)) input:visible:first, body:not(:has(.focus:visible)) textarea:visible:first').eq(0).focus();
Fiddle :
http://jsfiddle.net/infatti/tdvHJ/1/
Eq(0) select the first element... ;)
Try:
$('.focus:visible:first').filter(":input").focus();
jsFiddle example
im not sure what you are trying to achieve as there isnt any elements with the class focus. Simply add the class focus to your input element and then us
$('.focus').focus();

Will jQuery select hidden elements

If I call .hide() on an element, will/can jQuery select it in a normal dom selector.
If jQuery does normally select hidden elements, what is the proper way to select only visible elements. Can I use a css selector, or is there a more valid way of doing this?
Yes. The hide function only stores the current value of the display css property of your element, then set it to none. So the dom selectors will not be affected by it unless they try to match elements with a particular display css value.
Check it here.
Have a look at the jQuery hide function documentation.
Yes it will count hidden elements.
Yes, it just adds a display:none style to the element... .remove() on the other hand will not show up in counts. But that completely gets rid of it, and unless you store the value somewhere it is not retrievable.
What I'm assuming you want to do is to count the visible items. I would instead do the following:
$('.element').addClass('hide');
var count_of_visible_items = $('.element:not(".hide")').length;
console.log(count_of_visible_items);

How can I test if an element is already visible?

In the HTML code, I use jQuery to hide or display an element having an ID. How can I test if an element is already visible?
For example, we use show() to display an element having an ID. But before calling show(), I need to test whether show() has been already used for that ID then how to compare?
$('#element').is(':hidden'); // boolean
If the element is visible, show() won't do anything, so it's pretty low risk. However, you can use the :visible or :hidden selector to find visible elements.
$('#myId:visible').hide();
$('#myId:hidden').show();
Using this in your selector, you can just fire off the show and hide methods and not worry about what is visible or not, because if you try to hide a :hidden element, you won't select anything so you won't do anything.

Categories