Steps for incorporating scrollIntoView in a horizontal testimonial table

I am sorry if the title has caused any confusion, but it is exactly as it states. I want to create a testimonial card using a table as the base. I have almost completed it, but I am struggling with the final touches. For instance, I want to implement a functionality where clicking a pointer will swipe the card to the next one. I believe utilizing an array of children and moving based on the index could work, but I am having trouble getting the testimony card to move.

While researching, I came across a similar topic that may provide some guidance: Scroll smoothly by 100px horizontally

However, I am still unsure of how to go about implementing this feature in my code.

This is the code snippet I currently have:


var slideIndex = 1;
showSlides(slideIndex);

// Thumbnail image controls
function currentTestimony(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("slider-item");
    var pointers = document.getElementsByClassName("pointer");
    if (n > slides.length) {
        slideIndex = 1
    }

    if (n < 1) {
        slideIndex = slides.length
    }

    for (i = 0; i < pointers.length; i++) {
        pointers[i].className = pointers[i].className.replace(" active", "");
    }

    pointers[slideIndex-1].className += " active";
}

I feel like I am getting closer to the solution, but I am still stuck. Can anyone provide assistance in solving this issue?

javascripthtmlcss

Answer №1

Are You Sure?

I have demonstrated the changes made to your stylesheet code and the complete overhaul of JavaScript. However, it's all pretty straightforward.

var PositionPerIndex = {
  "1": "0",
  "2": "-20%",
  "3": "-40%",
  "4": "-60%",
  "5": "-80%"
};

document.querySelectorAll(".pointer").forEach(
  function(pointer){
    pointer.addEventListener('click', 
      function(){
        document.getElementById("content").style.left = PositionPerIndex[this.getAttribute("data-index")];
      }
    );
  }
);
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

#dark-slider-testimonial .card{
    background-color: #f5f7fb;
    border-radius: 20px;
    width: 380px;
    height: 380px;
    margin: 0% 32px;
    padding: 20px;
    display: inline-table;
}

/* 
    ===================================================================
    First Table
    ===================================================================
*/
#dark-slider-testimonial {
    border-radius: 20px;
    margin: 20px auto;
    padding: 5%;
    width: 100%;
    /* START Removed 
        scroll-behavior: smooth;
       END
     */
     
    /* START Added */
    box-sizing: border-box;
    overflow: hidden;
}

#dark-slider-testimonial .container{
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    
    /* START Removed 
        overflow-x: auto;
        scroll-snap-type: x mandatory;
       END
     */
     
    /* START Added */
    overflow: hidden;
}

#dark-slider-testimonial .container::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

#dark-slider-testimonial table {
    font-family: 'Nunito', sans-serif;
    width: 100%;
    overflow: hidden;
    font-size: 0.8em;
    color: #1d3962;
    border: none;
    border-top: none;
}


//CSS code shortened for demonstration purpose

#dark-slider-testimonial .active,
#dark-slider-testimonial .pointer:hover {
    background-color: #3b73c5;
}
<div id="dark-slider-testimonial">
            <div>
                <div class="container">
                    <table>
                        <tr id="content">
                            <td id="testimony-1" class="slider-item">
                                <div class="card">
                                    <p class="testimony-name">
                                        name
                                    </p>
                                    <p class="testimony-subtitle">
                                        title
                                    </p>
                                    <p class="testimony-desc">
                                      Lorem ipsum dolor sit amet.
                                     //TESTIMONY SNIPPET REDUCED FOR BREVITY
                                    </p>
                                </div>
                            </td>


                          //REMAINING TESTIMONIES REMOVED FOR BREVITY


                        </tr>
                    </table>
                </div>

                <!-- The pointers -->
                <div style="text-align:center">
                    <span class="pointer" data-index="1"></span>
                    <span class="pointer" data-index="2"></span>
                    <span class="pointer" data-index="3"></span>
                    <span class="pointer" data-index="4"></span>
                    <span class="pointer" data-index="5"></span>
                </div>
            </div>
        </div>

Answer №2

Discover a versatile solution that adapts to fixed dimensions effortlessly. By tweaking the sizing to percentages, you can seamlessly adjust it for various screen sizes.

