Automatically scroll the element both up and down

I am working on a bootstrap table that needs to automatically scroll vertically. The table will be displayed on a screen and could have varying numbers of items, so I want it to continuously auto-scroll for the user's convenience. Once it reaches the end, it should reset and start from the top...

This is what my markup looks like:

<div class="table-responsive" style="height: 700px; overflow: auto;">
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th style="text-align: left; font-size: 23px;">#</th>
        <th style="text-align: left; font-size: 23px;">Name</th>
        <th style="text-align: left; font-size: 23px;">Description</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
      </tr>
    </thead>
    <tbody>
      <tr class="danger">
        <td style="text-align: left; font-size: 16px;">1213</td>
        <td style="text-align: left; font-size: 16px;">John Doe</td>
        <td style="text-align: left; font-size: 16px;">my short description</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
      </tr>
    </tbody>
  </table>
</div>

NOTE: I am looking for a solution using only HTML and CSS.

Do you have any suggestions?

javascripthtmlcsstwitter-bootstrap

Answer №1

To achieve the desired animation effect, JS (or jQuery) must be utilized to access the actual values of the element's height and scrollHeight.

var $el = $(".table-responsive");
function animateScroll() {
  var currentScrollTop = $el.scrollTop();
  var maxScrollBottom = $el.prop("scrollHeight") - $el.innerHeight();
  $el.animate({scrollTop: currentScrollTop < maxScrollBottom/2 ? maxScrollBottom : 0}, 4000, animateScroll);
}
function stopAnimation(){
  $el.stop();
}
animateScroll();
$el.hover(stopAnimation, animateScroll);
.table-responsive{
  height:180px; width:50%;
  overflow-y: auto;
  border:2px solid #444;
}.table-responsive:hover{border-color:red;}

table{width:100%;}
td{padding:24px; background:#eee;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table-responsive">
  <table class="table table-bordered table-hover">
    <thead>
      <tr><th>#</th></tr>
    </thead>
    <tbody>  
      <tr><td>1</td></tr>
      <tr><td>2</td></tr> 
      <tr><td>3</td></tr> 
      <tr><td>4</td></tr> 
      <tr><td>5</td></tr> 
      <tr><td>6</td></tr> 
      <tr><td>7</td></tr> 
      <tr><td>8</td></tr> 
      <tr><td>9</td></tr> 
      <tr><td>10</td></tr> 
    </tbody>
  </table>
</div>

Answer №2

It is strongly advised to utilize javascript for this task. I previously attempted to achieve it with CSS alone, but quickly abandoned the approach due to its theoretical feasibility. The demonstration below has not been thoroughly tested on all browsers, exhibits significant compatibility issues, and performed poorly on Safari. Lesson learned: opt for javascript.

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);

.table-responsive {
  overflow-x: hidden;
}

table.table {
  animation: ani linear 1s alternate infinite;
}

.table-responsive:hover {
  overflow: auto;
}
.table-responsive:hover table.table {
  animation: none ;
}

@keyframes ani {
0% { margin-left: 0; transform: translate3d(0%, 0, 0);}
25% { margin-left: 0; transform: translate3d(0%, 0, 0);}
75% { margin-left: 100%; transform: translate3d(-100%, 0, 0);}
100% { margin-left: 100%; transform: translate3d(-100%, 0, 0);}
}
<div class="table-responsive">
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th style="text-align: left; font-size: 23px;">#</th>
        <th style="text-align: left; font-size: 23px;">Name</th>
        <th style="text-align: left; font-size: 23px;">Description</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
      </tr>
    </thead>
    <tbody>  
      <tr class="danger">
        <td style="text-align: left; font-size: 16px;">1213</td>
        <td style="text-align: left; font-size: 16px;">John Doe</td>
        <td style="text-align: left; font-size: 16px;">my short description</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
      </tr> 
    </tbody>
  </table>
</div> 

<div class="table-responsive">
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th style="text-align: left; font-size: 23px;">#</th>
        <th style="text-align: left; font-size: 23px;">Name</th>
        <th style="text-align: left; font-size: 23px;">Description</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
      </tr>
    </thead>
    <tbody>  
      <tr class="danger">
        <td style="text-align: left; font-size: 16px;">1213</td>
        <td style="text-align: left; font-size: 16px;">John Doe</td>
        <td style="text-align: left; font-size: 16px;">my short description</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
      </tr> 
    </tbody>
  </table>
</div>

Answer №3

The code provided does not completely reset the table as requested, but it serves as a useful reference for readers interested in implementing an auto-scrolling feature for table rows with a fixed header.

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    $.fn.infiniteScrollUp=function(){
    var self=this,kids=self.children()
    kids.slice(20).hide()
    setInterval(function(){
    kids.filter(':hidden').eq(0).fadeIn()
    kids.eq(0).fadeOut(function(){
    $(this).appendTo(self)
    kids=self.children()
    })
    },1000)
    return this
    }
    $(function(){
    $('tbody').infiniteScrollUp()
    })
    </script>
    <title>infiniteScrollUp</title>
    </head>
    <body>
    <table>
    <colgroup><col /><col /><col /><col /><col /><col /></colgroup>
    <thead>
    <tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th></tr>
    </thead>
    <tbody>
    <tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    ...
    <tr><td>1z</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    </tbody>
    </table>
    </body>
    </html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring methods to conduct testing on an AngularJS application using AngularJS end-to-end testing, specifically focusing on scenarios involving multiple inputs

Our program includes a directive that is repeated multiple times with an input field. The structure of our code resembles the following: <li> <label>AMI</label> <div class="searchbox" searchbox="" filter="search.ami"> ...

javascripttestingangularjsangularjs-e2e

