Mobile device tab animation

I am facing a challenge with a tab containing four items that are vertically stacked on mobile devices. My goal is to animate the clicked li element to move to the bottom of the stack. After experimenting with CSS animations, I was able to achieve this effect successfully.

To see the code in action, please visit the following fiddle: https://jsfiddle.net/afelixj/wf0y9wbx/3/

However, I am encountering difficulty controlling the upward movement of the other items. The elements at the bottom do not always move up simultaneously as intended.

jquerycss

Answer №1

Your original code had an issue where it looped over the dom elements in the same order every time a li was clicked.

$('li').on('click', function(){
    $('li').attr({
        style: ''
    });
    var position = $(this).attr("class");

    if (typeof position !== "undefined"){
        position = parseInt(position.replace("li-",""));
    }else{
        position = $(this).index() + 1;
    }

    $(this).css('z-index', '2').attr('class','').addClass('li-4');

    $('li').not($(this)).each(function(){
        var thisPosition = $(this).attr("class");
        if (typeof thisPosition !== "undefined"){
            thisPosition = parseInt(thisPosition.replace("li-",""));
        }else{
            thisPosition = $(this).index() + 1;
        }

        if(thisPosition > position){
            $(this).attr('class','');
            $(this).addClass('li-' + (thisPosition - 1));
        }
    });
});

This solution may not be the most elegant, but it gets the job done. It checks for a class first and then extracts the number as the variable "position". If a class doesn't exist, it looks at the element's index within the ul.

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

Transform one div to another using a CSS animation slide

I am experiencing an issue with two divs (page1 + page2) inside a container (also a div). The container has overflow:hidden property, but when the animation starts, the overflow configuration is being ignored. Additionally, the page that should be displaye ...

jqueryhtmlcssanimation

JavaScript source control tool

Is there a Java-based version of GitHub? I am interested in developing a dynamic application using HTML5 and Javascript, and had the thought of integrating Git to monitor data changes. Therefore, I am curious if there exists a JavaScript adaptation of a G ...

javascriptjquerygithtml

Disable the "top" property for the Material UI Drawer component

I'm currently working on implementing a Persist Left Drawer from Material UI that slides in from the left side. However, I don't want the drawer to cover the entire left side of the page. Essentially, I want to remove the "top" style property men ...

cssreactjsmaterial-ui

Using Jquery to select and apply functions to specified div elements

As someone who is relatively new to JQuery, I have a question regarding the .on() function. Take this example: $('div').on('click', function() {$(this).toggleClass('show-description');}); This code selects all the 'div& ...

jqueryhtmlcss

"Adjust the orientation of a video and ensure it properly fills the screen with CSS styling

Below is the CSS style being used: video { position: absolute; transform: rotate(90deg); width: 100%; height: 100%; z-index: 4; visibility: visible; } This code snippet demonstrates a video element: <video id="myVideo" ...

htmlcssvideomp4

Is there a way to dynamically change the title of a tab when new content is added to a minimized page?

Is anyone familiar with how websites like Facebook and Buzzfeed update their tab titles when there are multiple tabs open? I have noticed that sometimes they add a "(1)" or "(2)" to indicate changes on the page. Do they use JavaScript to achieve this eff ...

javascriptjqueryhtmlcssajax

Attempting to dynamically alter the AJAX URL parameter after a user clicks on an event

I'm grappling with how to dynamically change the AJAX URL parameter based on a click event. Let's say I have a database structured like this: This URL can be modified to display data for a specific state. For example, if you replace 'NJ&apo ...

jqueryjson

Guide to making a single row beneath two columns using CSS Grid

My goal is to utilize CSS Grid in order to design a blurb layout featuring 2 columns at the top and a full row below. This will allow for an FA Icon and Title, accompanied by a full description below, similar to the image provided. I believe I have succes ...

htmlcss

Troubleshooting: Jquery UI Draggable - Cursor losing track of draggable element

I want to create a draggable popup with Jquery UI functionality, but I'm facing an issue where the cursor does not stay aligned with the popup element when dragged. When dragging the popup element to the left, the mouse cursor goes beyond the div elem ...

javascriptjqueryhtmljquery-uijquery-ui-draggable

jQuery load function continuously appends new files to the resource tab in the inspector tool

Every 30 seconds, I am running the following code to update information on my page: $("#refreshblock").load("update.txt"); The file update.txt contains a small amount of text (around 3Kb) that is loaded into the div. This file is regularly updated by bac ...

jqueryajax

Dynamically populate select options using Spring Boot Ajax technology

Hey everyone, I need some help with populating a select tag with a list of objects in JavaScript. Here's an example of the code: @RequestMapping(value="/getAllIndustries") @ResponseBody public List<IndustryModel>getAllIndustries() { return ...

javascriptjqueryhtmlajaxspring

Enhance the functionality of various textareas by implementing bullets for easier organization and formatting

Is there a way to add bullets to hidden textareas that are created dynamically? Currently, I can add bullets to visible textareas but would like the functionality to extend to newly created ones as well. Additionally, is it possible for these new bullets t ...

javascriptjqueryhtmltextarea

How to dynamically add a form to your website

Looking to dynamically insert a form on a page based on the value selected from a datalist, all without having to reload the entire page. <form action='#' method='get'> <input list="category" name="category"> <da ...

javascriptphpjqueryhtmlajax

Utilizing the jQuery delegate method

Issue I am encountering can be seen on this fiddle. http://jsfiddle.net/mjmitche/Sy2G4/ I have implemented jQuery delegate() to generate paragraphs that will all respond to the same click event, even if these new paragraphs were created after the documen ...

jquery

Combining two objects with JQuery while preserving all their properties

I am attempting to combine/merge two objects together. Currently, I have the following: var mergeObj = {}; var obj1 = { name: 'abd', id: 5454756, color: 'red' } var obj2 = { name: 'abc1', id:387589, color: 'blue'} I ...

jquery

Difficulty navigating through pages on an iPad due to slow scrolling with JavaScript

My operation is executed within a scroll function, like this: Query(window).scroll(function(){ jQuery('.ScrollToTop').show(); // my operation. }); While my web page responds quickly to the operation, it seems slo ...

javascriptphpjquery

jQuery change event fails to update

Using jQuery 1.9.1 and jQuery Mobile 1.3 When dealing with cloned form elements consisting of a select list and text input, there is a requirement for the text input's name and id attribute to dynamically change based on the selected value in the sel ...

jquerydomjquery-mobile

Acknowledging client after client to server POST request has been successfully processed in Node.JS

I've been working on responding to client-side requests with Node.JS. While searching, I came across a helpful article on calling functions on the server from client-side JavaScript in Node JS. However, I'm having trouble implementing it in my pr ...

javascripthtmljquerynode.js

Applying a dynamic translate3d transformation on the ::after element using CSS3

My current challenge involves manipulating a pseudo ::after element using translate3d If I hardcode the values, it's straightforward: div::after { ... transform: translate3d(40px, 40px, 0); } Now, I want to dynamically set the value for the ...

javascripthtmlcss

Navigate through an overflowing element in react/next

I have a component with a fixed width and overflow-x-auto. I want to hide the scroll bar and replace it with arrow buttons for scrolling left and right. How can I add this functionality to my component? Here is the code for my component: <div className ...

javascriptcssreactjsnext.jstailwind-css