Tips for updating the left positioning of a Div element on the fly

Question

Tips for updating the left positioning of a Div element on the fly

Although my title may not fully explain my goal, I am dealing with dynamically created div elements. When a user triggers an ajax request to delete one of the divs, I want to remove it from the DOM upon success. The issue arises in adjusting the layout after removal - specifically, filling the empty space left by the deleted element by shifting the position of its immediate siblings.

  <div class="carousel-inner">
      <div class="mycrousel" id="photo1" style="left:10"></div>
      <div class="mycrousel" id="photo2" style="left:120"></div>
      <div class="mycrousel" id="photo3" style="left:230"></div>
      <div class="mycrousel" id="photo4" style="left:340"></div>
      <div class="mycrousel" id="photo5" style="left:450"></div>
      <div class="mycrousel" id="photo6" style="left:560"></div>
      <div class="mycrousel" id="photo7" style="left:670"></div>
      <div class="mycrousel" id="photo8" style="left:780"></div>
      <div class="mycrousel" id="photo9" style="left:890"></div>
      <div class="mycrousel" id="photo10" style="left:1000"></div>
  </div>

All these divs are aligned horizontally from left to right. For instance, if the user deletes the div with id=photo5, I aim to reduce the "left" property of all subsequent divs (photo6 to photo10) by 110 pixels each to fill up the vacant space.

function scrollThumb() {
            var $scrollWidth = 110;
            var $photoId = 'photo5'; //id of the deleted photo
            var $totalPhoto = $('.carousel-inner > div').length; //get total number of remaining divs
            
            $('#photo6').animate({
                left: "-=" + $scrollWidth + "px"
            });
            $('#photo7').animate({
                left: "-=" + $scrollWidth + "px"
            });
            $('#photo8').animate({
                left: "-=" + $scrollWidth + "px"
            });
            $('#photo9').animate({
                left: "-=" + $scrollWidth + "px"
            });
            $('#photo10').animate({
                left: "-=" + $scrollWidth + "px"
            });

}

The code above serves as a basic outline of my objective. I do not wish to hardcode the adjustments and instead seek a dynamic solution. It's worth noting that using a counter variable won't suffice due to the non-sequential nature of the ids. Any assistance or alternative ideas are greatly appreciated. Thank you in advance.

EDIT: https://i.stack.imgur.com/9AoiR.png

In light of the updated information with the image reference, consider a scenario where there are initially four images displayed. Upon deleting one, I need to automatically adjust the "left" property of the remaining two images on the right side of the deleted one by reducing their left values by 110 pixels each. This adjustment is necessary to maintain the layout when using absolute positioning. Your suggestions and help are welcome. Thanks.

javascript jquery html css ajax

Answer 1

Answer №1

Check out this small jsfiddle I created, hopefully it meets your needs: https://jsfiddle.net/j45x4qjx/

Below is the function :

function deleteDiv(selector) {

  var mycrousel = $('.mycrousel');
  var div = $(selector);
  var divIndex = mycrousel.index(div);
  var otherElem;

  if (divIndex === 0) {
    otherElem = $(mycrousel.get(divIndex + 1));
  } else {
    otherElem = $(mycrousel.get(divIndex - 1));
  }

  // Calculate the left value between two elements
  var leftElem = parseInt(div.css('left'));
  var leftOtherElem = parseInt(otherElem.css('left'));
  var leftPx = Math.abs(leftElem - leftOtherElem);

  // Remove the selected div
  div.remove();

  $('.mycrousel').each( function( index, element ) {
    if (index > divIndex - 1) {
     var $element = $(this);
     var left = parseInt($element.css('left'));
     // Get the new value of left or set to 0 if negative
     var newLeft = Math.max(0, left - leftPx); 

     $element.animate({
         left: newLeft + "px"
     });
    } 
  });

 }

Simply provide the selector of the div you wish to remove, and let the function calculate the pixel distance between that div and the nearest one before subtracting that amount from all other divs.

Answer 2

Check out this small jsfiddle I created, hopefully it meets your needs: https://jsfiddle.net/j45x4qjx/

Below is the function :

