infinite scrolling stops if I zoom my browser
I've got a page with infinite scrolling that works fine when the user's browser's zoom is at 100%. If the user zooms in on the page or zooms out (ie anything other than 100%) the scrolling eventually breaks and the page will stop retrieving records, even though there are many more to get.

How do I correct that?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    	<title></title>
    	<script type="text/javascript" src="../../jquery/jquery-1.7.1.js"></script>
    	<script type="text/javascript">
    		$(window).scroll(function(){
    		    if($(window).scrollTop() == $(document).height() - $(window).height()){
    		    	$('div#loadmoreajaxloader').show();
    				$.ajax({
    					url: "test2.php?lastid=" + $(".postitem:last").attr("id"),
    					success: function(html){
    						if(html){
    							$("#postswrapper").append(html);
    							$('div#loadmoreajaxloader').hide();
    						}else{
    							$('div#loadmoreajaxloader').html('<center>That\'s the Last One!</center>');
    						}
    					}
    				});
    		    }
    		});
    	</script>
    
    	<style>
    	  .postitem{
          font-size: 16px;
    	  padding: 5px 0 15px 0;
    	  }
    	</style>
    </head>
    <body>
    <div id="hycucdemosbody">
    	<div id="wrapper">
    		<div id="postswrapper">
    			<?php
    			for($counter=0; $counter <= 50; $counter += 1){
                  echo "\n".'<div class="postitem" id="'.$counter.'">Post no '.$counter.'</div>'; 			
    			}
    			?>
    		</div>
    		<div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif"/></center></div>
    	
    	</div>
    </div>
  
    </body>
    </html>

here's test2.php:

    <?php
    if(isset($_GET['lastid'])){
    $counter=addslashes($_GET['lastid']) + 1;
    $total=$counter+25;
      for($counter; $counter <= $total; $counter += 1){
       echo "\n".'<div class="postitem" id="'.$counter.'">Post no '.$counter.'</div>'; 			
      }
    }
    ?>



infinite scrolling stops if I zoom my browser
===

I've got a page with infinite scrolling that works fine when the user's browser's zoom is at 100%. If the user zooms in on the page or zooms out (ie anything other than 100%) the scrolling eventually breaks and the page will stop retrieving records, even though there are many more to get.

How do I correct that?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    	<title></title>
    	<script type="text/javascript" src="../../jquery/jquery-1.7.1.js"></script>
    	<script type="text/javascript">
    		$(window).scroll(function(){
    		    if($(window).scrollTop() == $(document).height() - $(window).height()){
    		    	$('div#loadmoreajaxloader').show();
    				$.ajax({
    					url: "test2.php?lastid=" + $(".postitem:last").attr("id"),
    					success: function(html){
    						if(html){
    							$("#postswrapper").append(html);
    							$('div#loadmoreajaxloader').hide();
    						}else{
    							$('div#loadmoreajaxloader').html('<center>That\'s the Last One!</center>');
    						}
    					}
    				});
    		    }
    		});
    	</script>
    
    	<style>
    	  .postitem{
          font-size: 16px;
    	  padding: 5px 0 15px 0;
    	  }
    	</style>
    </head>
    <body>
    <div id="hycucdemosbody">
    	<div id="wrapper">
    		<div id="postswrapper">
    			<?php
    			for($counter=0; $counter <= 50; $counter += 1){
                  echo "\n".'<div class="postitem" id="'.$counter.'">Post no '.$counter.'</div>'; 			
    			}
    			?>
    		</div>
    		<div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif"/></center></div>
    	
    	</div>
    </div>
  
    </body>
    </html>

here's test2.php:

    <?php
    if(isset($_GET['lastid'])){
    $counter=addslashes($_GET['lastid']) + 1;
    $total=$counter+25;
      for($counter; $counter <= $total; $counter += 1){
       echo "\n".'<div class="postitem" id="'.$counter.'">Post no '.$counter.'</div>'; 			
      }
    }
    ?>


