Asked  6 Months ago    Answers:  5   Viewed   21 times

Is there any way that I can check if an element is visible in pure JS (no jQuery) ?

So, for example, in this page: Performance Bikes, if you hover over Deals (on the top menu), a window of deals appear, but at the beginning it was not shown. It is in the HTML but it is not visible.

So, given a DOM element, how can I check if it is visible or not? I tried:

window.getComputedStyle(my_element)['display']);

but it doesn't seem to be working. I wonder which attributes should I check. It comes to my mind:

display !== 'none'
visibility !== 'hidden'

Any others that I might be missing?

 Answers

39

According to this MDN documentation, an element's offsetParent property will return null whenever it, or any of its parents, is hidden via the display style property. Just make sure that the element isn't fixed. A script to check this, if you have no position: fixed; elements on your page, might look like:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    return (el.offsetParent === null)
}

On the other hand, if you do have position fixed elements that might get caught in this search, you will sadly (and slowly) have to use window.getComputedStyle(). The function in that case might be:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

Option #2 is probably a little more straightforward since it accounts for more edge cases, but I bet its a good deal slower, too, so if you have to repeat this operation many times, best to probably avoid it.

Tuesday, June 1, 2021
 
RompelStompel
answered 6 Months ago
23

According to the documentation for that plugin, .visible() returns a boolean indicating if the element is visible. So you'd use it like this:

if ($('#element').visible(true)) {
    // The element is visible, do something
} else {
    // The element is NOT visible, do something else
}
Tuesday, June 1, 2021
 
joostvandriel
answered 6 Months ago
59

This is a very good answer, but here's a modified version of the Viewport plugin you mentioned.

(function($) {

$.belowthefold = function(lookIn, elements, settings) {
    var fold = $(lookIn).height() + $(lookIn).scrollTop();
    return $(elements).filter(function(){
        return fold <= $(this).offset().top - settings.threshold;
    });
};

$.abovethetop = function(lookIn, elements, settings) {
    var top = $(lookIn).scrollTop();
    return $(elements).filter(function(){
        return top >= $(this).offset().top + $(this).height() - settings.threshold;
    });
};

$.rightofscreen = function(lookIn, elements, settings) {
    var fold = $(lookIn).width() + $(lookIn).scrollLeft();
    return $(elements).filter(function(){
        return fold <= $(this).offset().left - settings.threshold;
    });
};

$.leftofscreen = function(lookIn, elements, settings) {
    var left = $(lookIn).scrollLeft();
    return $(elements).filter(function(){
        return left >= $(this).offset().left + $(this).width() - settings.threshold;
    });
};

})(jQuery);

With HTML like this:

<div id="lookInMe">
    <div class="peek"></div>
    <div class="peek"></div>
    [ ... ]
</div>

Call it like this:

$.belowthefold("#lookInMe", ".peek", {threshold : 0}).text("Below");
$.abovethetop("#lookInMe", ".peek", {threshold : 0}).text("Above");
$.leftofscreen("#lookInMe", ".peek", {threshold : 0}).text("Left");
$.rightofscreen("#lookInMe", ".peek", {threshold : 0}).text("Right");

http://jsfiddle.net/daCrosby/vhF7x/1/

Saturday, August 14, 2021
 
Bob
answered 4 Months ago
Bob
48

This error is not a bug. The same-origin policy is a security mechanism that ensures that window objects only have access to the informations they are authorized to get. In your case, this includes having access to opened.location.

Upon creation, both tabs have the same origin, which allows the first one to access opened.location. But after the call to document.domain='www.google.com', they don't anymore.

"What? But in both tabs, window.location.origin are identical"

Yes, but it is a little bit more complex. The origin is defined by the scheme/host/port tuple, see @TheUnknown's answer for more details. The scheme and host stay the same all along, and they're the one included in the string of window.location.origin.

The tricky thing to know is that any call to document.domain, including document.domain = document.domain, causes the port number to be overwritten with null, therefore causing a difference in the two tabs' origins, and preventing them from communicating informations like opened.location with one another, thus the error.

Informations extracted from MDN's guide on same-origin policy

Saturday, October 9, 2021
 
Scott Chantry
answered 2 Months ago
76

It seems that the following piece of code works great:

var doc = document.implementation.createHTMLDocument("");
doc.documentElement.innerHTML = htmlBody;
var text = $(doc).find('#theElementToFind').text();

external resources aren't loaded, scripts aren't being evaluated.

Found it here: https://stackoverflow.com/a/9251106/95624

Origin: https://developer.mozilla.org/en/DOMParser#DOMParser_HTML_extension_for_other_browsers

Saturday, October 16, 2021
 
Xel
answered 2 Months ago
Xel
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share