Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Ajax Jquery Divdisappear

Related Tutorials


 
 

Share on Google+Share on Google+

Divdisappear

Advertisement
Divdisappear

jQuery To Hide the Div

In this JQuery tutorial we will develop a program that Hide of a Div

Steps to develop the Hide of a Div .

Step 1:

Create a new file (divdisappear.html) and add the following code into it:

 

<!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>Div Disappear</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".divClass .deleteDiv").click(function(){
$(this).parents(".divClass").animate({ opacity: 'hide' }, "slow");
});

});
</script>

<style type="text/css">
body {
margin: 10px auto;
width: 470px;
}
h3 {
margin: 0;
padding: 0 0 .5em;
}
p {
margin: 0;
padding: 0 0 .3em;
}
.divClass {
background: #efefef;
padding: 20px 20px 20px;
position: relative;
border-top: solid 2px #000000;
}
.divClass .deleteDiv {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
</style>
</head>

<body>
<div class="divClass">
<h3>Div 1</h3>
<p>Content 1.</p>
<img src="images/deletebttn.gif" alt="delete" class="deleteDiv" />
</div>
<div class="divClass">
<h3>Div 2</h3>
<p>Content 2.</p>

<img src="images/deletebttn.gif" alt="delete" class="deleteDiv" />
</div>
<div class="divClass">
<h3>Div 3</h3>
<p>Content 3.</p>
<img src="images/deletebttn.gif" alt="delete" class="deleteDiv" />
</div>

</body>

</html>


Program explanation:

The following code includes the jQuery JavaScript library file:

<script type="text/javascript" src="jquery.js"></script>

The Code

$(".divClass .deleteDiv").click(function(){

 This function works when generate the click event on the div

and having correponding style css.

divClass .deleteDiv {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}

and another function having two parameter opacity is visuality and "slow" working on class "divClass"

$(this).parents(".divClass").animate({ opacity: 'hide' }, "slow");

 After Click On the Delete 

Output :

 

Check online demo of the application

Learn from experts! Attend jQuery Training classes.

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

null  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com