Struggling to adjust the width of a div accurately following the population of AJAX content

Question

Struggling to adjust the width of a div accurately following the population of AJAX content

This particular piece of code is responsible for populating an inner div within an image slider by making an Ajax call :

$.ajax({
    type: "GET",
    dataType: 'json',
    url: $(this).attr('href')
}).done(function (result) {
    
    // add thumbnails to lower slider
    var correct_width = 0;
    
    for (var $i = 0; $i < result[1].length; $i++) {
        $('#lower_slider').append("<img src='" + result[1][$i]['image_thumb_src'] + "'>");
        
        // calculate $('#lower_slider') width
        $('#lower_slider').find('img').each(function () {
            correct_width += $(this).outerWidth();
        });
    }
    
    // set $('#lower_slider') width
    $('#lower_slider').width(correct_width);
});

The function of this code performs flawlessly the second time it's run - indicating that there might be some race conditions at play. How can these be resolved?

p.s - I am aware that a similar query has been raised before, but none of the solutions suggested have proven effective in my case.

Thank you.

javascript jquery css ajax

Answer 1

Answer №1

It seems like the second attempt is successful because the requested images are already cached.

To ensure accuracy, consider calculating correct_width once all the images have fully loaded:

var correct_width = 0;
var imgArray = new Array();
var obj = this;

for (var $i = 0; $i < result[1].length; $i++) {
    imgArray[$i] = new Image();
    imgArray[$i].src = result[1][$i]['image_thumb_src'];
    imgArray[$i].onload = function() {
       $('#lower_slider').append("<img src='" + this.src + "'>");
       correct_width += $(obj).outerWidth();
    }
}

I have not tested this code myself, but it should function correctly.

Answer 2

It seems like the second attempt is successful because the requested images are already cached.

To ensure accuracy, consider calculating correct_width once all the images have fully loaded:

var correct_width = 0;
var imgArray = new Array();
var obj = this;

for (var $i = 0; $i < result[1].length; $i++) {
    imgArray[$i] = new Image();
    imgArray[$i].src = result[1][$i]['image_thumb_src'];
    imgArray[$i].onload = function() {
       $('#lower_slider').append("<img src='" + this.src + "'>");
       correct_width += $(obj).outerWidth();
    }
}

I have not tested this code myself, but it should function correctly.

Answer 3

Answer №2

After several attempts, I finally managed to make it function by incorporating a delay before the resizing and width calculation process:

var correct_width = 0;

for (var $i = 0; $i < result[1].length; $i++) {
    $("#lower_slider").append(
        "<img src=" + result[1][$i]["image_thumb_srcand "] + "'>"
    );
}

var wait = setTimeout(function () {
    $("#lower_slider")
        .find("img")
        .each(function () {
            correct_width += $(this).outerWidth() + 10;
            $("#lower_slider").innerWidth(correct_width);
        });
}, 1000);

I attempted other solutions but this was the only one that seemed to do the trick for me.

Answer 4

After several attempts, I finally managed to make it function by incorporating a delay before the resizing and width calculation process:

var correct_width = 0;

for (var $i = 0; $i < result[1].length; $i++) {
    $("#lower_slider").append(
        "<img src=" + result[1][$i]["image_thumb_srcand "] + "'>"
    );
}

var wait = setTimeout(function () {
    $("#lower_slider")
        .find("img")
        .each(function () {
            correct_width += $(this).outerWidth() + 10;
            $("#lower_slider").innerWidth(correct_width);
        });
}, 1000);

I attempted other solutions but this was the only one that seemed to do the trick for me.

Struggling to adjust the width of a div accurately following the population of AJAX content

Answer №1

Answer №2

Similar questions

Executing JavaScript code upon successful form submission: An overview

What value does a variable have by default when assigned to the ko.observable() function?

Introduce a pause interval between successive ajax get calls

Next.js displays component twice

Styling with CSS: Utilize flexbox to adjust the layout of two elements, ensuring they

Utilizing Angular 2's *ngFor to conditionally wrap elements can be compared to organizing a layout with three columns in a Bootstrap row, then starting a

Learn the steps to dynamically adjust the size of a pop-up window in Sencha based on the content that is

Ways to eliminate the excess margin of ng-container from the webpage

Adapt the CSS based on different screen sizes

"Ensuring Data Accuracy: Validating WordPress Fields with JavaScript

Utilizing JavaScript for parallax horizontal scrolling (identifying optimal 50% of screen)

Implementing a postback without relying on AutoPostBack

Is there a way to modify the Javascript for this Contact Form to trigger a different action if a specific key is pressed instead?

Verifying the type and quantity of an item

Is concealing a button an effective strategy?

From transitioning from AngularJS to the latest version Angular 8

Having trouble making alerts or confirmation dialogs function in JavaScript

What is the most effective method for iterating through a JavaScript array?

Troubleshooting: SVG Icon Fails to Appear in Bright Theme Due to CSS

The Ajax request fails to pass the value to the controller