I painstakingly crafted this in VS Code. Feel free to simply copy and paste the code and run it.


   <!DOCTYPE html>
   <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                box-sizing: border-box;
            }

            .main-container {
                width: 100%;
                max-width: 1200px;
                overflow: hidden;
                margin: 0 auto;
                margin-bottom: 20px;
            }

            table.card-space{
                width: 100%;
                height: auto;
                min-height: 400px;
                position: relative;
                white-space: nowrap;
                margin: 0;
                padding: 0;
            }

            tr.card-space_container{
                width: 100%;
                left: 0; /* Initial Position */
                position: relative;

                /* Make a Smooth Left Transition */
                transition: left .5s ease;
                padding: 15px;
                margin: 0;
                padding: 0;
            }

            td.card{
                box-sizing: border-box;
                margin: 0;
                width: 400px;
                min-height: 390px;
                margin: 0;
                position: relative;
            }

            .card-space .card .content{
                width: 400px;
                min-height: 100%;
                background-color: #f5f5f5;
                min-height: 390px;
                padding: 15px;
            }

            .pointer-space{
                text-align: center;

                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
            }

            .pointer-space .pointer {
                cursor: pointer;
                height: 15px;
                width: 15px;
                margin: 0 2px;
                background-color: #bbb;
                border-radius: 50%;
                display: inline-block;
                transition: background-color 0.6s ease;
            }

            .pointer-space .pointer:hover {
                background-color: #3b73c5;
            }

        </style>
    </head>
    <body>
        <div class="main-container">
            <table class="card-space">
                <tr class="card-space_container" id="card-space_container">
                    <td class="card">
                        <div class="content">
                            <h1>Card1</h1>
                        </div>
                    </td>
                    <td class="card">
                        <div class="content">
                            <h1>Card2</h1>
                        </div>
                    </td>
                    <td class="card">
                        <div class="content">
                            <h1>Card3</h1>
                        </div>
                    </td>
                    <td class="card">
                        <div class="content">
                            <h1>Card4</h1>
                        </div>
                    </td>
                    <td class="card">
                        <div class="content">
                            <h1>Card5</h1>
                        </div>
                    </td>
                    <td class="card">
                        <div class="content">
                            <h1>Card6</h1>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        <!-- The pointers/circles -->
        <div class="pointer-space">
        <span class="pointer" data-index="0"></span>
        <span class="pointer" data-index="1"></span>
        <span class="pointer" data-index="2"></span>
        <span class="pointer" data-index="3"></span>
        <span class="pointer" data-index="4"></span>
        <span class="pointer" data-index="5"></span>
        </div>

        <script>
        (function(){
            // Get all the Pointers
            var PointerList = document.querySelectorAll(".pointer");

            //  Get the Card container
            var container = document.getElementById("card-space_container");

            PointerList.forEach(function(pointer){
                pointer.addEventListener('click', function(){

                    //  First get the index represented by each pointer
                    var i = this.getAttribute('data-index');

                    //  Summary:
                    //      Then Calculate the position to which card-space_container must be set.
                    //  examples:   
                    //      -If the index returned by a pointer is 0, then 0 x -40 = 0; so the position is set to 0px.
                    //      -If the pointer return index as 1, then 1  x -400 = -400%;
                    //      - etc...
                    container.style.left = (i * (-400)).toString().concat('px');
                });
            });
        })();
        </script>
    </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

Tool that closely mirrors the functionalities of Google Maps

Seeking to develop an interactive image feature on my website akin to Google Maps but with custom images. Desiring functionalities like drag, scroll, and zoom in/out for enhanced user experience. Interested in any suggested tools or plugins for this purp ...

javascriptjqueryasp.netimageiis

Sending the handleSubmit() function to the child component does not alter the state of the parent component

I just started learning React and Javascript. Currently, I am working on a form where users can specify the details of a "Mob". Upon submitting the form, I anticipate that handleSubmit() (which is passed down from the parent component) will update the sta ...

javascriptreactjs

Size of Output from RSA 2048 Encryption Using JSEncrypt

I've been under the impression that the output size of RSA 2048 bit encryption is 256 bytes. However, I keep getting 344 characters as output when using jsencrypt for testing. Can anyone shed some light on why this discrepancy exists? Tool used for o ...

javascriptencryptionrsajsencrypt

Managing alerts in Python Selenium

I am encountering an issue while trying to handle a pop-up alert after a file upload. Despite using the code snippet below, I am receiving the error message shown. https://i.sstatic.net/Gqg8v.png wait.until(EC.alert_is_present()) driver.switch_to.alert() ...

javascriptpythonselenium

Eliminating the dynamic element in jQuery causes disruption to the ViewContainerRef container

