Issue with scroll loader fade-in in IE8 using jQuery 1.5.1

Issue with scroll loader fade-in in IE8 using jQuery 1.5.1

Hi,

I've put together a scroll loader using jQuery and classic ASP which works fine in FF and Chrome on Mac and PC and Safari on the Mac. IE does not work correctly.

The scroll loader uses the example at Web Resource Depot ( http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/) as the basis of the loader. I've added an empty div with a height that allows the user to scroll down a little before retrieving the next set of items using the loader.asp script. Once retrived, I fade in the div and once displayed, re-id the div so the fade-in does not effect the displayed div on subsequent loads. 

It works fine it the browsers listed above but IE does not seem to accept the div has been re-id'd and duplicates the div displaying it twice.

Here's the code used in the main page, scroll.asp (I've removed the SQL):


<%@ LANGUAGE="VBSCRIPT" %>
<%option explicit%>
<!-- #include virtual="/en/includes/inc_functions.asp" -->
<%

dim lastID, action, RS999, SQL, getPostsText

lastID = Request.QueryString("lastID")
action = Request.QueryString("action")

Set RS999=Server.CreateObject("ADODB.RecordSet")

'We need to include the JS files and other standard HTML files here in order not to load them in every scroll.
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroll Loader</title>
</head>
<link rel="stylesheet" href="css.css" type="text/css" />
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form#mainForm').bind('submit', function(e){
e.preventDefault();
checkForm();
});
$('input#hostName').focus();
function lastPostFunc() 
$('div#lastPostsLoader').html('<img src="bigLoader.gif">');
$.post("loader.asp?action=getLastPosts&lastID="+$(".wrdLatest:last").attr("id"),
  
function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
$('div.xboxcontentnew').hide().fadeIn(1000);
        });
};  
$(window).scroll(function(){
if  ($(window).scrollTop() == $(document).height() - $(window).height()){
  lastPostFunc();
  $("div.xboxcontentnew").attr("class", "xboxcontent1");
}
}); 
});
</script>
<body>
<%
'The content loaded when the page is first loaded start
SQL="SELECT SOME ITEMS FROM THE DATABASE HERE"
RS999.Open SQL,s_DSN,1,1
While Not RS999.EOF
%>
<div class="wrdLatest" id="<%=RS999("rf_lot")%>">
<div class="xboxcontent1">
Lot <%=RS999("rf_lot")%>, <%=RS999("rf_descript")%>
</div>
</div>
<%
RS999.MoveNext
Wend
RS999.Close
'The content loaded when the page is first loaded end
%>
<div id="lastPostsLoader" style="height:500px;"></div>
</body>
</html>


Here's the code used in the loader, loader.asp (again, no SQL):

<%@ LANGUAGE="VBSCRIPT" %>
<%option explicit%>
<!-- #include virtual="/en/includes/inc_functions.asp" -->
<%

dim lastID, action, RS999, SQL, getPostsText, i_ID

lastID = Request.QueryString("lastID")
action = Request.QueryString("action")

Set RS999=Server.CreateObject("ADODB.RecordSet")


'When User Scrolls This Query Is Run Start
getPostsText = ""
'$! Lot must be treated as a string in SQL in order to retrive letter lots
SQL="SELECT SOME MORE ITEMS FROM THE DATABASE HERE"
RS999.Open SQL,s_DSN,1,1
While Not RS999.EOF
           
        '$! Parse out letter suffixes from letter lots otherwise the jQuery function will fail as it expects a number 
        '$! Allow space to pass through so that trailing space remains (required for SQL to work with letter lots)
        i_ID = Constrain(RS999("rf_lot"), "1234567890 ") 
getPostsText = getPostsText & "<div class=""wrdLatest"" id=""" & i_ID & """>"
getPostsText = getPostsText & "<div class=""xboxcontentnew"">Lot " & RS999("rf_lot") & ", " & RS999("rf_descript") & "</a></div></div>"

RS999.MoveNext
Wend
RS999.Close
Response.Write getPostsText 'Writes The Result Of The Query
'When User Scrolls This Query Is Run End
%>

You can see this in action here -  http://dev.outeraxis.com:777/en/wrd-scroll/scroll.asp

This is only the basic framework, the plan is to add images etc. to the page.

I am open to alternative methods, so if there is a better way of doing this I'd be please to hear about it.

Top marks to anyone who can respond without making snide comments about using classic ASP (sorry but it's what the customer site uses!).

Thanks in advance.

    • Topic Participants

    • dave