Achieving inline behavior for two divs using React

// Custom JavaScript code
const hookFunction = () => {
    const {useState, useEffect} = React;
    
    const Slider = props => {
        const { innerWidth: width, innerHeight: height } = window;
        const urls = [
            "https://www.imb.com.au/templates/client/images/header/IMB-logo.svg",
            "https://www.mkmcapital.com.au/wp-content/uploads/2016/08/MKM_logo-2.png",
            "https://www.pnbank.com.au/Static/Theme/assets/images/pnbank-logo-narrow--7465fe2f1d3e10cf7acfc008991cebef.svg",
            "https://www.provident.com.au/images/logo-blue.png",
            "https://www.adelaidebank.com.au/globalassets/globalresources/brand-logos/abl-logo.png",
            "https://www.amp.com.au/content/dam/amp-au/data/icons/amp-logo-reversed.svg",
            "https://www.anz.com.au//content/dam/anzconz/images/common/promopages/logo-promo-anz-small.png",
            "https://www.bt.com.au//content/dam/public/btfg-bt/images/logo/bt_financial_group_logo_mob-2x1.png",
            "https://www.commbank.com.au/content/dam/commbank/commBank-logo.svg",
            "https://www.collinshomeloans.com.au/hs-fs/hubfs/collins-logo-shedow.png?width=230&name=collins-logo-shedow.png",
            "https://depositpower.com.au/wp-content/uploads/2019/01/DepositPower_stacked_white.png",
            "https://www.latrobefinancial.com.au//Images/Logos/Logo-LTF_v2.jpg",
            "https://d2ttwt9gu7swv4.cloudfront.net/assets/images/logo.svg",
            "https://www.mebank.com.au/MEBank/Assets/Images/me-logo.svg",
            "https://www.nab.com.au//etc/designs/nabrwd/clientlibs/images/logo.png",
            "https://www.pepper.com.au//siteassets/logos/pepper-money-logo.png",
            "https://www.suncorp.com.au//content/dam/suncorp/corporate/images/logos/Suncorp_New_Logo_2x.png",
            "https://www.equifax.com.au/sites/all/themes/vedacorporate/logo.png"
        ];
        let totalWidth = urls.length * 120;
        let [ left, setLeft ] = useState(0);
        let [ secondLeft, setSecondLeft ] = useState(-(width+300));
      
        useEffect(() => {
          const interval = setInterval(() => {
            setLeft(left => left + 1);
            setSecondLeft(secondLeft => secondLeft + 1);
            if (left == 0) {
              setSecondLeft(-(totalWidth))
            }
            if(secondLeft == 0){
                setLeft(-(totalWidth))
            }
          }, 5);
          return () => {
            clearInterval(interval);
          };
        }, [left, secondLeft]);
      
        return (
          <div>
            <div
              style={{
                width: totalWidth + 'px',
                whiteSpace: "nowrap",
                position: "relative",
                top: "0px",
                left: left + "px",
                float: 'left',
                display: 'inline-block'
              }}
            >
              {urls.map((u, i) => {
                return (
                  <div style={{ display: "inline-block", padding: "10px" }}>
                    <img src={u} width="100px" />
                  </div>
                );
              })}
            </div>
            <div
              style={{
                width: totalWidth + 'px',
                whiteSpace: "nowrap",
                position: "relative",
                top: "0px",
                left: secondLeft + "px",
                float: 'right',
                display: 'inline-block',
                background: '#fff'
              }}
            >
              {urls.map((u, i) => {
                return (
                  <div style={{ display: "inline-block", padding: "10px" }}>
                    <img src={u} width="100px" />
                  </div>
                );
              })}
            </div>
          </div>
        );
    };
    
    ReactDOM.render(
      <Slider />,
      document.getElementById("react")
    );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

It's like this one below another https://i.sstatic.net/3Lj0g.png

But I want it to be in one line. How can I do that

javascripthtmlcssreactjs

Answer №1

When it comes to styling, it's best to use CSS for the job. If you must use JavaScript, then make sure to apply styles using JavaScript as well.

display: flex;
flex-wrap: nowrap;

Answer №2

Try implementing the marquee tag,

<marquee direction="left" style={{ display:'inline'}}>
  <span
    style={{
      width: { totalWidth },
      display: 'inline-block'
    }}
  >
    {urls.map((u, i) => {
      return (
        <span style={{ padding: "10px" }}>
          <img src={u} width="100px" />
        </span>
      );
    })}
  </span>
  <span
    style={{
      width: { totalWidth },
      display: 'inline-block'

    }}
  >
    {urls.map((u, i) => {
      return (
        <span style={{ padding: "10px" }}>
          <img src={u} width="100px" />
        </span>
      );
    })}
  </span>
</marquee>

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

How can divs be styled to mimic the behavior of tables in IE6 using just CSS and HTML?

Can div elements be styled to resemble tables in IE 6 using just CSS and HTML? Unfortunately, the display properties like table, table-row, or table-cell do not work in IE 6 If it is feasible, what strategies can be employed? ...

htmlcssinternet-explorer

The ExpandMoreOutlined icon in Material UI does not consistently provide accurate padding

Utilizing the ExpandMoreOutlined component to display an arrow on my select component, I wanted to add some padding for the icon. I achieved this by setting paddingRight as follows: import React, { useState, RefObject } from 'react'; import { Se ...

reactjsmaterial-ui

Set the minimum date for the jQuery datepicker

Having trouble with jQuery datepickers for selecting from and to dates? Currently, the code restricts the selection in the second datepicker to dates after the one selected in the first datepicker. However, what if you need to set the to datepicker to allo ...

javascriptjquery

Exploring the Fundamentals of XSS

Currently, my technology stack consists of Symfony2, Twig, and Doctrine. When it comes to securing my website, I am particularly concerned about preventing XSS attacks. However, despite taking precautions, I'm not sure what more I can do. Persisten ...

phpjavascriptsymfonyxss

Encountering a 500 Internal Server Error when deploying a Next.js application with MongoDB and Mongoose on Vercel

My application is functioning properly on localhost. However, when I deploy it to Vercel through GitHub, I encounter errors. The building logs show the following: Cloning github.com/sayinmehmet47/electronic-products47 (Branch: main, Commit: 2ae970b) Cloni ...

reactjsmongodbnext.jsvercel

The value entered is being displayed twice every time the onChange event occurs in ReactJS

I recently implemented useReducer in my React project and encountered a strange issue where the values I type are being printed double and twice, as shown in the screenshot below. https://i.sstatic.net/KCkSy.png I'm unsure why this is happening. Here ...

javascriptreactjsnext.js

setTimeout executes twice, even if it is cleared beforehand

I have a collection of images stored in the img/ directory named 1-13.jpg. My goal is to iterate through these images using a loop. The #next_container element is designed to pause the loop if it has already started, change the src attribute to the next im ...

javascripthtmlsettimeout

Having trouble opening the Swipeable Drawer on React using Material-UI with a swipe gesture?

Currently, I am working on a new project where I am attempting to incorporate a "menu" or drawer that opens when the user swipes from the left side of the screen. I have successfully implemented this functionality using a codeSandBox, which you can check o ...

reactjsmaterial-ui

obtain data from an array using Angular 5

i need assistance with retrieving values from an array. Below is my code snippet: this.RoleServiceService.getRoleById(this.id).subscribe(data => { this.roleData.push(data['data']); console.log(this.roleData); }) however, the resulting ar ...

javascriptangularmultidimensional-arrayangular-datatables

Transferring data between Promises and functions through variable passing

I am facing a challenge. I need to make two separate SOAP calls in order to retrieve two lists of vouchers, and then use these lists to perform some checks and other tasks. I have placed the two calls within different Promise functions because I want to in ...

javascriptnode.jspromise

Shifting an image to the corner using HTML and CSS

As I work on designing a coming soon page, my goal is to have the voter's hand extend all the way to the edge of the screen by cutting off parts of the sleeve. Can you provide some guidance on what modifications are needed in the css/html code for thi ...

htmlcssimagebackground

A function designed specifically for parsing and manipulating hyperlinks within dynamically added content using jQuery

I have a unique one-page layout All my content "pages" are stored in separate divs, which are initially hidden using jQuery When a menu item is clicked, the inner content of the page holder is dynamically switched using html() However, I am facing an is ...

javascriptjquerydynamic

Guide to retrieving a user's current address in JSON format using Google API Key integrated into a CDN link

Setting the user's current location on my website has been a challenge. Using Java Script to obtain the geographical coordinates (longitude and latitude) was successful, but converting them into an address format proved tricky. My solution involved le ...

javascriptjqueryhtmlgeolocation

Generate HTML table with CSS dynamically applied through jQuery

After performing some calculations and applying CSS rules using the .css() function in jQuery to color the background of a table, I am facing an issue when trying to print the page. The printed page appears in black and white without retaining any styling ...

javascriptjqueryhtmlcssdatatables

serving static content on subdomains with Express JS

I created an API using Node.js Express JS and utilized apidocjs.com to generate the static content. The issue I am currently facing is that I want the documentation file to be located under a subdomain such as docs.example.com or api.example.com/docs. What ...

javascriptnode.jsexpress

Using JavaScript, you can add an article and section to your webpage

Currently, I am utilizing AJAX to showcase posts. My objective is to extract each property from a JSON object that is returned and generate an <article> for the title followed by a subsequent <section> for the content. While I can successfully ...

javascripthtmlajaxjson

Transferring data from PHP to AJAX and then injecting it into an SQL query

I've been attempting to pass a datepicker variable into an onclick ajax function, which then sends it to another ajax method that passes the variable to an SQL query. The result of the query is then passed back into the ajax function to generate a cha ...

javascriptphpajax

Creating a Rectangular Trapezoid Shape with CSS - Eliminating Unnecessary Spacing

I'm trying to create a trapezoid button using CSS. Here is the intended look: https://i.sstatic.net/0vqlk.png However, my current implementation looks like this: https://i.sstatic.net/QrR4t.png The button appears fine but there seems to be some e ...

cssvue.jsuser-interfacesass

Encountered an error loading resource: server returned a 404 status code while utilizing Angular framework and deploying via GitHub Pages

Currently facing an issue with my Angular website deployment on Github Pages, receiving a console error "Failed to load resource: the server responded with a status of 404 ()" at "home: 1". This error specifically seems to be related to the app.component ...

cssangulartypescriptdeploymentgithub-pages

Discrepancy in Table Alignment

I seem to be encountering an issue with the alignment of text in my table. It appears that there are differences in content among the columns, causing the misalignment. I have tried adding white-space within each table, but it doesn't solve the proble ...

htmlcss