function deleteDiv(selector) {

  var mycrousel = $('.mycrousel');
  var div = $(selector);
  var divIndex = mycrousel.index(div);
  var otherElem;

  if (divIndex === 0) {
    otherElem = $(mycrousel.get(divIndex + 1));
  } else {
    otherElem = $(mycrousel.get(divIndex - 1));
  }

  // Calculate the left value between two elements
  var leftElem = parseInt(div.css('left'));
  var leftOtherElem = parseInt(otherElem.css('left'));
  var leftPx = Math.abs(leftElem - leftOtherElem);

  // Remove the selected div
  div.remove();

  $('.mycrousel').each( function( index, element ) {
    if (index > divIndex - 1) {
     var $element = $(this);
     var left = parseInt($element.css('left'));
     // Get the new value of left or set to 0 if negative
     var newLeft = Math.max(0, left - leftPx); 

     $element.animate({
         left: newLeft + "px"
     });
    } 
  });

 }

Simply provide the selector of the div you wish to remove, and let the function calculate the pixel distance between that div and the nearest one before subtracting that amount from all other divs.

Answer 3

Answer №2

Is there a specific reason to identify the deleted image? Ultimately, what you're looking for is a well-organized list of images. I believe this solution should meet your needs:

function organizeImages() {
  var $imageWidth = 120;
  var $initialPosition = 20;
  var counter = 0;
  
  $('.gallery-container > img').each(function(){
    $(this).animate({
      left: ($initialPosition + $imageWidth*counter)+"px"
    }, 400);

    counter++;
  });                                       
}

Answer 4

Is there a specific reason to identify the deleted image? Ultimately, what you're looking for is a well-organized list of images. I believe this solution should meet your needs:

function organizeImages() {
  var $imageWidth = 120;
  var $initialPosition = 20;
  var counter = 0;
  
  $('.gallery-container > img').each(function(){
    $(this).animate({
      left: ($initialPosition + $imageWidth*counter)+"px"
    }, 400);

    counter++;
  });                                       
}

Answer 5

Answer №3

Your method of approach is highly inefficient, resulting in lag and jank when viewing this code on a mobile device.

A more effective solution would be to group all images within a parent element and scroll that container instead. By doing so, you can eliminate the need for multiple selectors and individual animations on each image.

In cases where an image is deleted, utilizing CSS properties can easily fill the void left by the removed image. Additionally, incorporating creative CSS animations can enhance the transition effect seamlessly!

Answer 6

Your method of approach is highly inefficient, resulting in lag and jank when viewing this code on a mobile device.

A more effective solution would be to group all images within a parent element and scroll that container instead. By doing so, you can eliminate the need for multiple selectors and individual animations on each image.

In cases where an image is deleted, utilizing CSS properties can easily fill the void left by the removed image. Additionally, incorporating creative CSS animations can enhance the transition effect seamlessly!

Tips for updating the left positioning of a Div element on the fly

Answer №1

Answer №2

Answer №3

Similar questions

Can you provide guidance on transforming a JSON date format like '/Date(1388412591038)/' into a standard date format such as '12-30-2013'?

The async and await functions do not necessarily wait for one another

Issue with jQuery ajax in Internet Explorer 6

Slide the first div upward to display the text in the second div when hovering over the first div

Is there a way for me to access the current templating in AngularJS?

Verify if the JSON attribute is empty

Constructing hierarchical objects in JavaScript

How is the server architecture typically designed in a node.js application?

PHP function that includes an if statement in its returned value

Fixed width blocks automatically adjusting to small containers

How to Create a React Material UI Switch with Minimal Padding

The error message: "Trying to access property 'get' of an undefined object"

Streamline a javascript code with numerous elements

Creating dynamic routes for custom locales in Next.js

The app is not showing the Post Request message after it has been sent from the UI front end

Arrangement of cards in a column

What are the distinctions between altering the value of a textarea with JS and user input?

The specified height for input[type=button] in Firefox/Safari is adjusted by subtracting the padding and border

Issues arise when trying to integrate external JavaScript files into a Vue application

Using jQuery UI autocomplete feature to dynamically populate search suggestions from an AJAX