Jump to content

Recommended Posts

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!!!

 

 

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...