Unending horizontal flow of divs inside a container div

I have been experimenting with creating a continuous strip of logos that display customer quotes when selected. I have successfully implemented functionality for selecting and displaying the logos and quotes. However, I am facing an issue with making the logos scroll infinitely.

The problem arises when the logo divs go beyond the boundaries of their container. I have been attempting to remove the logos once they reach a certain point and then recreate them on the other end of the strip. Unfortunately, this solution is not working as smoothly as I had hoped.

Below is the HTML code for the logo strip:

<div class="logo-strip">
                <div id="logo-1" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-2" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-3" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-4" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-5" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>
                <div id="logo-6" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-7" class="logo">
                    <img src="http://www.henningsen.com/wp-content/themes/henningsen-cold-storage/images/logo-emboss.png">
                </div>
                <div id="logo-8" class="logo">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/ce/Safeway_Logo.svg/1280px-Safeway_Logo.svg.png">
                </div>
            </div>

Here is the CSS code for styling the logo strip:

 div.logo-strip {
 display: flex;
 height: 70px;
 width: 100%;
 overflow: hidden; }

div.logo-strip div.logo {
  display: flex;
  min-width: 112.5px;
  padding: 5px;
  cursor: pointer;
  opacity: .4;
  transition: .5s; }

    div.logo-strip div.logo img {
    object-fit: contain; }

  div.logo-strip div.selected-logo {
  opacity: 1; }

Lastly, here is the JavaScript code I have been working on:

( function( $ ) {


$('div#quote-1').removeClass('hidden');
$('div#quote-1').animate({'opacity' : '1'}, 500);
$('div#logo-1').addClass('selected-logo');

$('div.logo').click(function() {

    $('div.logo').removeClass('selected-logo');
    $(this).addClass('selected-logo');

    var logo_offset = $(this).offset().left - $('div.logo').first().offset().left;
    var negative_offset = logo_offset * -1;

    var strip_offset = $('div.logo-strip').offset().left - $('div.logo').first().offset().left;

    if (strip_offset >  100) {

        var to_be_cloned = $('div.logo').slice(0, 3);
        to_be_cloned.remove();
        $('div.logo').last().after(to_be_cloned);

    }

    console.log(strip_offset);
    console.log(to_be_cloned);

    $('div.logo').css({'transform' : 'translateX(' + negative_offset + 'px)'});

    var logo_id = $(this).attr('id');
    var logo_id_trimmed = logo_id.substr(5);

    $('div.customer-quote').addClass('hidden');
    $('div.customer-quote').css({'opacity' : '0'});
    $('div#quote-' + logo_id_trimmed).removeClass('hidden');
    $('div#quote-' + logo_id_trimmed).animate({'opacity' : '1'}, 500);
});

} )( jQuery );

I have been struggling with successfully implementing a seamless infinite scrolling feature for the logos in the strip. If anyone has any insights or solutions on how to achieve this, I would greatly appreciate it!

javascriptjqueryhtmlcss

Answer №1

Finally, the solution became clear to me.

Initially, the chaotic movement was happening because I was deleting divs from one end of the set and adding them to the other end, which caused everything to shift unexpectedly. The key was to clone the divs and place them at the end, ensuring that new divs were only being added at the end without removing any from the beginning.

Secondly, determining the index of both the previously selected div and the newly selected div was essential in creating the correct slice numbers.

Thirdly, it was crucial to shift the entire chain of divs by measuring the offset left of the newly selected div minus the offset left of the first div.

Additionally, starting with extra divs trailing outside of the designated area was necessary to prevent any strange movements at the beginning.

Below is the updated JavaScript code:

$('div.logo').click(function() {
    var previously_selected = $('div.selected-logo');
    var newly_selected = $(this);
    var number_of_previous_selection = $('div.logo').index(previously_selected);
    var number_of_new_selection = $('div.logo').index(newly_selected);
    var selection_distance = number_of_previous_selection - number_of_new_selection;

    $('div.logo').removeClass('selected-logo');
    $(this).addClass('selected-logo');

    var logo_offset = $(this).offset().left - $('div.logo').first().offset().left;
    var negative_offset = logo_offset * -1;
    var strip_offset = $('div.logo-strip').offset().left - $('div.logo').first().offset().left;

    var to_be_cloned = $('div.logo').slice(number_of_previous_selection, number_of_new_selection).clone(true);
    $('div.logo-strip').append(to_be_cloned);
    $('div.logo').css({'transform' : 'translateX(' + negative_offset + 'px)'});

    console.log(number_of_new_selection);
    console.log(number_of_previous_selection);
    console.log(negative_offset);

    var logo_id = $(this).attr('id');
    var logo_id_trimmed = logo_id.substr(5);

    $('div.customer-quote').addClass('hidden');
    $('div.customer-quote').css({'opacity' : '0'});
    $('div#quote-' + logo_id_trimmed).removeClass('hidden');
    $('div#quote-' + logo_id_trimmed).animate({'opacity' : '1'}, 500);
});

Here is the corresponding HTML:

<div class="quote-and-title">
    <!-- Include customer quotes here -->
</div>

<div class="logo-strip">
    <!-- Include logo images here -->
</div>

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

Any solutions for dealing with longer labels in Bootstrap form-floating?