In my Angular 2+ application, I am dynamically creating components using the following code snippet: @ViewChild("containerNode", { read: ViewContainerRef }) cardContainer; const factory = this.ComponentFactoryResolver.resolveComponentFactory(CardComponen ...

javascriptjqueryangularjsplumb

How can the navbar class be altered when there is a change in routes?

My navbar class is set to change based on scroll position Script <script> $(window).scroll(function () { if ($("#main-navbar").offset().top > 100) { $("#main-navbar").addClass("navbar-shrink"); } else { $(" ...

jqueryhtmlcssangularbootstrap-4

What is the best way to merge the value of an input field (contained in an array) with another input field before submitting the form

Currently, I am in the process of editing the data in a form's input field. I know that submitting form data this way is not ideal, but I encountered a challenge with getting the value from a datetimepicker into the ng-model. Specifically, I was able ...

javascriptphparraysangularjsforms

What is the best way to show a specific element within a list item when clicked using AngularJS?

Is there a way to display an iframe element inside an li element on ng-click, but only for the specific one that was clicked? Additionally, how can all iframes be hidden using AngularJs? <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6. ...

javascriptangularjsangularjs-ng-repeat

The issue of CORS preflight request error persisted even after attempting to resolve it by installing the npm cors

Encountering the following console error while using the fetch api: Error Message in Console: The Fetch API is unable to load https://... The response to the preflight request failed to pass the access control check: No 'Access-Control-Allow-O ...

javascriptnpmcors

What is the best way to add Vue dependency using CDN?

For my project which is built using Kendo, Vue, .Net, Angular and jQuery, I need to incorporate https://www.npmjs.com/package/vue2-daterange-picker. <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

javascriptjqueryvue.jskendo-asp.net-mvcscriptbundle

Looking to create a format for displaying short comic strips in a grid pattern

I am struggling to create an image grid for my small comics. I want to have 2 columns and 3 rows, but all the divs end up in the same place. I tried using display: flex, but it didn't work as expected. Additionally, I want the grid to be responsive, b ...

javascripthtmlcss

The synchronization issue between ng-class and animation

I'm experiencing a strange issue with ng-class and suspect that it may be related to a race condition. Here is the example on Plunker: example Below is the relevant JavaScript code: self.slideLeft = function() { if (self.end_index < se ...

javascripthtmlcssangularjs

Tips for swapping out the data array in my ChartJS graph

I am currently working on a project that involves changing the data array of a chart with a completely different one. Unfortunately, although my code is successfully updating the labels of the chart, the data itself remains unchanged and I cannot figure ou ...

javascriptarrayschart.js

Result of mixing CSS colors

Is there a way to retrieve the result of blending two colors using the color-mix function? In cases where the color-mix feature is not supported, is it possible to set a fixed value instead? ...

csssass

Develop a distinctive JavaScript solution that enables an image to appear in fullscreen upon loading the page, and then smoothly fade away after precisely

I have been trying to incorporate a feature on my Shopify frontage website where our logo appears fullscreen and then fades away or disappears after a few seconds, allowing people to access the rest of the website. However, I am facing difficulty in making ...

javascripthtmlcssanimationshopify

Tips for eliminating the undefined/null values from an array nested within another array in Angular

DATA = [{ application: [{ name: 'Room1' },{ name: 'Room2' },{ name: 'Room3' },{ name: 'Room4' },{ name: 'Room5' }], name: 'Batch 1&ap ...

javascripttypescript

Using React Bootstrap to conditionally render columns within an array map

Within my React application, I am currently utilizing the map function to generate Bootstrap columns in the JSX code of the render method. One specific attribute within the array object I'm mapping is named "taken." Depending on whether this attribute ...

javascriptreactjsreact-bootstrapconditional-rendering

jQuery manipulation of DOM elements: Scrollbar woes

After creating a custom jQuery function to add or remove message boxes on a website, I noticed that the appearance of these boxes sometimes triggers the browser scrollbar to appear. Even when just one message box is added, the scrollbar shows up. And when ...

jqueryhtmloverflowmessagebox

Are there any issues arising from conflicting jQueries?

Hello, I am trying to implement EasyUI GridView and Tab in Asp.net MVC4 by placing two Grids inside a Tab. However, I am facing an issue with this setup. I have included the necessary Scripts and CSS in My Layout: <link href="@Url.Content("~/Conten ...

javascriptjqueryasp.net-mvcjquery-easyui

Problem with Ajax functionality on Jquery Dialog

I have implemented a Jquery.dialog feature in my application for sending messages. When the user clicks on "new", the dialog box appears, allowing them to select the recipient (currently working with IDs instead of usernames). On the first opening of the ...

javascriptjqueryruby-on-railsrubyajax