Disappearing Panel using JQuery
We continue our JQuery tutorial by making a div disappear using JQuery.The basic html and CSS is similar to the one we used in the Simple Slide Panel.Anyway i am repeating the steps.View Demo
Fist we create the basic HTML for this.For the purpose of styling the button,i have replaced it with another div.We will however make the div look like a button using CSS.Here is the basic HTML we will be using
<html>
<head>
<title>Simple Slide Panel Using jQuery</title>
</head>
<body>
<form id="myform">
<div id="pane">
This is an example of Sliding Panels using JQuery.
You are viewing this at three2tango.com.
JQuery is a JavaScript library that emphasizes interaction
between JavaScript and HTML.JQuery simplifies the use of JavaScript
and also can enhance your web application by adding a lot of professionalism
and usability.It is a great tool for webmasters as JQuery is SEO friendly
too,which makes it a better option than Flash.JQuery exists as a single
JavaScript files which contains the DOM,Events,effects and Ajax functions
</div>
<div id="mybutton">
Click Here!!
</div>
</form>
</body>
</html>
Now we will add some CSS styling to the above created elements to make it look better.Here is the CSS code i have applied.Again i am assuming that you are comfortable using CSS.You might be able to do much better as i am not really a good designer myself.Anyways,here is my code.
<style type="text/css">
#pane{
height:120px;
width:700px;
color:#FFFFFF;
background-color:#000000;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.btn_disappear{
border-style:inset;
border-color:#FFFFFF;
background-color:#000000;
color:#FFFFFF;
height:25px;
width:100px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
</style>
Ok,now we can apply the JQuery script to our page.What we will be doing is animating the opacity of the div with id=”pane” to “hide” when the div with is clicked.Again we are using the minified version of the JQuery script here.Here is the JQuery script.
<script src="jquery-1.3.2.min.js" type="text/javascript" /></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".btn_disappear").click(function()
{
$("#pane").animate({opacity:"hide"},"slow");
});
});
</script>
In addition if you want to show the disappeared panel,you can use the following code.All it does is making the opacity=”show”
$("#pane").animate({opacity:"show"},"slow");
Download Simple Disappearing Panel Source
Related posts:
Leave your response!