Using jQuery to create a dynamically moving div that forms an endless wall

Question

Using jQuery to create a dynamically moving div that forms an endless wall

In order to create a continuous wall that pulls text from a database and displays it, I've developed the following code:

$(function() {
    var x = 0;
    var y = 100.0;
    var z=0;
    setInterval(function() {
        x -= 0.1;
        y -= 0.1;
        z++;
        if (x <= -100.0){ 
            $("#h1d1").html("loop div 1 :" + z);
            x = 0;
        }
        if (y <= 0){
            $("#h1d2").html("loop div 2 :" + z);
            y = 100.0;
        }
        $('#movimg1').css('left', x + "%");
        $('#movimg2').css('left', y + "%");

    }, 10);
    $("#stopbutton").click(function() {
        $('#movimg1').stop();
    });
})

However, the behavior of the text is not as desired, changing in the middle of the screen when it should update only when out of view. https://jsfiddle.net/oa0wdxcx/2/

I also aim to incorporate a play/pause button. Any tips on achieving this functionality would be greatly welcomed. Additionally, I'd like the divs to be contained within the #wrap div, but altering the position attribute to relative causes them to move apart.

Thank you in advance.

javascript jquery html css

Answer 1

Answer №1

The issue stemmed from the conditions.

            if (x <= -100.0) {
                z++;
                $("#h1d1").html("loop div 1 :" + z);
                x = 100; /* modify this line */ 

            }
            if (y <= -100.0) { /* modify this line */ 
                w++;
                $("#h1d2").html("loop div 2 :" + w);
                y = 100;

            }

The conditions dictate that if either of these two divs reaches left:-100%, the element should be placed at the end of the queue with left:100%.

Additionally, you can streamline these if statements and utilize only x for the transition.

To ensure the start and stop buttons function correctly, terminate the simulation using the clearInterval() function to stop, and invoke doSimulate() to restart:

        var started = true;

        $("#stopbutton").click(function () {
                if(started) {
                    clearInterval(sim);
                    $(this).html('Start');
                    started = false;
                } else {
                    doSimulate();
                    $(this).html('Stop');
                    started = true;
                }
            });

Check out the functioning Start/Stop feature on jsFiddle here.

Answer 2

The issue stemmed from the conditions.

            if (x <= -100.0) {
                z++;
                $("#h1d1").html("loop div 1 :" + z);
                x = 100; /* modify this line */ 

            }
            if (y <= -100.0) { /* modify this line */ 
                w++;
                $("#h1d2").html("loop div 2 :" + w);
                y = 100;

            }

The conditions dictate that if either of these two divs reaches left:-100%, the element should be placed at the end of the queue with left:100%.

Additionally, you can streamline these if statements and utilize only x for the transition.

To ensure the start and stop buttons function correctly, terminate the simulation using the clearInterval() function to stop, and invoke doSimulate() to restart:

        var started = true;

        $("#stopbutton").click(function () {
                if(started) {
                    clearInterval(sim);
                    $(this).html('Start');
                    started = false;
                } else {
                    doSimulate();
                    $(this).html('Stop');
                    started = true;
                }
            });

Check out the functioning Start/Stop feature on jsFiddle here.

Answer 3

Answer №2

Take a look at this JSFiddle link where I have added an additional element to achieve a seamless transition back to the starting point. The third element should display the same message as the first one.

HTML Section

<body>
    <div class="row">
        <div class="col-xs-1"></div>
        <div id="wrap" class="col-xs-10">
            <div class="movimg message1" id="movimg1">
                 <h1 class="header">start div 1</h1>
            </div>
            <div class="movimg message2" id="movimg2">
                 <h1 class="header">start div 2</h2>
            </div>
            <div class="movimg message1" id="movimg3">
                 <h1 class="header">start div 1</h1>
            </div>
        </div>
        <div class="col-xs-1"></div>
    </div>
    <div class="row">
        <button class="button" id="startbutton" style="display:none;">Start</button>
        <button class="button" id="stopbutton">Stop</button>
    </div>
</body>

JavaScript Part

$(function () {
    var x = 200.0;
    var interval;

    function start(){
        interval = setInterval(function () {
            x -= 0.1;
            if (x <= 0.0) {
                x = 200;
            }
            $('#movimg1').css('left', (x-200) + "%");
            $('#movimg2').css('left', (x-100) + "%");
            $('#movimg3').css('left', x + "%");
        }, 10);
    }

    start();

    $("#stopbutton").click(function () {
        window.clearInterval(interval);
        $(this).hide();
        $("#startbutton").show();
    });

    $("#startbutton").click(function () {
        start();
        $(this).hide();
        $("#stopbutton").show();
    });
})

