By Philip Morton


2008-10-07 13:03:18 8 Comments

It is possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle().

How would you test if an element is visible or hidden?

30 comments

@Peter Wone 2017-03-25 08:49:30

To be fair the question pre-dates this answer.

I add it not to criticise the OP but to help anyone still asking this question.

The correct way to determine whether something is visible is to consult your view-model;

If you don't know what that means then you are about to embark on a journey of discovery that will make your work a great deal less difficult.

Here's an overview of the model-view-view-model architecture (MVVM).

KnockoutJS is a binding library that will let you try this stuff out without learning an entire framework.

And here's some JS and a DIV that may or may not be visible.

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
    var vm = {
        IsDivVisible: ko.observable(true);
    }
    vm.toggle = function(data, event) {
      //get current visibility state for the div
      var x = IsDivVisible();
      //set it to the opposite
      IsDivVisible(!x);
    }
    ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body>
</html>

Notice that the toggle function does not consult the DOM to determine the visibility of the div, it consults the view-model.

@No one 2016-11-05 12:26:27

As hide(), show() and toggle() attaches inline css (display:none or display:block) to element. Similarly, we can easily use the ternary operator to check whether the element is hidden or visible by checking display CSS.

UPDATE:

  • You also need to check if element CSS set to visibility: "visible" or visibility: "hidden"
  • The element will be also visible if display property set to inline-block, block, flex.

So we can check for the property of an element that makes it invisible. So they are display: none and visibility: "hidden";

We can create an object for checking property responsible for hiding element:

var hiddenCssProps = {
display: "none",
visibility: "hidden"
}

We can check by looping through each key value in object matching if element property for key matches with hidden property value.

var isHidden = false;
for(key in hiddenCssProps) {
  if($('#element').css(key) == hiddenCssProps[key]) {
     isHidden = true;
   }
}

If you want to check property like element height: 0 or width: 0 or more, you can extend this object and add more property to it and can check.

Thank you @Krzysztof Przygoda for reminding me other display properties.

@Profesor08 2018-08-15 01:48:34

If you want to check if an element is visible on the page, depending on the visibility of its parent, you can check if width and height of the element are both equal to 0.

jQuery

$element.width() === 0 && $element.height() === 0

Vanilla

element.clientWidth === 0 && element.clientHeight === 0

Or

element.offsetWidth === 0 && element.offsetHeight === 0

@Code Spy 2013-01-25 05:34:11

Demo Link

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

Source:

Blogger Plug n Play - jQuery Tools and Widgets: How to See if Element is hidden or Visible Using jQuery

@Code Spy 2013-01-25 06:30:44

@Adrew but this link is showing working example of this function. I think a practical answer may weight over a full page of text :)

@Kevin B 2013-10-10 21:49:17

@jolly.exe until that working example goes away that is.

@Vaishu 2012-06-13 13:20:45

ebdiv should be set to style="display:none;". It works for both show and hide:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});

@Lyes CHIOUKH 2018-10-10 15:01:09

1 • jQuery solution

Methods to determine if an element is visible in JQuery

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

Loop on all visible div children of the element of id 'myelement' :

$("#myelement div:visible").each( function() {
 //Do something
});

Peeked at source of jQuery

This is how jQuery implements this feature :

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

2 • How to check if an element is off-screen - CSS

Using Element.getBoundingClientRect() you can easily detect whether or not your element is within the boundries of your viewport (i.e. onscreen or offscreen):

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

You could then use that in several ways:

// returns all elements that are offscreen
$(':offscreen');

// boolean returned if element is offscreen
$('div').is(':offscreen');

If you use Angular, check : Don’t use hidden attribute with Angular

@Muhammad 2018-09-12 09:34:43

jQuery solution, quite old question but still I fell I can give a bit better answer for those who want to change the button text as well.

