Table Autoscroll

[cgonzalezalcala]

Hi tech savvy friends!

I am trying to use a javascript code I found online that enables a table to autoscroll. I want to use this to showcase a list of supporters of our organization (using Caspio's Gallery Report), and I need this function because 1) caspio only allows 999 records to be display in the tabular report, and 2) I don't want viewers to have to click through the pages to show the rest of the records.

The javascript I found is this: 

<script>
  var my_time;
$(document).ready(function() {
  pageScroll();
  $("#contain").mouseover(function() {
    clearTimeout(my_time);
  }).mouseout(function() {
    pageScroll();
  });
});

function pageScroll() {  
	var objDiv = document.getElementById("contain");
  objDiv.scrollTop = objDiv.scrollTop + 1;  
  $('p:nth-of-type(1)').html('scrollTop : '+ objDiv.scrollTop);
  $('p:nth-of-type(2)').html('scrollHeight : ' + objDiv.scrollHeight);
  if (objDiv.scrollTop == (objDiv.scrollHeight - 100)) {
    objDiv.scrollTop = 0;
  }
  my_time = setTimeout('pageScroll()', 25);
}
</script>

I am sure the code, as is, is not calling elements in Caspio, if I knew more coding (or had more time to look into it) I would try to mess with it. So, instead I am hoping one of you out there can help me out, please! I found this code here: https://codepen.io/salman31/pen/dYdGLa/

I would greatly appreciate your help with this. Thank you!!!

 

 

 

 

[Vitalikssssss]

Hi cgonzalezalcala,

 

I have been able to make this solution work in my Datapage. 

You should do following steps:

1. Datapage Header

Insert following code:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="contain">
<style>
#contain {
  height: 100px;
  overflow-y: scroll;
}
#table_scroll {
  width: 100%;
  margin-top: 100px;
  margin-bottom: 100px;
  border-collapse: collapse;
}
#table_scroll thead th {
  padding: 10px;
  background-color: #ea922c;
  color: #fff;
}
#table_scroll tbody td {
  padding: 10px;
  background-color: #ed3a86;
  color: #fff;
}
</style>

2. Datapage Footer

Insert following code:

</div>
<script>
  var my_time;
$(document).ready(function() {
  pageScroll();
  $("#contain").mouseover(function() {
    clearTimeout(my_time);
  }).mouseout(function() {
    pageScroll();
  });
});

function pageScroll() {  
 var objDiv = document.getElementById("contain");
  objDiv.scrollTop = objDiv.scrollTop + 1;  
  $('p:nth-of-type(1)').html('scrollTop : '+ objDiv.scrollTop);
  $('p:nth-of-type(2)').html('scrollHeight : ' + objDiv.scrollHeight);
  if (objDiv.scrollTop == (objDiv.scrollHeight - 100)) {
    objDiv.scrollTop = 0;
  }
  my_time = setTimeout('pageScroll()', 25);
}
</script>

This should do the trick.

 

Cheers,

vitalikssssss

[cgonzalezalcala]

Awesome! That did the trick.

Thank you Vitalikssssss!!!

[DaniloContreras]

On 11/10/2017 at 12:53 PM, Vitalikssssss said:

Hola cgonzalezalcala,

 

Pude hacer que esta solución funcione en mi página de datos. 

Debe hacer los siguientes pasos:

1.  Cabecera de la página de datos

Insertar el siguiente código:

2. Pie de página de datos

Insertar el siguiente código:

Esto debería funcionar.

 

Aclamaciones,

vitalikssssss

 

Hola gracias por el gran trabajo, pero tengo una duda si es posible.

Supongamos que mi tabla tiene filas de la A - Z, y cuando llega la fila Z, el scroll se detiene, sera posible implementar que cuando el scroll llegue a la fila Z, agregue inmediatamente la fila A, B, C... nuevamente creando un scroll infinito y continuo 

translate: 

Hi, thanks for the great job, but I have a doubt if it is possible.

Suppose that my table has rows from A to Z, and when row Z arrives, the scroll stops, it will be possible to implement that when the scroll arrives at row Z, immediately add row A, B, C ... again creating an infinite and continuous scroll