Is there a way to use Bootstrap's form-floating feature with longer labels so that the text box automatically expands to accommodate the text but doesn't cut off on white-space wrap when too long? I'd like to avoid using position-relative to ...

htmlcssbootstrap-5

Develop a chart featuring sub-categories and column headings

I'm in the process of creating a table with subcategories and headers that resembles the image provided below: Here's what I've come up with so far: <table> <thead> <tr> <th>Item</th> & ...

htmlcss

Use vtip jQuery for showcasing titles

Currently, I am utilizing the vTip plugin for displaying titles upon hover. Here is a snippet of my code: http://jsfiddle.net/bnjSs/ In my HTML, there's a Div with the ID #showTitles. Whenever this Div is clicked, I aim to toggle the display of all ...

javascriptjquery

The CSS popup box fails to reset its data after being closed, and the closure button does not effectively close the popup

I am having an issue with a login popup on my website. Whenever I fill in the login or registration information and then close the popup, the next time I open it, the input box still contains the previous data. How can I reset the popup to always open with ...

javascripthtmlcssflexboxfrontend

Submit information into mysql using an html form (and beyond)

Hey there! I'm new to the world of MYSQL/PHP and currently working on a simple script to enhance my skills in php/mysql. However, I've hit a few roadblocks along the way. I apologize if some of these questions have already been asked before, but ...

phphtmlmysqlformsrow

Unable to get response from ajax call using $.post method

I am attempting to retrieve the selected elements' values using jQuery selection. Subsequently, these values are sent to a PHP script via AJAX and then retrieved from the database to be displayed on the same page (referred to as autocomplete). var ma ...

ajaxjquery

Implementing uniform 1px borders across Bootstrap columns

Is there a way to achieve a consistent 1px border around columns using only CSS, without creating a 2px border when two columns are side by side? I want the outer edges to have a 1px border while the inner borders have a double width due to being adjacent. ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Tips for implementing linear-gradient text in Android applications developed with React Native without using Expo

How can I implement linear-gradient text in react native mobile apps without using Expo? I want to apply a linear-gradient to change the text color. Is it possible to achieve this effect? If yes, please provide guidance on how to do it. If not, how do po ...

javascriptandroidreactjsreact-native

Color the area entirely in black

I am currently working on a project for one of my courses, where I have created a website for a specific service. However, I am facing some challenges and things are not going as smoothly as I had hoped. Here is a screenshot of the page: https://i.stack.im ...

htmlcss

What's the best way to link up rotated div elements?

I'm currently attempting to connect rotated divs at a 45-degree angle, but I'm struggling to find the solution. Here is the current state of the page: Here is a screenshot of the page: https://i.sstatic.net/jqPYJ.png This is what I am aiming f ...

htmlcssbootstrap-5

Exploring the seamless integration of Material UI with React version 18

I am having an issue with my background not turning black in React version 18.2.0 when using makeStyles from Material UI version 4. Despite no errors in the code, the background remains unchanged. How can I fix this problem? import './App.css'; i ...

javascriptreactjsmaterial-ui

What is the best way to modify a current state object without causing an endless loop of redirects?

const useCase = (argument) => { const [value, setValue] React.useState(argument) React.useEffect(() => setValue({...value ...argument), [argument, value, setValue]) } The above code is currently causing an infinite loop due to setting the stat ...

javascriptreactjsreact-hooks

Automatically refresh online user list upon new user login

<?php <div class="someclass"> <ul class="someclass"> foreach ($this->showonline as $key => $friend) { <li> $friend['avatar']; $friend['name']; </l ...

phpjqueryajaxlivechat

Just delving into React for the first time and encountering undefined values in PropTypes

I am completely new to React and attempting to create a basic weather application in order to understand how components interact with each other. I have a forecast.json file that contains information such as temperature, date, humidity, wind speed, wind di ...

javascriptreactjs

Align the Media center div within a column utilizing Bootstrap

I have a template in html with a media object containing a logo and text, both within a column of width 5. Currently, it is not centered and aligned to the left. I am looking for a way to centrally align the media block within the column, regardless of its ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Adjusting the size of text with Bootstrap 3's font size buttons

I recently created a website using Bootstrap 3 and now I am looking to add two buttons. One button will increase the font size of all elements on the page, while the other button will decrease it (specifically for users with disabilities). For this functi ...

jquerytwitter-bootstrap-3

Customizing animations for birds

I'm currently in the process of developing a new website. The link to access the site is: One thing I am eager to achieve is having birds from this specific link incorporated into my background: I have attempted various methods without success. If a ...

javascripthtmlthree.jsboids

Creating a predictive text feature using AngularJS and jQuery

Currently, I'm developing a web application that utilizes: JQuery AngularJS Kendo framework Specifically, I am tasked with implementing an auto-complete feature using Kendo on an input text field. Initially, my approach was to target the inp ...

javascriptjqueryangularjskendo-ui

Setting up a basic webhook server with Node and Express

I'm struggling to locate comprehensive tutorials on webhooks for beginners. Being new to this concept, I have only come across basic explanations of how they operate. Our current requirement is to inform users of our APIs about new records. With Kafk ...

javascriptnode.jsrestexpresswebhooks

What is the process by which nodejs interprets and analyzes c++ code?

My expertise lies in Javascript, but I'm intrigued by the connection between Node.js and C++. Despite their differences, I wonder how they interact and communicate with each other. ...

javascriptc++node.js