The Ajax request was a success, but I am unable to retrieve radio button values from the $_POST variable

My website operates fully asynchronously, generating and destroying HTML elements on button clicks that prevent navigation. In this section, I am creating a form with an array of radio boxes for rating from 1 to 10. This form is submitted using jQuery.aja ...

javascriptphpjqueryhtmlajax

Customize WordPress pages by adding a variety of unique logos for a

I am currently customizing a WordPress theme (Increate themes) for a client. They are looking to have a page with different content and a unique logo. My question is, how can I change the logo specifically for this page? This is the section of code in my ...

phpwordpresshtml

Determine the mean value from an array of JSON objects in an asynchronous manner

Can you help me calculate the average pressure for each device ID in this JSON data set? [ { "deviceId": 121, "Pressure": 120 }, { "deviceId": 121, "Pressure": 80 }, { "deviceId": 130, "P ...

javascriptarraysnode.jsjsonasynchronous

I need assistance in testing the component with the react query library as it requires a query client

I am encountering a specific issue while adding tests and need help to resolve it. I want to know how to set the query client inside the register page itself. Register.jsx --- Main page for user registration where I am attempting DOM testing. /* eslint ...

javascriptreactjschai

What is the best way to wait for the state to be set before mapping the array

I have some data stored in an array (shown in the screenshot below) that I am trying to map, but I am facing issues accessing it as it is loaded asynchronously. How can I await the data? Is there a way to achieve this within the render function? render() ...

javascriptreactjstypescriptreact-native

Display a Button exclusively at the bottom row of a Table using just Javascript

I am currently working on a 4-column table with a "+" button in the last column. This button's purpose is to add an additional column when clicked. However, the button is appearing in all rows of the table, and I would like it to be displayed only in ...

javascripthtmluser-interfacebootstrap-4

Incorporate a PHP-generated array into JavaScript

I'm currently working on implementing a JavaScript slideshow on my index page. Rather than having a static array, I'd like to dynamically build the array using PHP and then include it in the script. However, I'm not sure how to go about this ...

javascriptphp

Fullcalendar JS will easily identify dates with events, allowing users to simply click on those dates to redirect to a specific URL

When looking at the official example, we can see that the events are displayed in a typical calendar format: https://fullcalendar.io/js/fullcalendar-3.5.0/demos/basic-views.html Each event is listed in the calendar, and clicking on an individual event wi ...

javascriptjquerypluginsfullcalendar

Tips for emphasizing the currently pressed button element when clicked in Angular 2?

Here is the code snippet I am currently working with: <button *ngFor="let group of groupsList" attr.data-index="{{ group.index }}" (click)="processGroups(group.index)">{{ group.title }}</button> I am trying to figure out if it is possible to ...

javascriptangulartypescript

Encountering timeout issues while implementing routes in VueJS

Currently, I am utilizing VueJS to send data to the server and then navigate to another route. I attempted the following code: saveSupportArea: function () { this.toast("success"); var that = this; setTimeout(function(that){ that.$rou ...

javascriptvue.jsvue-router

The utilization of Display Flex resulting in the enlargement of the containing div

I am currently learning CSS and trying out some new things. I am looking to create a page with two side-by-side divs: one for the sidebar and the other for the main content. My goal is to have the sidebar take up 400px of width and allow the content part t ...

cssflexboxresponsive-design

Executing a callback function in Swift using JavaScriptCore

Struggling to figure out how to call a Javascript Function with a callback from Swift, but it's not working as expected. Here's what I have: Javascript: global.calculateWithCb = function(temp,cb){ cb(5 * temp) } global.calculate = functi ...

javascriptiosswiftcallbackjavascriptcore

Having trouble with importing a TypeScript class: encountering a "cannot resolve" error message

Could you lend me your expertise? I'm puzzled by this issue that seems to be quite simple and straightforward: export class Rectangle { height: number = 0 width: number = 0 constructor(height: number, width: number) { this. ...

javascripttypescriptclassimport

Chai-http does not execute async functions on the server during testing

In my app.js file, there is a function that I am using: let memoryCache = require('./lib/memoryCache'); memoryCache.init().then(() => { console.log("Configuration loaded on app start", JSON.stringify(memoryCache.getCache())); }); app.use( ...

javascriptexpressmocha.jschaichai-http

ng-enter animation not working for ui-view nested within another ui-view after page reload

It seems like the issue lies with the ng-enter event not being properly triggered in the lowest level of the ui view hierarchy. I'm unsure how to resolve this problem effectively. In my extensive angularjs application, nested sub-views work flawlessl ...

javascriptangularjsangular-ui-router

Is there a way to insert a clickable hyperlink in the text of a MessageDialog?

I am currently working on MessageDialog code that looks like this: MessageDialog dlg = new MessageDialog("None of the images you selected contain location information. You can add your own after downloading http://exifpilot.com/"); await dlg.ShowAsync(); ...

c#htmlhyperlinkwindows-store-appsmessagedialog

Instructions for making text stand out on a background image and allowing it to move across the image

I'm looking to create a unique effect where a background image only shows through knockout text and then have that text animate from the top of the page to the bottom, revealing different parts of the background image as it moves. Although I know how ...

htmlcssbackground-image

`The value of an element within an array changes automatically`

In my current setup, I have a traditional array where each element represents an HTML element. The issue arises when I manipulate these elements within the array; any changes made to the HTML element also reflect in the array automatically. However, I pref ...

javascripthtmlcssarrays

What is the best way to arrange the elements of a dropdown list in reverse order?

I have the following code snippet used to retrieve data from a database and display it in a dropdown list: @{ int m = 1; foreach (var item in Model.MessagesList) { if (@item.receiverUserId == userId) { <li> <a class=&qu ...

javascriptjqueryasp.net