Navigate div containers interchangeably

Take a look at what I made:

https://jsfiddle.net/1qsoL695/

This is the HTML code:

<div class="container">
    <div id="select">
        <div>ONE</div>
        <div>TWO</div>
        <div>THREE</div>
    </div>
</div>

Here's the CSS part:

.container {
    background: orange;
    height: 200px;
    width: 600px;
}

#select {
    position: relative;
    overflow: hidden;
    height: 200px;
}

#select div {
    text-align: center;
    font-size: 130pt;
    margin: 0;
}

And lastly, the JavaScript snippet:

$("#select")
    .on('swiperight',  function(){
        divs.eq(i).toggle('slide', {
            direction: 'right'
        }, 250, function() {

            i++;

            if(i > 2) { i = 0; }

            divs.eq(i).toggle('slide', {
                direction: 'left'
            }, 230);

        });

    })
    .on('swipeleft',  function(){
        divs.eq(i).toggle('slide', {
            direction: 'left'
        }, 250, function() {

            i--;

            if(i < 0) { i = 2; }

            divs.eq(i).toggle('slide', {
                direction: 'right'
            }, 230);

        });


    });

The functionality allows swiping to display the next or previous number.

While it works on mobile screens as intended, I'm wondering if there's a more elegant way to achieve the same outcome. The current code feels a bit clunky. Any suggestions or advice would be greatly appreciated!

Answer №1

This method seems like it could be the easiest solution for your needs:

Learn how to toggle between two divs by clicking a button

Answer №2

To enhance efficiency and minimize coding, consider utilizing CSS3 transforms and classes in place of JavaScript animation to switch between div elements. By toggling an 'active' class using JavaScript, you can simply display the desired div on screen while hiding the inactive ones by positioning them off screen.

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

Can the $_SESSION[balance] be updated automatically?

On each login, I retrieve the value of $_SESSION[balance] from a MySQL database. Is there a way to update this value in the client's browser every 5 minutes without refreshing the page? Could AJAX be used for this purpose? I apologize if my question ...

Tips for creating a textfield with height that responds dynamically in Material UI

I am trying to create a textfield with a responsive height that adjusts itself based on the size of its parent grid when the browser window is resized. I have been searching for a solution and came across this helpful post on Stack Overflow about creating ...

Is it possible to modify the color of a division row using an onchange event in JQuery?

I am facing a requirement to dynamically change the color of rows based on the dropdown onchange value. The rows are structured in divisions, which were previously tables. There are two main divisions with rows that need to be updated based on dropdown sel ...

Which file directory should I specify when using ng-include?

My project structure in Angular looks like this web server.py ##flask server program app static app.js controllers.js etc... templates index.html home.html In my index.ht ...

Struggling to implement the UI router into my Angular Framework

I've been working on a framework that is supposed to be router agnostic. While I've managed to make it work with ngRoute, I just can't seem to get it functioning with UI Router. Here's a snippet of the main app module: (function () { ...

Leverage JQuery to dynamically inject form input data directly onto the page

I am working on a form that is connected to my MySQL database, where certain data is pulled from different tables. The tables contain options for various select fields, and once the PHP scripts are executed, the data is structured as shown below: <sel ...

Adjust the text color of a particular word as you type using the contenteditable property set to "true"

I'm attempting to jazz things up a bit. For instance, I have a div that is set as contenteditable="true". What I want to achieve is changing the color of a specific word I type while writing. In this case, let's say the word "typing" sh ...

Use CSS height:auto for every element except SVG

Is there a way to scale all images on my site while excluding SVG files using native CSS? .myClass img { height: auto; } I have tried the following, but it only targets SVG files: .myClass img[src$=".svg"] {height: auto;} Using != doesn't seem ...

Tips on how to connect with ngFor

I have been working on an application to display various events, but I am encountering an issue. Whenever I load the webpage, it appears empty and the console throws an error saying 'Can't bind to 'ngForEvent' since it isn't a know ...

Unexpected behavior observed with LitHTML when binding value to input type range

Currently, I am working on an implementation that involves using range inputs. Specifically, I have two range inputs and I am trying to create a 'double range' functionality with them. The challenge I am facing is related to preventing one slider ...

the pop-up modal function is malfunctioning

I can't get my pop up to work properly. When I click the button, the screen dims as if a pop up is going to appear, but nothing shows up. Can someone please assist me with this issue? Here is the HTML file: <!DOCTYPE html> <html lang="en"&g ...

Manipulating and accessing all elements within a JQuery cookie array

Looking for a solution to manage data in a cookie array using jQuery on an HTML page. The goal is to add data to the array when a button is pressed, and then display all values from the array in a list when another button is clicked. However, despite no er ...

Mastering the Art of Configuring Filters in Plupload

I am using plupload with a unique feature that allows me to select and upload files with extensions that are not defined in the settings. For instance, I can upload .rar or .txt files without explicitly defining them in the filters. $(".uploadDocs").cli ...

Manipulate images in real-time and insert custom text using JavaScript/jQuery

Within my possession is an image depicted above. My objective revolves around dynamically altering the values present at the occurrences of L, A, and B; to achieve this, I must eliminate or conceal L, A, and B while substituting them with numerical equiv ...

Angular-Phonegap - The issue with "min-height: 100%" not functioning properly

I am faced with this specific HTML file: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <!-- NOTE: Make sure to remove the width=d ...

Incorporating a custom background image for Google Maps

Can a live Google map achieve the same overlay effect as a static image? Discover more here Many thanks, Greg Update: Check out this Fiddle that was created based on another Fiddle by @SinistraD ...

How to build a login page with a static header and footer using Angular2

For my latest project, I am currently in the process of developing an application using Angular2 and eclipse Neon. Utilizing angular-cli for this app, I am now focused on creating the login page. Within the app.component.html file, you will find the follow ...

Can the placement of divs impact search engine optimization (SEO)?

My website is currently structured with div containers in the following order: Less important left side bar Less important right side bar The core center content at last I am concerned about the impact on SEO as the core content comes after the sidebars ...

Creating a dropdown menu using jQuery

I have a situation where I am linking a dropdown menu to the "onChange" event of a textbox. The functionality works as expected, however, when I click the button associated with it, the click event is not triggered. Below is the script being used: <sc ...

Ways to format the direct descendant of a multi-level list?

Check out my nested ul list: <ul> <li> <a href="/"></a> </li> <li> <a href="/"> </a> &l ...