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
Really informative article.Really looking forward to read more. Want more.
This is really interesting, You are a very skilled blogger. I have joined your rss feed and look forward to seeking more of your fantastic post. Also, I have shared your website in my social networks!
You actually make it seem really easy along with your presentation however I in finding this topic to be actually one thing that I feel I might by no means understand. It kind of feels too complex and very extensive for me. I’m having a look forward on your next post, I’ll attempt to get the cling of it!
You really make it seem so easy with your presentation but I find this topic to be actually something that I think I would never understand. It seems too complex and very broad for me. I’m looking forward for your next post, I will try to get the hang of it!
Hey Thanks very interesting nice blog! Helped me alot
I really like and appreciate your blog post.Really looking forward to read more. Will read on…