Is it possible to automatically scroll the contents inside a div tag?

I have a large amount of data within a div. To manage this, I've utilized the overflow property to hide the excess content. Now, my goal is to automatically scroll the scrollbar to the left in order to display the 4th, 5th, and 6th elements of the first row as well as the 4th, 5th, and 6th elements of the second row. Additionally, after a few seconds, I would like the scrollbar to move even further to reveal the 7th, 8th, and 9th elements of the first row along with the 7th, 8th, and 9th elements of the second row.

I am seeking advice on how to achieve this functionality. Are there any helpful JavaScript/jQuery plugins that could assist in addressing this issue?
For reference, here is the link to my JsFiddle.

javascriptjquerycss

Answer №1

In my opinion, adding 'scroll="auto"' inside the BODY tag of the popup should solve the issue.

Answer №2

Check out this example on jsFiddle

To implement scrolling in the .gallery, follow these steps:

var scrollTimer;

function stopScrolling()
{
    clearTimeout(scrollTimer);
}

function startScrolling()
{
    var gallery = $(".gallery");

    // Disable scroll event to prevent interference
    gallery.off("scroll");

    gallery.animate({ scrollLeft: "+=" + gallery.width() },
                function() {
                    setTimeout(function(){
                        // Re-enable scroll event after animation ends
                        gallery.on("scroll", stopScrolling);
                    }, 1);
                });

    // If not at the end, continue scrolling
    if (gallery.get(0).scrollWidth > (gallery.get(0).scrollLeft + gallery.width()))
        scrollTimer = setTimeout(startScrolling, 3000);
}

$(".gallery").on("scroll", stopScrolling);

// Start the scrolling loop
startScrolling();

For an alternative version, click here

Answer №3

Hey there! Want to see how you can simplify the code? Check this out:

$(document).ready(function(){
    lastElement = $('.demo').position().left ;
    scrollAmount = lastElement + 200 ;
    //alert(scrollAmount);

$('.demo').animate({scrollLeft: scrollAmount},1000);
});

If you want to test it, here's the demo link: http://jsfiddle.net/uaewc/307/

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

The JavascriptExecutor in Selenium with Java is experiencing issues and is not functioning properly for Firefox version 24.0

