Creating a simple slider panel with JQuery

This another post that is focusing on how to use JQuery in ASP.Net applications. If you want to have a look at the other posts related to JQuery in my blog click here

We all know that there is always a limited space in our web page to show content.In this example I would like to show you how to create a slider panel that the users of your site can slide down so they can see the content.

Some basic level of knowledge of JQuery is assumed.

Sadly, we canot cover the basics of JQuery in this post so here are a few resources for you to focus on

 

1) Launch Visual Studio 2010. I have Visual studio 2010 ultimate edition but Express edition will also work. Create an ASP.Net Web application.Choose C# as the development language.Give your application an appropriate name.

2) We want to download and use the latest version of JQuery. We need to download it first. Then we need to remove the version that ships with VS 2010, 1.4.1.We will place inside the Scripts folder the 1.7 version of the JQuery library.

3)  Add a new item to your application, a web form. Name it, SilderPanel.aspx. Do not include the master page. First we need to add some content to the page.

<body>
    <form id="form1" runat="server">
  
<div id="mainpanel">
<p><span>JQuery</span> is a fast and concise JavaScript Library that simplifies
 HTML document traversing, event handling, animating, 
and Ajax interactions for rapid web development. 
jQuery is designed to change the way that you write JavaScript.</p>

</div>

<p class="slider"><a href="#">Click here to slide!!!</a></p>
   
    </form>
</body>

 

We want the markup inside the div mainpanel, to be placed on the top of the page and in the center. When someone clicks on a button that is on the bottom of that slider panel, the panel will slide down slowly and when it clicks it again to slide up in a rather slow way.

4) Add a new folder to your application. Name it images.We will have an image placed in that folder. You can download it from this link.The name of the image is panel.gif

5) Add a new item to your application. Name it Slider.css

This is the code in the .css file

body {
	margin: 0 auto;
	padding: 0;
	width: 650px;
	font-family: Verdana;
}

#mainpanel {
	background: #B5B6BC;
	height: 300px;
	display: none;
}
.slider {
	margin: 0;
	padding: 0;
	border-top: solid 7px #0B4213;
	background: url(images/panel.gif) no-repeat center top;
}
.slider a {
	
	text-align: center;
	width: 184px;
	height: 31px;
	padding: 10px 10px 10px 10px;
	margin: 0 auto;
	display: block;
	font-family:Tahoma;
	font-size:1.2em;
	color: #000;
	text-decoration: none;
}


span
{
    color:Navy;
    text-decoration:none;
    font-size:1.4em;
    font-style:italic;
}

We use the css rules to style the various elements of the markup.

6) Obviously at some point we need to reference the JQuery library and the external stylesheet. In the head section Ι add the following lines.

    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>
 
    <link href="Slider.css" rel="stylesheet" type="text/css" />

 7) Inside the head section we also write the simple JQuery code.

<script type="text/javascript">
    $(document).ready(function () {
 
        $(".slider a").click(function () {
            $("#mainpanel").slideToggle("slow");
            
        });
 
 
    });
</script>

 

Let me explain what the code does.When the element with class ".slider a"  is clicked it will slide the contents of the element with id "mainpanel" down and when clicked again it will slide the contents up again. It is that simple.I am using the slideToggle function to achieve that. Have a look at the function's full explanation here.

I hope you appreciate the fact that we can do so much with a few lines of JQuery code.This is the big power of JQuery library. We can do more with less. That means we have less code to write, we are more productive and our code is easier to read and more maintainable.

View the web page on the browser and see for yourself the results.Email me if you need the source code.

Hope it helps!!!

1 Comment

Comments have been disabled for this content.