Abstract: This article demonstrates how to display ASP.NET Panels one after the other, and after a fixed duration, like a slide show.
This article demonstrates how to display Panels one after the other, and after a fixed duration, like a slide show. The Panels should have a sliding effect.
This article is a chapter from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls. The chapter has been modified a little to publish it as an article.
Note that for demonstration purposes, I have included jQuery code and css in the same page. Ideally, these resources should be created in separate folders for maintainability. The code shown below has been tested on IE7, IE8, Firefox 3, Chrome 2 and Safari 4
Let us quickly jump to the solution and see how create a SlideShow with ASP.NET Panels
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.divNoBorder
{
background-color:White;
font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial;
font-size:12px;
color:#000000;
width:510px;
margin-left:auto;
margin-right:auto;
padding:10px;
}
</style>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $divSlide = $("div.slide");
$divSlide.hide().eq(0).show();
var panelCnt = $divSlide.length;
setInterval(panelSlider, 3000);
function panelSlider() {
$divSlide.eq(($divSlide.length++) % panelCnt)
.slideUp("slow", function() {
$divSlide.eq(($divSlide.length) % panelCnt)
.slideDown("slow");
});
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="divNoBorder">
<h2>Slide Show with Panels.
Each Panel is Visible for 3 seconds.</h2>
<br /><br />
<asp:Panel ID="panelOne" runat="server" class='slide'>
Panel 1 Content Panel 1 Content Panel 1 Content
Panel 1 Content Panel 1 Content Panel 1 Content
Panel 1 Content Panel 1 Content Panel 1 Content
Panel 1 Content Panel 1 Content Panel 1 Content
</asp:Panel>
<asp:Panel ID="panelTwo" runat="server" class='slide'>
Panel 2 Content Panel 2 Content Panel 2 Content
Panel 2 Content Panel 2 Content Panel 2 Content
Panel 2 Content Panel 2 Content Panel 2 Content
Panel 2 Content Panel 2 Content Panel 2 Content
</asp:Panel>
<asp:Panel ID="panelThree" runat="server" class='slide'>
Panel 3 Content Panel 3 Content Panel 3 Content
Panel 3 Content Panel 3 Content Panel 3 Content
Panel 3 Content Panel 3 Content Panel 3 Content
Panel 3 Content Panel 3 Content Panel 3 Content
Panel 3 Content Panel 3 Content Panel 3 Content
</asp:Panel>
<asp:Panel ID="panelFour" runat="server" class='slide'>
Panel 4 Content Panel 4 Content Panel 4 Content
Panel 4 Content Panel 4 Content Panel 4 Content
</asp:Panel>
<asp:Panel ID="panelFive" runat="server" class='slide'>
Panel 5 Content Panel 5 Content Panel 5 Content
</asp:Panel>
</div>
</form>
</body>
</html>
The first step is to cache the selector in a variable as shown below:
var $divSlide = $("div.slide");
The example then starts off by hiding all the panels except the first one using
$divSlide.hide().eq(0).show();
We then use the JavaScript setInterval() function to delay the execution of a function (panelSlider) for a specified time, in our case 3000 millisecond (3 seconds).
setInterval(panelSlider, 3000);
The advantage of a setInterval() function is that it continues to repeat the process of triggering the function at the specified interval, thereby giving it a loop effect.
Note: To pause the slideshow, use the clearInterval() function.
The number of panels is stored in a variable panelCnt
var panelCnt = $divSlide.length;
In the panelSlider() function, we use a simple expression ($divSlide.length++) % panelCnt that calculates the index to be supplied to the eq() selector and applies the fadeout/fadeIn() animations on the current panel. eq(0) refers to the first panel, eq(1) to the second and so on.
function panelSlider() {
$divSlide.eq(($divSlide.length++) % panelCnt)
.slideUp("slow", function() {
$divSlide.eq(($divSlide.length) % panelCnt)
.slideDown("slow");
}
The chart shown below helps you understand what happens at every loop
Loop Number
|
Value of $divSlide.length
|
Value of ($divSlide.length++) % panelCnt
|
1
|
5
|
5mod5 = 0
|
2
|
6
|
6mod5 = 1
|
3
|
7
|
7mod5 = 2
|
4
|
8
|
8mod5=3
|
5
|
9
|
9mod5=4
|
6
|
10
|
10mod5=0
|
and so on….
| ||
You can see a Live Demo
I hope you found this article useful and I thank you for viewing it. This article was taken from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls which contains similar recipes that you can use in your applications.
The entire source code of this article can be downloaded over here
No comments:
Post a Comment