$(function(){
  $("#showHide").click(function(){
    var btn = $(this);
    $("#content").toggle(function () {
      btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
    });
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="showHide">Hide</button>
<div id="content">
  <h2>Some content</h2>
  <p>
  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</div>

@Mote 2008-10-07 13:09:04

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Above method does not consider the visibility of the parent. To consider the parent as well, you should use .is(":hidden") or .is(":visible").

For example,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

The above method will consider div2 visible while :visible not. But the above might be useful in many cases, especially when you need to find if there is any error divs visible in the hidden parent because in such conditions :visible will not work.

@chiborg 2010-03-03 10:10:48

This only checks for the display property of a single element. The :visible attribute checks also the visibility of the parent elements.

@evanmcd 2012-01-13 18:51:41

This is the only solution that worked for me when testing with IE 8.

@dchayka 2014-03-14 17:37:17

This is not the solution to my problem but the method helped me identify a fix for checking against a property to my problem.

@Casey 2014-03-14 17:56:14

@chiborg Yes, but sometimes that's what you want and I had to learn the hard way how "clever" jQuery was...

@Jimmy Knoot 2015-04-14 09:18:30

This does answer the question, being the question is about a single element and by using the hide(), show() and toggle() functions, however, as most have already said, we should use the :visible and :hidden pseudo-classes.

@atheaos 2017-04-25 16:05:39

This answer can be used when an element exists but is not currently on the page, such as after detach().

@user10145552 2018-07-29 21:07:22

Instead of writing an event for every single element, Do this:

$('div').each(function(){
  if($(this).css('display') === 'none'){
    $(this).css({'display':'block'});
  }
});

Also you can use it on the inputs:

$('input').each(function(){
  if($(this).attr('type') === 'hidden'){
    $(this).attr('type', 'text');
  }
});

@Tsvetomir Tsonev 2008-10-07 13:30:22

Since the question refers to a single element, this code might be more suitable:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

Same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ

@kralco626 2010-12-29 18:30:57

This solution would seem to encourage the confustion of visible=false and display:none; whereas Mote's solution clearly illistrates the coders intent to check the display:none; (via mention of hide and show which control display:none not visible=true)

@Tsvetomir Tsonev 2011-01-06 12:30:27

That is correct, but :visible will also check if the parent elements are visible, as chiborg pointed out.

@sarsnake 2011-01-11 02:07:31

Tsvetomir, this doesn't work for IE7 - even when the elements are hidden it thinks that visible=true. Please correct your answer to avoid misleading people. visible and display are different properties and should be treated as such. Mote's answer is the correct one.

@Tsvetomir Tsonev 2011-01-14 16:54:41

You have a point - I'll make it clear that the code checks only for the display property. Given that the the original question is for show() and hide(), and they set display, my answer is correct. By the way it does work with IE7, here's a test snippet - jsfiddle.net/MWZss ;

@Kzqai 2012-01-05 15:36:15

I actually found that the reverse logic words better: !$('selector').is(':hidden'); for some reason. Worth a try.

@Max Leske 2012-06-22 14:12:11

Here's a simple benchmark testing is() against regexp:jsperf.com/jquery-is-vs-regexp-for-css-visibility. Conclusion: if you're out for performance, use regexp over is() (since is() looks for all hidden nodes first before looking at the actual element).

@Lamy 2012-09-10 09:43:43

Tchalvak, you may feel something is right, but try to explain why. Double negation is confusing as opposed to simple statement, so $('selector').is(':shown'); is much clearer than !$('selector').is(':hidden');

@Robin Michael Poothurai 2012-10-23 08:43:11

@TsvetomirTsonev, to check the parent's visibility, you can use $(element).parent().is(":visible"); I know this is bit old, but will useful for new search

@Martin Thoma 2013-01-02 21:30:44

What does $(element).is(":visible") return, if the element is visible in terms of not having display:none or visibility:hidden, but the user scrolled down so he doesn't actually see it? Is there a simple way to check that?

@Chris Moschini 2013-03-27 23:02:55

For other users wondering if this really does work in IE7, this might save you some time - it works, jquery 1.9.1: imgur.com/uKD4t8h

@Bill Ortell 2013-04-17 13:51:27

@MaxLeske - I'm pretty sure it's a GIVEN! (most of the time) that when you pull out the regexp knife that you'll take a perf. hit. The extra checks will be nil compared to the overhead/processing of regexp.

@Sevenearths 2013-08-30 11:46:09

How do you do the inverse of this?

@Turnerj 2013-10-17 01:53:01

I found this informative when looking up about :visible and :hidden. Essentially, it looks at the offsetHeight and offsetWidth allowing it to provide the best coverage (eg. you might have a class which has display:none; as a property and it will correctly report whether it is visible)

@Wolfpack'08 2013-12-04 01:58:12

So, should we use .is(":invisible") for false? Or !$(element).is(":visible"), or just what?

@Ameen 2013-12-05 04:57:08

@Wolfpack'08: I'm looking for a similar solution as well. So far I've been using $(element).css('display')=='none' to detect hidden elements.

@Izkata 2014-02-03 22:43:52

@Kzqai Also, I believe this works: $(selector).is('not(:hidden)')

@carl 2014-02-11 06:46:25

This doesn't work in the latest jquery. It's been deprecated. What's the best work around? (Why did they remove this...?)

@BruceHill 2014-06-24 15:51:18

@carl I don't see anything in the jQuery documentation about this being deprecated. I have also tested it with the latest jQuery and it does still work. Here: jsfiddle.net/F6atJ

@Yana Agun Siswanto 2015-02-04 08:03:57

Not working for element that have parent overflow: hidden;

@Aniket Thakur 2015-09-11 14:05:26

Does not work on chrome though works flawlessly in firefox :( Had to do something like jQuery(textarea).parent().css('display') != 'none' instead of jQuery(textarea).parent().is(":visible")

@Mark Schultheiss 2017-04-25 11:18:26

Changes in 1.12+ and 2.2.0+ and 3.0+ change the counts if multiple elements selected (see note at the bottom of this stackoverflow.com/a/17426800/125981)

@Black 2019-05-20 14:20:56

Does not work with jQuery UI Selectmenu, It says my option is hidden even though it is visible.

@Alireza 2017-05-06 06:38:07

Just simply check if that element is visible and it will return a boolean, jQuery hide the elements by adding display none to the element, so if you want to use pure JavaScript, you can still do that, for example:

if (document.getElementById("element").style.display === 'block') { 
  // your element is visible, do whatever you'd like
}

Also, you can use jQuery as seems the rest of your code using that and you have smaller block of code, something like below in jQuery, do the same track for you:

if ($(element).is(":visible")) { 
    // your element is visible, do whatever you'd like
};

Also using css method in jQuery can result the same thing:

if ($(element).css('display')==='block') {
    // your element is visible, do whatever you'd like
}

Also in case of checking for visibility and display, you can do the below:

if ($(this).css("display")==="block"||$(this).css("visibility")==="visible") {
   // your element is visible, do whatever you'd like
}

@twernt 2008-10-07 13:16:15

You can use the hidden selector:

// Matches all elements that are hidden
$('element:hidden')

And the visible selector:

// Matches all elements that are visible
$('element:visible')

@codecraig 2011-07-11 17:05:57

just be careful, there are some good performance related tips in this presentation: addyosmani.com/jqprovenperformance

@Etienne Dupuis 2012-07-04 20:12:04

On pages 21 to 28 it shows how slow :hidden or :visible is compared to other selectors. Thanks for pointing this.

@vbullinger 2013-02-20 14:56:49

When you're dealing with a couple of elements and very little is going on - i.e. THE ABSURDLY VAST MAJORITY OF CASES - the time issue is a ridiculously minor concern. Oh, noes! It took 42 ms instead of 19 ms!!!

@ZoomIn 2013-08-09 07:18:33

I am toggling the element mamually using this selector. $('element:hidden') is always true for me!

@Wolfpack'08 2013-12-04 04:28:31

Could you explain why this one isn't working: jsfiddle.net/URHkb ?

@cwingrav 2015-11-18 15:57:48

:hidden is for form elements, not display:none. This is not the answer people are most likely expecting.

@Joshua Walsh 2016-01-15 04:15:16

@cwingrav You might want to re-read the documentation, :hidden applies to all elements. Form elements with type="hidden" is just one case that can trigger :hidden. Elements with no height and width, elements with display: none, and elements with hidden ancestors will also qualify as :hidden.

@chiborg 2016-02-23 14:59:46

The embedded presenation on the linked page no longer works, go to slideshare.net/AddyOsmani/jquery-proven-performance-tips-tri‌​cks instead.

@Sebi 2016-07-30 09:13:45

@vbullinger 42ms is actually a bit longer than I would like to wait for the website to respond to my actions - that means around 3 frames of animation dropped/delayed only at 60 fps

@Alejandro García Iglesias 2017-08-02 14:45:06

@vbullinger any processing that takes more than 16ms starts dropping FPS. So yes, if it takes 42ms it can be a bad deal if you're interested in performance.

@CPHPython 2018-05-17 14:00:49

From jQuery docs: "using :hidden heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance."

@Craig London 2018-11-14 16:13:04

The link above to AddyOsmani's website is valid, but Slideshare no longer allows the flash embed. You can view the slides here slideshare.net/AddyOsmani/…

@user8903269 2017-12-22 20:12:25

You can do this:

isHidden = function(element){
    return (element.style.display === "none");
};

if(isHidden($("element")) == true){
    // something
}

@Sahan 2017-09-26 09:11:02

You can use a css class when it visible or hidden by toggling the class.

.show{ display :block; }

Set your jQuery toggleClass() or addClass() or removeClass();.

As an example,

jQuery('#myID').toggleClass('show')

The above code will add show css class when the element don't have show and will remove when it has show class.

And when you are checking if it visible or not, You can follow this jQuery code,

jQuery('#myID').hasClass('show');

Above code will return a boolean (true) when #myID element has our class (show) and false when it don't have the (show) class.

@Antoine Auffray 2017-08-08 17:47:36

Simply check for the display attribute (or visibility depending on what kind of invisibility you prefer). Example :

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}

@webvitaly 2012-04-24 21:04:11

How element visibility and jQuery works;

An element could be hidden with display:none, visibility:hidden or opacity:0. The difference between those methods:

  • display:none hides the element, and it does not take up any space;
  • visibility:hidden hides the element, but it still takes up space in the layout;
  • opacity:0 hides the element as "visibility:hidden", and it still takes up space in the layout; the only difference is that opacity lets one to make an element partly transparent;

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }
    

    Useful jQuery toggle methods:

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    

@urraka 2012-06-29 18:15:21

Another difference between visibility:hidden and opacity:0 is that the element will still respond to events (like clicks) with opacity:0. I learned that trick making a custom button for file uploads.

@YangombiUmpakati 2017-12-12 11:08:36

also if you hide input with opacity:0, it still gets selected with tab key

@Prabhagaran 2015-08-18 09:04:15

if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}

@pixellabme 2014-08-11 05:28:37

Simply check visibility by checking for a boolean value, like:

if (this.hidden === false) {
    // Your code
}

I used this code for each function. Otherwise you can use is(':visible') for checking the visibility of an element.

@Irfan DANISH 2013-10-28 06:43:14

Example:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>

@aaronLile 2011-03-24 18:44:10

None of these answers address what I understand to be the question, which is what I was searching for, "How do I handle items that have visibility: hidden?". Neither :visible nor :hidden will handle this, as they are both looking for display per the documentation. As far as I could determine, there is no selector to handle CSS visibility. Here is how I resolved it (standard jQuery selectors, there may be a more condensed syntax):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

@MarioDS 2013-05-11 22:37:45

This answer is good to handle visibility literally, but the question was How you would test if an element has been hidden or shown using jQuery?. Using jQuery means: the display property.

@awe 2013-10-16 09:12:04

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. See answer by Pedro Rainho and jQuery documentation on the :visible selector.

@vsync 2014-04-22 19:20:11

you need to traverse up the DOM to check the node's parents, or else ,this is useless.

@AzizAhmad 2015-08-06 05:51:23

this won't work if you hide element with .hide().

@Sky Yip 2016-12-06 08:44:11

I just want to clarify that, in jQuery,

Elements can be considered hidden for several reasons:

  • They have a CSS display value of none.
  • They are form elements with type="hidden".
  • Their width and height are explicitly set to 0.
  • An ancestor element is hidden, so the element is not shown on the page.

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation.

Source: :hidden Selector | jQuery API Documentation

if($('.element').is(':hidden')) {
  // Do something
}

@Pedro Rainho 2011-11-25 09:16:10

The :visible selector according to the jQuery documentation:

  • They have a CSS display value of none.
  • They are form elements with type="hidden".
  • Their width and height are explicitly set to 0.
  • An ancestor element is hidden, so the element is not shown on the page.

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

This is useful in some cases and useless in others, because if you want to check if the element is visible (display != none), ignoring the parents visibility, you will find that doing .css("display") == 'none' is not only faster, but will also return the visibility check correctly.

If you want to check visibility instead of display, you should use: .css("visibility") == "hidden".

Also take into consideration the additional jQuery notes:

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

Also, if you are concerned about performance, you should check Now you see me… show/hide performance (2010-05-04). And use other methods to show and hide elements.

@user6119825 2017-04-29 10:25:22

$('someElement').on('click', function(){ $('elementToToggle').is(':visible')

@Abdul Aziz Al Basyir 2017-03-20 05:07:28

There are too many methods to check for hidden elements. This is the best choice (I just recommended you):

Using jQuery, make an element, "display:none", in CSS for hidden.

The point is:

$('element:visible')

And an example for use:

$('element:visible').show();

@Arun Karnawat 2016-12-13 09:33:37

There are quite a few ways to check if an element is visible or hidden in jQuery.

Demo HTML for example reference

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

Use Visibility Filter Selector $('element:hidden') or $('element:visible')

  • $('element:hidden'): Selects all elements that are hidden.

    Example:
       $('#content2:hidden').show();
    
  • $('element:visible'): Selects all elements that are visible.

    Example:
       $('#content:visible').css('color', '#EEE');
    

Read more at http://api.jquery.com/category/selectors/visibility-filter-selectors/

Use is() Filtering

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

Read more at http://api.jquery.com/is/

@Sahan 2016-04-04 08:21:05

You can just add a class when it is visible. Add a class, show. Then check for it have a class:

$('#elementId').hasClass('show');

It returns true if you have the show class.

Add CSS like this:

.show{ display: block; }

@Abrar Jahin 2016-05-02 12:31:08

You can use this:

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

Example code

$(document).ready(function()
{
    $("#toggle").click(function()
    {
        $("#content").toggle();
    });

    $("#visiblity").click(function()
    {
       if( $('#content').is(':visible') )
       {
          alert("visible"); // Put your code for visibility
       }
       else
       {
          alert("hidden");
       }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<p id="content">This is a Content</p>

<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>

@lmcDevloper 2016-06-01 06:36:49

I searched for this, and none of the answers are correct for my case, so I've created a function that will return false if one's eyes can't see the element

jQuery.fn.extend({
  isvisible: function() {
    //
    //  This function call this: $("div").isvisible()
    //  Return true if the element is visible
    //  Return false if the element is not visible for our eyes
    //
    if ( $(this).css('display') == 'none' ){
        console.log("this = " + "display:none");
        return false;
    }
    else if( $(this).css('visibility') == 'hidden' ){
        console.log("this = " + "visibility:hidden");   
        return false;
    }
    else if( $(this).css('opacity') == '0' ){
        console.log("this = " + "opacity:0");
        return false;
    }   
    else{
        console.log("this = " + "Is Visible");
        return true;
    }
  }  
});

@Nnoel 2016-12-07 16:36:20

Just a note, if the selector returns an empty set of items, this method will return true, so check length first if you looking for invisible items : var items = jQuery('.selector'); if (items.length == 0 || !items.isVisible()) { alert('item is not visible'); }

@Wolfack 2016-12-01 06:46:05

You can use the

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

API Documentation: https://api.jquery.com/visible-selector/

@Roman Losev 2015-04-27 07:57:27

Example of using the visible check for adblocker is activated:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" is a ID which adblocker blocks. So checking it if it is visible you are able to detect if adblocker is turned On.

Related Questions

Sponsored Content

3 Answered Questions

58 Answered Questions

[SOLVED] How do I redirect to another webpage?

40 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 707532 View
  • 2552 Score
  • 40 Answer
  • Tags:   javascript jquery

79 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 5709537 View
  • 7100 Score
  • 79 Answer
  • Tags:   javascript arrays

60 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

76 Answered Questions

[SOLVED] How do I detect a click outside an element?

  • 2008-09-30 13:17:12
  • Sergio del Amo
  • 1088336 View
  • 2238 Score
  • 76 Answer
  • Tags:   javascript jquery

40 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

15 Answered Questions

[SOLVED] "Thinking in AngularJS" if I have a jQuery background?

14 Answered Questions

[SOLVED] How can I select an element by name with jQuery?

Sponsored Content