Simple Slide Panel Using JQuery
We continue our JQuery tutorial by creating a simple slide panel using JQuery.What we are trying to do is to toggle a div up/down on button click.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_slide{
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>
Now you will get something like this
Ok,now we can apply the JQuery script to our page.What we will be doing is that we toggle the div with id=”pane” up/down when the div with class “btn_slide” get clicked.Here is the JQuery code to do
this.Again we are using the minified version of the JQuery script here.
<script src="jquery-1.3.2.min.js" type="text/javascript" /></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".btn_slide").click(function()
{
$("#pane").slideToggle("slow");
});
});
</script>
Download Simple Sliding Panel Source
Related posts:
Just what I was looking for for a slide out contact form – thanks…
Hey.. Good one. But not working smothly in IE6……
Leave your response!
RelatedTopics
Recent Posts
Categories
Archives
Meta
Pages
Blogroll