Detect if an element is visible (without using jQuery)

Question

I'm trying to detect if an html element I gave an id is visible or not without using jquery.

The context:

In the forgotten user password page, I have a form where the user enter his login name and clicks on submit. After that, if he has set a challenge question, it will be shown and he will be able to answer this question and submits again. (same button before).

My problem:

when the user clicks on submit, in IE, if he clicks on it several times, he'll get one e-mail for each time he clicks on it.

What I think:

I want to disable the button after clicking on this submit button, but I can only disable it if two conditions are correct:

If the user has already submited his login name (with no errors).
the user has a chalenge question registered and he answered it correctly.

I cannot change the process this is done, so I thought about adding an id in the field of the answer and checks if it's visible. if it is and the user clicks on the submit button, I want to apply the attribute disable button on the label. What I don't know is how to do this without using jquery.

with jQuery I could do something like this:

if($('#secretAns').is(':visible')) {
    //i think it could be the solution 
    $('#general_Submit.Label').attr( disabled, disabled );

}

to apply on:

<div id="secretAns" class="loginTxtFieldWrapper">
    <font color='red'>*</font><input type="text" name="secretAns" />
    <input type="hidden" name="isAnswerPage" value="1"/>
</div>
<p id="loginSubmitLink">
    <input id="general_Submit.Label" type="submit" value="general_Submit.Label" />" />
</p>

I find hard to search for pure Javascript solutions, because everybody tends to use jQuery, and I can't use it in my application, so if someone can help me to do this with pure Javascript, I'll appreciate.

Check the source code of jQuery and see what they are doing with the `:visible` selector. — gdoron, Jan 02 '13 at 12:29
possible duplicate of [Javascript: How to check if element is visible?](http://stackoverflow.com/questions/11391452/javascript-how-to-check-if-element-is-visible) — Ajinkya, Jan 02 '13 at 12:31
@Ajinkya, you noticed that the "duplicate" is a jQuery question, right? — gdoron, Jan 02 '13 at 12:33

gdoron · Accepted Answer · 2013-01-03T18:00:05.363

27

Google helped me finding out how jQuery does it, you can do the same:

In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0.

Release notes

Searching the source code gave me this:

// The way jQuery detect hidden elements, and the isVisible just adds "!".
elem.offsetWidth === 0 && elem.offsetHeight === 0

edited Jan 03 '13 at 18:00

answered Jan 02 '13 at 12:37

gdoron

147,333
58
291
367

@gdoron, nice shot! it's really the way... I'll figure out the solution and publish here when I find it. Thanks. +1 – periback2 Jan 02 '13 at 13:36
I added my answer just to show the solution for my problem, but the answer to the title of my question can be your answer. I just didn't understand how does the offsetwidth or offsetheight are. I understood its way to check visibility, but I'll still search more about it. thanks a lot – periback2 Jan 03 '13 at 11:22
From jQuery source code. https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js#L12 – theeranitp Oct 23 '19 at 12:46
1

@theeranitp, bear in mind, this is almost 7 years old answer, seems they just added `|| elem.getClientRects().length` now. – gdoron Oct 23 '19 at 16:09

score 1 · Answer 2 · answered Jan 02 '13 at 12:45

1

Please see this it's customary seldom code might be useful

<!DOCTYPE html>
<html>
<body>
<div id="one" style="visibility: hidden;">The content of the body element is displayed in your browser.
</div>

<div id="two" style="visibility: visible;"> I'm Cool
</div>

<div onclick="push();"> Click me </div>
<script>
function push() {
a = document.getElementById("one").style.visibility;
alert("one "+a);

b = document.getElementById("two").style.visibility;
alert("one "+b);
}
</script>
</body>
</html>

above code gives the visibility status of the div using it's ID as U required.

answered Jan 02 '13 at 12:45

ameya rote

1,116
1
9
13

1

There is more than just the `style.visibilty`. – gdoron Jan 02 '13 at 13:01
you can set visible counter variable and use it as if(visible_counter) and follow your rest of the code. – ameya rote Jan 02 '13 at 13:17
in fact the style.visibility returns null if the attribute is not set (i think this is the reason), while the .offsetWidth returns null if it's not visible, and if it's visible, it returns a positive value. So I believe @gdoron is on the best way – periback2 Jan 02 '13 at 13:39
It's Null ,accept that. But when its states as visible/hidden for first time we can initialize it. Also if($('#secretAns').is(':visible')) will return null ,unless #secretAns visibility is set. Please correct me if I'm wrong. – ameya rote Jan 02 '13 at 14:04

score 1 · Answer 3 · answered Jan 03 '13 at 10:58

As I was thinking about disabling the button, I'm here to write that I was wrong about my idea of solution for this problem, because it would be really costly to make it works. This way, after studying, testing some ideas and reading the ideas @gdoron and @AmeyaRote brought, I figured out that a simple solution was to hide the 'submit' button after clicking on it (the page is refreshed, the validation is checked and the button is available again after this process). So, here is the solution to solve the problem to avoid the user of clicking more than once on the submit button, for this particular case where I cannot disable it (if I disable after clicking, the form was not being submited):

The HTML

I just added the onclick attribute calling a javascript function I created to hide the button:

<p id="loginSubmitLink">
    <input id="general_Submit.Label" type="submit" onclick ="avoidDoubleSubmit();" value="general_Submit.Label" />" />
</p>

The Javascript

function avoidDoubleSubmit() {
    <c:if test="${not empty secretQues}">
        event_addEvent(window,'load',function(){document.ResetPasswordForm.secretAns.focus();});
        document.getElementById('general_Submit.Label').style.display ='none';
    </c:if>
}

score 1 · Answer 4 · answered Jun 18 '17 at 06:48

I wrote this some time back. This handles a lot of cases to my knowledge. This actually checks if the element is being seen by the user in it's current state.

Checks for display, visibility, opacity, overflow quirk and does it recursively till we go till the document node.

function isVisible(el) {
        while (el) {
            if (el === document) {
                return true;
            }

            var $style = window.getComputedStyle(el, null);

            if (!el) {
                return false;
            } else if (!$style) {
                return false;
            } else if ($style.display === 'none') {
                return false;
            } else if ($style.visibility === 'hidden') {
                return false;
            } else if (+$style.opacity === 0) {
                return false;
            } else if (($style.display === 'block' || $style.display === 'inline-block') &&
                $style.height === '0px' && $style.overflow === 'hidden') {
                return false;
            } else {
                return $style.position === 'fixed' || isVisible(el.parentNode);
            }
        }
    }

score 0 · Answer 5 · edited Jan 02 '14 at 16:28

0

On general_Submit.Label button click call a function Callfun() and then disabled button

<input id="general_Submit.Label" onclick="Callfun()" type="submit" value="<ezmi18n:message key="general_Submit.Label" />" />

    function Callfun()
    {
     document.getElementById("general_Submit.Label").disabled = true;
    }

edited Jan 02 '14 at 16:28

BenMorel

34,448
50
182
322

answered Jan 02 '13 at 12:44

Harshit Tailor

3,261
6
27
40

Detect if an element is visible (without using jQuery)

5 Answers5

Linked