CSS Styles

body {
    overflow: hidden;
}
#wrap {
    width: 80%;
    left: 10%;
}
.movimg{
    position: absolute;
    height: 600px;
    width: 100%;
    background-image: url('https://s-media-cache-ak0.pinimg.com/736x/89/ed/e5/89ede56bcc8243787e55676ab28f287f.jpg');
}
#movimg1 {
    left: 0%;
}
#movimg2 {
    left: 100%;
}
#movimg3 {
    left: 200%;
}
.header {
    text-align: center;
}
.button{
    top: 600px;
    position: relative;
}

LATEST UPDATE:

Introducing Stop and Start buttons: Check out the updated version on JSFiddle

Answer 4

Take a look at this JSFiddle link where I have added an additional element to achieve a seamless transition back to the starting point. The third element should display the same message as the first one.

HTML Section

<body>
    <div class="row">
        <div class="col-xs-1"></div>
        <div id="wrap" class="col-xs-10">
            <div class="movimg message1" id="movimg1">
                 <h1 class="header">start div 1</h1>
            </div>
            <div class="movimg message2" id="movimg2">
                 <h1 class="header">start div 2</h2>
            </div>
            <div class="movimg message1" id="movimg3">
                 <h1 class="header">start div 1</h1>
            </div>
        </div>
        <div class="col-xs-1"></div>
    </div>
    <div class="row">
        <button class="button" id="startbutton" style="display:none;">Start</button>
        <button class="button" id="stopbutton">Stop</button>
    </div>
</body>

JavaScript Part

$(function () {
    var x = 200.0;
    var interval;

    function start(){
        interval = setInterval(function () {
            x -= 0.1;
            if (x <= 0.0) {
                x = 200;
            }
            $('#movimg1').css('left', (x-200) + "%");
            $('#movimg2').css('left', (x-100) + "%");
            $('#movimg3').css('left', x + "%");
        }, 10);
    }

    start();

    $("#stopbutton").click(function () {
        window.clearInterval(interval);
        $(this).hide();
        $("#startbutton").show();
    });

    $("#startbutton").click(function () {
        start();
        $(this).hide();
        $("#stopbutton").show();
    });
})

CSS Styles

body {
    overflow: hidden;
}
#wrap {
    width: 80%;
    left: 10%;
}
.movimg{
    position: absolute;
    height: 600px;
    width: 100%;
    background-image: url('https://s-media-cache-ak0.pinimg.com/736x/89/ed/e5/89ede56bcc8243787e55676ab28f287f.jpg');
}
#movimg1 {
    left: 0%;
}
#movimg2 {
    left: 100%;
}
#movimg3 {
    left: 200%;
}
.header {
    text-align: center;
}
.button{
    top: 600px;
    position: relative;
}

LATEST UPDATE:

Introducing Stop and Start buttons: Check out the updated version on JSFiddle

Using jQuery to create a dynamically moving div that forms an endless wall

Answer №1

Answer №2

Similar questions

Show a few values as a string in Angular using Typescript

Element in Vue not displaying when modal is hidden

managing the AJAX server's response

What is the best way to use Shadcn to incorporate a calendar that takes up half of my website?

typescript push in react native is a crucial step to enhance performance and optimize

Is there a way to duplicate and insert a function in node.js if I only have its name?

Retrieve a photo from a website address and determine its dimensions

Utilizing ionic-scroll for seamless movement and scrolling of a canvas element

I am looking to showcase a text directly from the properties file using the thymeleaf template engine

Leverage an HTML table to serve as a data source for populating a Kendo UI template

Concealing certain elements within a loop using a "show more" button

Tips for accessing elements with dynamically assigned IDs in jQuery

What is the best way to align the button correctly beside the cluster of checkboxes within bootstrap framework?

I desire to share the JSON information and receive the corresponding response data

Display a preview image at the conclusion of a YouTube video

I am encountering an issue where propData in Vue Jest is returning as undefined

Comparing the use of jQuery click event with the button to trigger a function that calculates the

What is the best way to create a dynamic JavaScript counter, like one that counts the world's population

Retrieve the host name using the getStaticProps method

I'm having trouble getting this button and icon to align properly. How can I fix this misalignment