Add the below code under aspx page with the reference of
jquery-1.6.2.min.js plug in and Add ProductsOnScroll.js
Sample.aspx Page:
//Under Sample.cs code:
Sample.aspx Page:
<head runat="server">
<title>Untitled
Page</title>
<link href="CSS/Stylesheet1.css" rel="stylesheet"
type="text/css"
/>
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="Scripts/AddProductsOnScroll.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" >
<div id="mainDiv" style="width:980px">
<div id="wrapperDiv" runat="server" style="padding-left:12px;"> </div>
</div>
</form>
</body>
</html>
//Under Sample.cs code:
public static int counter =
0;
protected
void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
counter = 0;
fill_firstTime();
}
}
[WebMethod]
public static string GetDataFromServer()
{
string
str1 = string.Empty, str2 = string.Empty, resp = string.Empty;
str1 = @"
<div
style='float:left;width:160px; ' >
<table align='center'
style='border-bottom:Dotted 1px Grey;'>
<tr>
<td colspan='2'
class='DealHeading'>
<span>Name of the
deal</span>
</td>
</tr>
<tr>
<td colspan='2'
class='DealImage'>
<img src='";
str2 = @"'
Height='150px' Width='150px' style='border:Solid 1px Grey' alt='' />
</td>
</tr>
</table>
</div> ";
DataSet
ds = db.getItems(counter);
for
(int i = 0; i < ds.Tables[0].Rows.Count;
i++)
{
resp += str1 +
ds.Tables[0].Rows[i]["dealimage1"].ToString()
+ str2;
counter = counter + 1;
}
return
resp;
}
private
void fill_firstTime()
{
string
str1 = string.Empty, str2 = string.Empty, resp = string.Empty;
str1 = @"
<div
style='float:left;width:160px; ' >
<table align='center'
style='border-bottom:Dotted 1px Grey;'>
<tr>
<td colspan='2'
class='DealHeading'>
<span>Name of the
deal</span>
</td>
</tr>
<tr>
<td colspan='2'
class='DealImage'>
<img src='";
str2 = @"'
Height='150px' Width='150px' style='border:Solid 1px Grey' alt='' />
</td>
</tr>
</table>
</div> ";
DataSet
ds = db.getItems(counter);
for
(int i = 0; i < ds.Tables[0].Rows.Count;
i++)
{
resp += str1 +
ds.Tables[0].Rows[i]["dealimage1"].ToString()
+ str2;
counter = counter + 1;
}
wrapperDiv.InnerHtml = resp + resp;
}
// JScript File
LoadOnScroll.js
// JScript File
LoadOnScroll.js
$(document).ready (
function()
{
$contentLoadTriggered = false;
$("#mainDiv").scroll (
function()
{
if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) && $contentLoadTriggered == false)
{
$contentLoadTriggered = true;
$.ajax (
{
type: "POST",
url: "LoadOnScroll.aspx/GetDataFromServer",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg)
{
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
},
error: function (x, e)
{
alert("The call to the server side failed. " + x.responseText);
}
}
);
}
}
);
}
);
and also add the Jquery file
jquery-1.6.2.min.js. click here to download jquery http://code.jquery.com/jquery-1.6.2.min.js
For Source code please drop ur mail id
0 comments:
Post a Comment