Categories: Javascript Tricks

How to check visibility change of any elements in jQuery

Hi guys, I hope you are doing good. Today we are going to discuss about how to check visibility of any element using JavaScript and jQuery.

Since I am a web developer, I have faced many scenario where we have to perform operations on element visibility. So I am going to show you some simple and useful tricks to check elements visibility.

Visibility checking of any elements.

Option 1 : Using JavaScript

<script>
  function hiddenFunction()
  {
    console.log('Now element become hidden');
  }
  function visibleFunction()
  {
    console.log('Now element become visible');
  }
  if(document.getElementById('selectedTag').css('display')=='none')
  {
  hiddenFunction();
  }else
  {
  	visibleFunction();
  }
</script>

Option 2 : Using jQuery

<script>
  function hiddenFunction()
  {
    console.log('Now element become hidden');
  }
  function visibleFunction()
  {
    console.log('Now element become visible');
  }
  if(jQuery('selectedTag').is(":visible"))
  {
  	visibleFunction();
  }else
  {
  	hiddenFunction();
  }
</script>

Option 3 : Visibility checking using jQuery on dynamic visibility changing

This is little bit tricky because whenever you have check elements visibility on window load or DOM Ready , you can use either of both above options. But the element is getting visible on some events either by user interaction or by some periodic/loop condition, it is really hard to check. And there is no predefined function available till date as date, by which you can check it by using any external script. So here it is, what I have come across.

<script>
  function hiddenFunction()
  {
    console.log('Now element become hidden');
  }
  function visibleFunction()
  {
    console.log('Now element become visible');
  }
  var visibilityCounter=0;
  $( '#selectedTag' ).on( 'visibility', function() {
    var $element = $( this );
    var timer = setInterval( function() {
      if( $element.is( ':hidden' ) ) {
        hiddenFunction();
        visibilityCounter=0;
      } else {
        if(visibilityCounter==0)
        {
          visibilityCounter=1;
          visibleFunction();
        }
      }
    }, 300 );
  }).trigger( 'visibility' );
</script>

Here I am using setInterval() function to check visibility to check elements Visiblity. You can use it as external script to check element’s visibility.
If you have access to change exiting core code, I would suggest edit that to avoid extra loop load.
By changing exiting code you can increase your website performance.

I hope this blog will be useful for you. If you need anything else about this blog or apart from this I would love to hear that, Just you have to leave comment or you can use get in touch option to contact us

Notes On Click