How to check if the element is visible

Question

How do i know if my element is visible or not using javascript. I'm using $('#element').hide();, $('#element').show(); to hidden or shown an element. How can i check if the element is shown? The element is in the modal. I tried to change the element which is not in the modal and it worked, but when i put the element inside the modal it's not working..

I tried using this code but it's not working.

    <div class="well me">
         <label for="majore">Major Exam</label>
            <div class="input-group">
                 <input type="text" class="form-control majore" id="majore" oninput="total();"/>
            <span class="input-group-addon">
              <i class="fa fa-percent"></i>
             </span>
              </div>
     </div>

     <script>
            if ($('.me').is(':visible')) {                          
                  mt = m / 100 * 50 + 50;
                } 
    </script>

Is the element a child (or descendant) of another element that is hidden? — trincot, Aug 25 '16 at 05:05
@nethken : share your code in http://jsfiddle.net or http://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ — Pranav C Balan, Aug 25 '16 at 05:06
or you can check if the element even exist to begin with maybe it doesnt exist — guradio, Aug 25 '16 at 05:07
Give us your HTML code, edit your question with more code please — Arnaud Gueras, Aug 25 '16 at 05:07
I edit my question guys. I'm trying to check if the `div` `.me` is visible or not. — nethken, Aug 25 '16 at 05:08
scripts should be in a `script` tag. and you don't have an element with `me` class. — trincot, Aug 25 '16 at 05:08
i copied and paste your code in snippet and its ok. this problem is cause by something else. im voting to close this OP — guradio, Aug 25 '16 at 05:09
@nethken : Where are you hiding the elements ? I think the children is hidden here — Pranav C Balan, Aug 25 '16 at 05:10
OK, so you provide wrong information time and time again? Why don't you show it as it is? I am voting to close this. It is not clear. — trincot, Aug 25 '16 at 05:10
@Pranav C Balan The children is visible sir. When i change the condition the computation is working. — nethken, Aug 25 '16 at 05:10
@nethken : the problem lies somewhere else... we can only identify if you were shared more code... — Pranav C Balan, Aug 25 '16 at 05:12
@nethken : be more clear about.... where are you hiding the element ? which element is hiding ? ... — Pranav C Balan, Aug 25 '16 at 05:14
Guys, It's working when i change the element. The `div` is in the modal. — nethken, Aug 25 '16 at 05:15
Please visit the link: http://stackoverflow.com/questions/8337186/jquery-isvisible-not-working-in-chrome — Rohit, Aug 25 '16 at 06:04

score 3 · Accepted Answer · edited Aug 25 '16 at 07:01

3

 "none" == document.getElementById("element").style.display //Check for hide

 "block" == document.getElementById("element").style.display //Check for show

you can use like also

  if ($('#element').css('display') == 'none') {
    alert('element is hidden');
 }

edited Aug 25 '16 at 07:01

Nikolay Mihaylov

3,868
8
27
32

answered Aug 25 '16 at 05:08

User

1,334
5
29
61

Vikrant Vir Bhalla · Answer 2 · 2016-08-25T05:03:54.510

0

Checks for display:[none|block], ignores visible:[true|false]

$('#element').is(":visible");

edited Aug 25 '16 at 05:03

answered Aug 25 '16 at 05:02

Vikrant Vir Bhalla

299
1
11

#majore you for got the # – Vikrant Vir Bhalla Aug 25 '16 at 05:05

score 0 · Answer 3 · answered Aug 25 '16 at 05:11

It seems your selector is wrong.

Example of $("[element]").is(":visible") below: (for refrence)

$("#show").on("click", function() {
  $("#text").show();
})
$("#hide").on("click", function() {
  $("#text").hide();
})
$("#getStatus").on("click", function() {
  alert($("#text").is(":visible"));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Hello</div>
<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="getStatus">Get Status</button>

My `div` im trying to check is in the modal sir. – nethken Aug 25 '16 at 05:16 — nethken, Aug 25 '16 at 05:16

Mairaj Ahmad · Answer 4 · 2016-08-25T05:21:12.730

0

$('.me') is a class selector which will return array of elements where elements have class me.

So you need to target the specific div either by using this or by using index as there can be many elements with same class name.

$('.me').is(':visible') this will check the first element and return result according to first element's visibility.

You can try

$(".me").eq(1).is(':visible')    //Here 1 is index of div which can vary

OR

$(this).is(':visible')

edited Aug 25 '16 at 05:21

answered Aug 25 '16 at 05:19

Mairaj Ahmad

14,434
2
26
40

Sir. The element im trying to check is in the modal. Is is the cause of the problem? – nethken Aug 25 '16 at 05:20
Modal is visible or not when you are trying to check this. – Mairaj Ahmad Aug 25 '16 at 05:23

How to check if the element is visible

4 Answers4