In a few of my test cases, I've been using the following command because it's quite useful when trying to click on a hidden element that only appears when hovered over some context: ((JavascriptExecutor)driver).executeScript("$('selector_fo ...

javajavascriptseleniumselenium-webdriver

Positioning a div on the right side of its parent div

Hi there! I'm currently working on a small navbar that has two sections: the left section with an arrow icon and the right section with two icons - an envelope and an exclamation triangle. I've been trying to position the right section in the top ...

javascriptjqueryhtmlcsstwitter-bootstrap

Emphasize the search term "angular 2"

A messenger showcases the search results according to the input provided by the user. The objective is to emphasize the searched term while displaying the outcome. The code snippets below illustrate the HTML and component utilized for this purpose. Compon ...

javascriptangularhtmltypescript

jQuery's ajax function fails to detect a 401 error

Having trouble with exception handling on the client side? Everything was going smoothly until I introduced HTTP401. Take a look at my base controller that overrides OnException: protected override void OnException(ExceptionContext filterContext) { va ...

jqueryajaxasp.net-mvc

Displaying a Modal with a Click Action

I am encountering a challenge in displaying a modal when clicked using onClick(). In a component, I have a function that adds players to a list when the Add Player button is clicked. This button is generated separately in a function called renderAddButton( ...

javascriptreactjsbootstrap-4bootstrap-modal

Button triggered page refresh after Ajax content load

After using AJAX to load a page into a div, everything seems to be working as expected. However, I'm encountering an issue where clicking on buttons within the loaded content causes the entire page to refresh unexpectedly. This behavior is inconsisten ...

javascriptjqueryajax

The selection discrepancy is due to the misalignment between the cursor and white space in the CSS styling

Upon close inspection, I've discovered that a discrepancy exists between the selection on my webpage and the cursor position. After investigating further, I uncovered the following reasons: Presence of white-space between the start tag <p> and ...

htmlcssgoogle-chrome

MongoDB's addToSet function does not include duplicates when adding values

I have a MongoDB collection that looks like this: [ { "acronym": "front", "references": [ { "date": "2020-03-04", "value": "5.6" }, { ...

javascriptnode.jsmongodbcrud

Compose an abbreviated version of the function

I am facing an issue with a function that involves calling out specific states with similar lines of code. Below is the function in question: DoThis(type) { if (type === 'a') { this.setState({ activeA: { display: 'block', opac ...

javascriptreactjsecmascript-6react-functional-component

`Slide bootstrap carousel without moving other elements`

.carousel { position: relative; height: 500px; .carousel-inner .item { height: 500px; } .carousel-indicators > li { margin: 0 2px; background-color: $maincolor; border-color: $maincolor; opacity: .7; ...

htmlcsstwitter-bootstrapsass

Difficulty encountered when consolidating intricate data attributes into a single array

I have a task to tackle in the code snippet below. My goal is to collect all the data in the age attributes and store them in a single array, formatting it as shown here: output = [48, 14, 139, 49, 15, 135, 51, 15, 140, 49, 15, 135, 51, 15, 140, 52, 16, ...

javascriptjqueryarrays

Mozilla Firefox does not have the capability to support preloading

I am having an issue with preloading CSS sheets. I attempted to preload the CSS sheet using the preload attribute in HTML. It works fine on Google Chrome, but unfortunately, it does not work on Firefox. <head> <link href=assets/css/master.c ...

htmlcssfirefoxoptimizationpreload

Extracting a data element from a JSON array nested within an object

I am attempting to retrieve a value from a JSONP web-service, however I am unsure of the method to access this specific value within the JSON array. $('#bookThumbnaill').attr('src', bookDetails.volumeInfo.imageLinks.thumbnail); $(&apo ...

jqueryajaxarraysjsongoogle-api

Having trouble with my WordPress theme not recognizing my CSS file

My file path is displayed below: D:\web server\blog.dev.cc\wp-content\themes\ablog\css for java script file path D:\web server\blog.dev.cc\wp-content\themes\ablog\assets\js Despite checking ...

csswordpressfunctionbootstrap-4stylesheet

Creating an Ajax request in Angular using ES6 and Babel JS

I have been exploring a framework called angular-webpack-seed, which includes webpack and ES2016. I am trying to make a simple AJAX call using Angular in the traditional way, but for some reason, it is not working. export default class HomeController { ...

javascriptjqueryangularjsajaxwebpack

Discovering the dynamic features on a webpage by utilizing the Document Object Model (DOM

What's the best way to determine if an element is interactive using DOM? I've noticed that some elements in the DOM don't have an onclick event, yet they are clickable. Websites created with various frameworks tend to behave differently in ...

javascriptdomdom-eventsconsole.log

The div is identified by an ID and a class, but the class is not being utilized by the div

Can someone please explain why the font size, background color, and font weight are not applying to the content in the "welcome" class in this simple HTML/CSS code below? The DIV has both an ID and a class, yet the styles are not being reflected. Any insi ...

htmlcss

Is it possible to reveal the JS constructor for a front end NPM library?

After finally publishing my first package on NPM, I encountered some frustrating issues that I just can't seem to solve. I have a feeling that the solution is right in front of me, but I need to ask for help before I lose my mind. The problem arises ...

javascriptnpmfrontend

What is the best way to transform a current callback API into promises?

Exploring the transition to working with promises poses a challenge when dealing with callback APIs structured as follows: ###1. Handling DOM load or other one-time event: window.onload; // set to callback ... window.onload = function() { }; ###2. Utili ...

javascriptnode.jscallbackpromisebluebird

Attempting to extract data from a JSON object within a multidimensional array

Looking at the JSON structure that I need to work with: [ { "result":"OK", "message":"Display", "value":200, "rows":29 } , [ { "personID":1, "img_path":"/1234/", "img ...

javascriptarraysjsonobject