Ajax "infinite scroll" shoutbox issues
Greetings!
Having designed an AJAX shoutbox in ASP.NET, I'm facing two minor issues with it.
The shoutbox is simple : 10 records loaded in a literal, a texfield, a send button and a scrollbar inside.
When you scroll to the top of the shoutbox, it overlays a loading div and makes an AJAX call to fetch the ten previous records. Then hides the loading div.
My problems are :
- Any AJAX element (like the updatepanel containing my shoutbox for example) will display the overlaying div when triggered....and never hide it again. I'd like my overlay to be affected only by the scrollbar.
- When I scroll to the top, records are loaded but the scrollbar expands downwards. If I want to query more records, I need to scroll a little bit down and up again. Is it possible to get the scrollbar to expand upwards ?
Thanks very much.
Code is below :
-
<script type="text/javascript">
var isMore = true;
$(document).ready(
//Loading DIV is initially hidden
function() {
$(".divProgress").hide();
var contentPanel = $get("<%=PanelGraffitisDisplay.ClientID %>");
contentPanel.scrollTop = $(this).height();
$(".divGraffitis").scroll(
function() {
//triggering point is when the contentPanel scrollTop value is 0
if (contentPanel.scrollTop == 0 && isMore) {
//progress bar
$(".divProgress").ajaxStart(function() {
$(this).show();
});
$(".divProgress").ajaxStop(function() {
$(this).hide();
});
//make a async call to fetch the incremental results
$.post("AsyncHandler.ashx", "", function(data) {
if (data != "endOfComments") {
//prepend new result set to last row
$(".divGraffitis").prepend(data);
}
else {
isMore = false;
}
});
}
});
});
</script>