Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jul 29th, 2012  |  syntax: None  |  size: 7.03 KB  |  hits: 13  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Notify when end of inner div is reached on scrolling outer div
  2. <html><head></head>
  3. <body>
  4.      <div id = "outer" style= "width:200px;height:200px; overflow:auto;">
  5.          <div id = "#1" class = "inner"> blah blah </div>
  6.          <div id = "#2" class = "inner"> blah blah </div>
  7.          <div id = "#3" class = "inner"> blah blah </div>
  8.          <div id = "#4" class = "inner"> blah blah </div>
  9.      </div>
  10. </body>
  11. </html>
  12.        
  13. <div id = "outer" style="width:200px;height:200px; overflow:auto;">
  14.      <div id = "#1" class = "inner"> blah blah </div>
  15.      <div id = "#2" class = "inner"> blah blah </div>
  16.      <div id = "#3" class = "inner"> blah blah </div>
  17.      <div id = "#4" class = "inner"> blah blah </div>
  18.      <div id = "#5" class = "inner"> blah blah </div>
  19.      <div id = "#6" class = "inner"> blah blah </div>
  20.      <div id = "#7" class = "inner"> blah blah </div>
  21.      <div id = "#8" class = "inner"> blah blah </div>
  22.      <div id = "#9" class = "inner"> blah blah </div>
  23.      <div id = "#10" class = "inner"> blah blah </div>
  24.      <div id = "#11" class = "inner"> blah blah </div>
  25.      <div id = "#12" class = "inner"> blah blah </div>
  26.  </div>​
  27.        
  28. jQuery(
  29.   function($)
  30.   {
  31.     $('#outer').bind('scroll', function()
  32.     {
  33.       if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
  34.       {
  35.         alert('end reached');
  36.       }
  37.     })
  38.   }
  39. );​
  40.        
  41. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  42. <html xmlns="http://www.w3.org/1999/xhtml">
  43. <head>
  44.     <title></title>
  45.     <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
  46.     <script type="text/javascript">
  47.         $(document).ready(function () {
  48.             var outerHeightDiv = [], sumHeight = 0;
  49.             $('#outer').find('.inner').each(function (i) {
  50.                 sumHeight += $(this).outerHeight();
  51.                 outerHeightDiv.push(sumHeight);
  52.             });
  53.  
  54.             $('#outer').scroll(function () {
  55.                 var scrollTopHeight = $(this).scrollTop();
  56.                 var indexNo = $.inArray(scrollTopHeight, outerHeightDiv);
  57.                 //$('#Result').text('Innner div id is:' + indexNo + ' ' + scrollTopHeight + ' ' + outerHeightDiv.join(',')).show();
  58.                 if (indexNo > -1) {
  59.                     $('#Result').text('Innner div id is:' + $('#outer .inner:eq(' + indexNo + ')').attr('id')).fadeIn(600).fadeOut(600);
  60.                 }
  61.             });
  62.         });
  63.     </script>
  64. </head>
  65. <body>
  66.     <span id="Result" style="color: Red; font-size: 15px; font-weight: bolder; display: none;">
  67.     </span>
  68.     <div id="outer" style="width: 200px; height: 200px; overflow: auto;">
  69.         <div id="#1" class="inner">
  70.             blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  71.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah
  72.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  73.             blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah blahblah
  74.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  75.             blahblah blahblah blahblah blahblah blahblah blah blah blah blah blahblah blahblah
  76.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  77.             blahblah blahblah blahblah blahblah blah blah blah blah blahblah blahblah blahblah
  78.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  79.             blahblah blahblah blahblah blah blah blah blah blahblah blahblah blahblah blahblah
  80.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  81.             blahblah blahblah blah blah blah blah blahblah blahblah blahblah blahblah blahblah
  82.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  83.             blahblah blah blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah
  84.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  85.             blah blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  86.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah
  87.             ----------------------------------------------------
  88.         </div>
  89.         <div id="#2" class="inner">
  90.             blah blah blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  91.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah
  92.             blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  93.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah
  94.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  95.             blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah blahblah
  96.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  97.             blahblah blahblah blahblah blahblah blahblah blah blah blah blah blahblah blahblah
  98.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  99.             blahblah blahblah blahblah blahblah blah blah blah blah blahblah blahblah blahblah
  100.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  101.             blahblah blahblah blahblah blah ----------------------------------------------------
  102.         </div>
  103.         <div id="#3" class="inner">
  104.             blah blah blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  105.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah
  106.             blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  107.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah
  108.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  109.             blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah blahblah
  110.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  111.             blahblah blahblah blahblah blahblah blahblah blah blah blah blah blahblah blahblah
  112.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  113.             ----------------------------------------------------
  114.         </div>
  115.         <div id="#4" class="inner">
  116.             blah blah blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  117.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah
  118.             blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  119.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah blah blah blah
  120.             blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah
  121.             ----------------------------------------------------
  122.         </div>
  123.     </div>
  124. </body>
  125. </html>
create a new version of this paste RAW Paste Data