Loading data from repeater in asp.net in content slider?
RaviKant Hudda
I am creating a content slider in which information is fetched from table in asp.net's repeater control. I am able to load data but when page gets load it doesn't give me frequent way of loading. Later this starts to get load smoothly but very first it show the all value containing in DataSet and those are shown one upon other.
language: lang-js
$("#slideshowinfo > div:gt(0)").hide();
setInterval(function () {
$('#slideshowinfo > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshowinfo');
}, 10000);
.aspx Page
<div id="templatemo_banner_content">
<div id="slideshowinfo">
<asp:Repeater ID="rptrNewsUpdates" runat="server">
<ItemTemplate>
<div>
<div class="header_01"><asp:Label ID="lblNewsHeading" runat="server" Text='<% #Eval("OrgName") %>' /></div>
<p><asp:Label Id="lblNewsDescription" runat="server" Text='<%# string.Concat("Last Date: ",Eval("Last Date"),"<br/>","Total Post: ",Eval("TotalPost"),"<br/>","Eligibility: ",Eval("Eligibility"),"<br/>","Description: ",Eval("description")) %>' /></p>
<div class="button_01"><asp:LinkButton ID="linkReadMore" runat="server" PostBackUrl='<%# Eval("url") %>'>Read more</asp:LinkButton></div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
.cs Code Behind
rptrNewsUpdates.DataSource = ds.Tables[0];
rptrNewsUpdates.DataBind();
Output rendered on user's screen 
Lawrence
While I would recommend using an existing jQuery Slide Show plugin, I've modified some of your code to achieve what you're essentially looking for. I also made it possible for you to have multiple slide shows on the same page (be aware, though, that they will rotate at the same time). I wouldn't consider the JavaScript code modifications I've provided to be production-grade, but they demonstrate the point. Take note of the fact that I've added a bit of CSS to make sure that the initial visibility of the slide shows panes are as they should be right at the load of the page. You'd need to modify a bit of your Repeater code to account for the fact that I'm pre-populating the class attribute of the first pane of a slide show (you need to make sure the class attribute is populated physically on the page.
In what I've provided, I've stripped out your ASP.Net code to make my example clearer.
Here's the code:
<html>
<head>
<!--these style rules should be moved to a separate file -->
<style type="text/css">
.slideshow .pane {
display: none;
}
.slideshow .pane.active {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<!--
This JS code should be moved to a separate file, and its purpose is simply to be instructive for answering the question
by refining the JS supplied in the question.
This modified code is not production grade.
Assumptions:
-If multiple slide shows on a page, they rotate at the same time
-No slideshow controls.
-->
<script type="text/javascript">
(function($) {
setInterval(function () {
var fadeSpeed = 1000;
$(".slideshow").each(function(){
var $this = $(this);
var $activeSlide = $this.find('div.active');
var $nextSlide = $activeSlide.next();
if($nextSlide.length == 0) {
$nextSlide = $this.find("div.pane:first");
}
$activeSlide.fadeOut(fadeSpeed, function() {
$(this).removeClass("active");
$nextSlide.fadeIn(fadeSpeed).addClass("active");
});
});
}, 10000);
})(jQuery);
</script>
</head>
<body>
<h1>Slide Show Example</h1>
<div id="templatemo_banner_content">
<h2>Slide Show 1</h2>
<div class="slideshow">
<!--insert ASP.Net Repeater code here in order to output each pane based on data in the datasource -->
<div class="pane active">
<div class="header_01">Org Name 1</div>
<p>Description 1</p>
<div class="button_01"><input type="button" value="Read More" /></div>
</div>
<div class="pane">
<div class="header_01">Org Name 2</div>
<p>Description 2</p>
<div class="button_01"><input type="button" value="Read More" /></div>
</div>
</div>
<h2>Slide Show 2</h2>
<div class="slideshow">
<!--insert ASP.Net Repeater code here in order to output each pane based on data in the datasource -->
<div class="pane active">
<div class="header_01">Org Name 3</div>
<p>Description 3</p>
<div class="button_01"><input type="button" value="Read More" /></div>
</div>
<div class="pane">
<div class="header_01">Org Name 4</div>
<p>Description 4</p>
<div class="button_01"><input type="button" value="Read More" /></div>
</div>
</div>
</div>
</body>
</html>
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
Changing the last datarow from a asp:repeater table if data is shown in asp:label using vb.net
- 2
Repeater in asp.net from DB with DropDownList
- 3
asp.net PlaceHolder - loading content into
- 4
ASP Repeater not showing data
- 5
ASP.NET WebForms Nested Repeater With LINQ Group Data Source
- 6
fetching data in repeater's ItemCommand event in asp.net?
- 7
ASP.NET: Table with Repeater control and alternating data in same for
- 8
ASP.NET: Passing data from content page to master page
- 9
button click event in repeater control to show data in same repeater in asp.net c#
- 10
Check CheckBox inside inner Repeater from outer Repeater checked in Asp.Net
- 11
NavigateUrl on Repeater ASP.net
- 12
NavigateUrl on Repeater ASP.net
- 13
Loading script content from data URL
- 14
loading content into a div from data within a href
- 15
loading content into a div from data within a href
- 16
Jssor Content slider loading all the images at once
- 17
Removing Time From Date from a SQL server in a asp.net Repeater
- 18
ASP.NET repeater only renders the first item in my XML data source
- 19
ASP.Net c#, Repeater Itemcommand. I don't delete data
- 20
How to show HTML data as normal string in Table in Repeater using asp.net?
- 21
How to get data from database and make download that content as pdf format in Asp.net MVC
- 22
ASP.NET Repeater - Eval() for bool?
- 23
Convert Bootstrap Carousel to ASP.Net Repeater
- 24
ASP .NET Using a Repeater inside of UpdatePanel with UpdateProgress
- 25
asp.net repeater for each row
- 26
repeater item command in asp.net
- 27
to disable a label of repeater on some condition in asp .net
- 28
Using Bootstrap tabs with ASP NET repeater
- 29
asp.net repeater use template in javascript
Comments