Hello,
I am using the following code to provide endless scrolling of content on my website. The code works fine and I have no problems with any of it with the exception of one minor thing. When I have no more results to display, the endless scrolling Javascript continues to activate and tries to load more results when the browser's scroll bar touches the bottom. Does anyone know how I can simply just terminate the javascript endless scrolling script once my classic ASP determines that there are no more results to load? I am guessing there is some sort of a "terminate all scripts" function or javascript routine I can use to just stop the infinite scrolling from executing in the current session?
Thanks for any help.
I am using the following code to provide endless scrolling of content on my website. The code works fine and I have no problems with any of it with the exception of one minor thing. When I have no more results to display, the endless scrolling Javascript continues to activate and tries to load more results when the browser's scroll bar touches the bottom. Does anyone know how I can simply just terminate the javascript endless scrolling script once my classic ASP determines that there are no more results to load? I am guessing there is some sort of a "terminate all scripts" function or javascript routine I can use to just stop the infinite scrolling from executing in the current session?
Thanks for any help.
Code:
<html>
<head>
<style>
.wrdLatest {
position: relative;
display:block;
}
}
#lastPostsLoader {
text-align: right;
width: 20px;
margin: 125px auto 0 auto;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
</style>
<script type="text/javascript" src="/scroll/jquery-1.2.6.pack.js"></script>
<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT">
//Start Endless Scroll Script
$(document).ready(function(){
$('form#mainForm').bind('submit', function(e){
e.preventDefault();
checkForm();
});
$('input#hostName').focus();
//Loading More content
function lastPostFunc()
{
$('div#lastPostsLoader').html('<img class="centered" src="/scroll/rolling.gif">');
$.post("/?thesearch=<%=thesearch%>&location=<%=location%>&action=getLastPosts&start="+$(".wrdLatest:last").attr("id"),
function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
//Scroll Detection
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});
});
</script>
</head>
<body>
' *** Very first set of results to be loaded and displayed:
<% If action <> getLastPosts Then %>
<span>[i]First Page of content. Enough content would be loaded in this area to where the user would have to scroll to see more [/i]</span>
<% start = start + 25 %>
<div class="wrdLatest" id="<%=start%>">
<div id="lastPostsLoader"></div>
<% Else
' **** This is where more content would get added to the bottom of the previous page if the user's scrollbar touches the bottom %>
<span>[i]Enough content would be loaded in this area to where the user would have to scroll down to see more content. [/i]</span>
<span>[i]If there isn't a lot of content here, then we want to simply just end the infinite scroll javascript and prevent it from executing if the user's scroll bar touches the bottom.[/i]</span>
<% start = start + 25 %>
<div class="wrdLatest" id="<%=start%>"></div>
<% End If %>
</body>
</html>