Menu
This is my view code I used jQuery it works and I didn't have any problem until I have changed the screen resolution it stops working. I know where is the problem but I can't solve it look at the code :
@model PNUBOOKIR.Models.ProductModels
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script type="text/javascript">
var endRun = false;
var PageNO = 1;
$(window).scroll(function () {
if ((($("#container").outerHeight() - 796) == ($(this).scrollTop())) && (!endRun)) {
endRun = true;
Load();
}
});
$(document).ready(function () {
Load();
return false;
});
function Load() {
var BtnShowMore = document.getElementById("BtnShowMore");
BtnShowMore.innerHTML = "Loading...";
$.ajax({ type: "Post",
url: "Product" + "/" + "GetHomeEventAjax",
data: "{" + "PageNO" + ":" + PageNO + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function succ(data, states) {
if (states == "success") {
if (data.Content != null) {
var EventListArea = document.getElementById("result");
$('#result > tbody:last').append(data.Content);
PageNO = PageNO + 50;
BtnShowMore.innerHTML = "More";
endRun = false;
}
else BtnShowMore.innerHTML = "Loading is complete";
}
},
error: function err(result) { alert(result.responseText); }
});
}
</script>
</head>
<body>
<div id="container">
<table cellpadding="4" cellspacing="2" border="1" style="width: 450px; direction: rtl;"
id="result">
<tbody>
<tr>
<th>کد کالا</th>
<th>نام کتاب</th>
<th>ناشر</th>
</tr>
</tbody>
</table>
<a style="width: 200px" id="BtnShowMore">
Load</a>
</div>
</body>
</html>
In the scroll event script I need to found out what is the maximum value of vertical scroll so I get the container outer-Height but is wasn't exactly the maximum value it is 796px greater than it in the 1280x1024 screen resolution it can be different in different screen resolution setting. I need some help what should be instead of "796" number.
936
Try:
$("#container").attr({ scrollTop: $("#container").attr("scrollHeight") });
Starting from JQuery 1.9.1, you'll need:
$("#container").scrollTop($("#container").prop("scrollHeight"));
The posted answer is incorrect; the maximum value of scrollTop is not scrollHeight, it's scrollHeight - outerHeight.
This will give you the correct value:
var elem = $("#container");
var maxScrollTop = elem[0].scrollHeight - elem.outerHeight();
Best way to do this with-out jQuery.
document.getElementById('container').scrollTop = document.getElementById('container').scrollHeight;
using jQuery it did't worked for me, so try this one if having problem with above.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
