How To Check Whether Particular Div Is Present Using jQuery

Post Pic

There might be some scenarios where we need to check whether a particular DIV is visible or not and if that DIV is visible do some extra functionality. Below code might help us in understanding on how to code the same in jQuery if a specific scenario occurs.

I got into one similar scenario, Where I need to invoke a function when particular DIV is visible, if that particular DIV is not visible do not invoke any function. In-order to achieve this, in jQuery we do have one selector called Visible

Visible Selector: jQuery(‘:visible’)

Description: This selector selects all visible elements

Using this Visible selector we can achieve the output which we are looking for in this article.

Sample Example:

1
2
3
4
5
6
7
<script language="javascript">
$(document).ready(function(){
	if($('#TheIDWhichWeAreLookingFor').is(":visible")){
		//call your function
	}
})
</script>

Code Description: In the above example, If a particular div ID is visible – the IF condition which we are using will returns ‘true’.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
</head>
<body>
<div id="DivHide" style="display:none;">This div is not visible</div>
<div id="TheIDWhichWeAreLookingFor">If this Div is visible, invoke a function</div>
 
<script language="javascript">
$(document).ready(function(){
	if($('#TheIDWhichWeAreLookingFor').is(":visible")){
		//call your function
	}
})
</script>
</body>
</html>

Please let me know your feedback through the comment section provided below.

Related Entries...

Advertisement

Please let us know your feedback about the article through the comments section below, we want to hear from you about our website. And your comment / advice may help us to serve you better in upcoming articles.

Thank You!
Vivekanand [Founder of DeveloperSnippets]

One Response

Very useful! I’m going to build a library of these snippets!!!!

Leave Your Response

* Name, Email, Comment are Required