The CSS effect fails to take effect following an AJAX response

Question

The CSS effect fails to take effect following an AJAX response

After a successful ajax response, I am attempting to apply a jQuery .css effect. However, it seems that this process is not working as expected because I am trying to retrieve the height of a newly created element and then applying it to another newly created element. My goal is to move the .opts div to the bottom based on the dynamic height of the .col-4 div.

You can view the code pen here: https://codepen.io/Pancuatico/pen/abpOeZy

Upon opening the code pen, you can execute this code in the console:

$(".opts").css("margin-top",$(".col-4").height());

and observe that it works perfectly. But how can I make this work following a successful ajax response?

Edit

Below is my JavaScript code where I might have made a mistake:

$(document).ready(function(){
    loadImgs();
});

function loadImgs(){
    $.post("anurl.php", function(data){

        //Some data processing occurs here
        //...

        var out = "<div class='col-4'><img src='imgpathalt' alt='imgpath'></div>";
        out += "<div class='col-2'>";
            out += "<img src='imgpath2' alt='imgpath2alt'>";
            out += "<div class='opts'>";
                out += "<button>add</button>";
                out += "<button>rm</button>";
            out += "</div>";
        out += "</div>";

        $(".row").html(out);
        var col4Height = $(".col-4").height();
        $(".opts").css("margin-top",col4Height); //this does not work
    });
}

jquery css

Answer 1

Answer №1

The issue here is that when you add the margin-top to those elements, the images are still loading. This means that at that moment, the height of .col-4 is only as big as the buttons. You need to wait for the images to finish loading before updating the margin to match the height of .col-4.

A more effective approach would be to generate the elements dynamically instead of including them in a string of HTML. By doing this, you can attach a load event to the image like so-

myImage.load(imgLoaded);

Then, update the margin once the image has loaded using this function-

function imgLoaded() {
$(".opts").css("margin-top", $(".col-4").height();); 
}

Of course, another way to achieve the desired result in your code is by using the html onload attribute.

$(document).ready(function(){
    loadImgs();
});

function loadImgs(){
    $.post("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js",function(data){

        //...
        //Do something with the data here
        //This URL is just for testing purposes
        //...

        var out = "<div class='col-4'><img src='https://cutt.ly/IxR1RrQ' alt='https://bit .ly/3tI1rWa' onload='imgLoaded()'></div>";
        out += "<div class='col-2'>";
            out += "<img src='https://cutt.ly/IxR1RrQ' alt='https://bit .ly/3tI1rWa'>";
            out += "<div class='opts'>";
                out += "<button>add</button>";
                out += "<button>rm</button>";
            out += "</div>";
        out += "</div>";

        $(".row").html(out);

    });
}

function imgLoaded() {
    $(".opts").css("margin-top", $(".col-4").height();); 
}

Answer 2

The issue here is that when you add the margin-top to those elements, the images are still loading. This means that at that moment, the height of .col-4 is only as big as the buttons. You need to wait for the images to finish loading before updating the margin to match the height of .col-4.

A more effective approach would be to generate the elements dynamically instead of including them in a string of HTML. By doing this, you can attach a load event to the image like so-

myImage.load(imgLoaded);

Then, update the margin once the image has loaded using this function-

function imgLoaded() {
$(".opts").css("margin-top", $(".col-4").height();); 
}

Of course, another way to achieve the desired result in your code is by using the html onload attribute.

$(document).ready(function(){
    loadImgs();
});

function loadImgs(){
    $.post("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js",function(data){

        //...
        //Do something with the data here
        //This URL is just for testing purposes
        //...

        var out = "<div class='col-4'><img src='https://cutt.ly/IxR1RrQ' alt='https://bit .ly/3tI1rWa' onload='imgLoaded()'></div>";
        out += "<div class='col-2'>";
            out += "<img src='https://cutt.ly/IxR1RrQ' alt='https://bit .ly/3tI1rWa'>";
            out += "<div class='opts'>";
                out += "<button>add</button>";
                out += "<button>rm</button>";
            out += "</div>";
        out += "</div>";

        $(".row").html(out);

    });
}

function imgLoaded() {
    $(".opts").css("margin-top", $(".col-4").height();); 
}

Answer 3

Answer №2

Everything is functioning properly.

Check out the code snippet here

I have made some adjustments to the CSS parameters and they are now visible.


        var col4Height = $(".col-4").height();
        $(".opts").css("padding",'10px');  

        $(".opts").css("background",'green');  
        $(".opts"").css("top",col4Height);

Also remember to use

$(".opts").css("top",col4Height);

as it needs to be positioned absolutely

I would approach it differently though.

$(document).ready(function(){
    doWork();
});

async function loadImages(){}

async function doWork(){
    await loadImages();

    //perform additional tasks after images are loaded such as
    var col4Height = $(".col-4").height();
    $(".opts").css("padding",'10px');  

}

CHECK THIS

$(document).ready(async function() {
  await loadImgs();
 // Assume no images are loaded at the beginning.
  var imagesLoaded = 0
  // Count total number of images on the page once it has loaded.
  var totalImages = $("img").length

  // Increment count every time an image is loaded, when count equals total number of images,
  // call the allImagesLoaded() function.
  $("img").on("load", function (event) {
    imagesLoaded++
    if (imagesLoaded == totalImages) {
      allImagesLoaded()
    }
  })

  function allImagesLoaded() {
    console.log("ALL IMAGES LOADED");
     change();
  }
  });

async function change(){
 
    if($(".col-4").height() != 0) {
   var col4Height = $(".col-4").height();
      console.log(col4Height);
        $(".opts").css("padding",'10px'); //this does not work
   
        $(".opts").css("background",'green'); //this does not work
        $(".opts").css("margin-top",col4Height); //this does not work
    }
};
async function loadImgs(){
   await $.post("https://jsonplaceholder.typicode.com/posts",function(data){
        console.log(data);
        //...
        //Some process with the data here
        //Using that url for testing purposes
        //...
...

     
 
    });      
  var col4Height = $(".col-4").height();
  console.log(col4Height);

}

Answer 4

Everything is functioning properly.

Check out the code snippet here

I have made some adjustments to the CSS parameters and they are now visible.


        var col4Height = $(".col-4").height();
        $(".opts").css("padding",'10px');  

        $(".opts").css("background",'green');  
        $(".opts"").css("top",col4Height);

Also remember to use

$(".opts").css("top",col4Height);

as it needs to be positioned absolutely

I would approach it differently though.

$(document).ready(function(){
    doWork();
});

async function loadImages(){}

async function doWork(){
    await loadImages();

    //perform additional tasks after images are loaded such as
    var col4Height = $(".col-4").height();
    $(".opts").css("padding",'10px');  

}

CHECK THIS

$(document).ready(async function() {
  await loadImgs();
 // Assume no images are loaded at the beginning.
  var imagesLoaded = 0
  // Count total number of images on the page once it has loaded.
  var totalImages = $("img").length

  // Increment count every time an image is loaded, when count equals total number of images,
  // call the allImagesLoaded() function.
  $("img").on("load", function (event) {
    imagesLoaded++
    if (imagesLoaded == totalImages) {
      allImagesLoaded()
    }
  })

  function allImagesLoaded() {
    console.log("ALL IMAGES LOADED");
     change();
  }
  });

async function change(){
 
    if($(".col-4").height() != 0) {
   var col4Height = $(".col-4").height();
      console.log(col4Height);
        $(".opts").css("padding",'10px'); //this does not work
   
        $(".opts").css("background",'green'); //this does not work
        $(".opts").css("margin-top",col4Height); //this does not work
    }
};
async function loadImgs(){
   await $.post("https://jsonplaceholder.typicode.com/posts",function(data){
        console.log(data);
        //...
        //Some process with the data here
        //Using that url for testing purposes
        //...
...

     
 
    });      
  var col4Height = $(".col-4").height();
  console.log(col4Height);

}

The CSS effect fails to take effect following an AJAX response

Answer №1

Answer №2

Similar questions

Ways to restrict a function to a single DOM element using either its id or class

Changing the color of a div while implementing a show and hide effect in JavaScript

Attempting to retrieve the value of "id" using a "for...of" loop

The jQuery Modal Dialog functions properly on the initial page load, but fails to work on subsequent pages unless manually refreshed

"Encountering consistent errors when attempting to upload files via ajax in ASP.NET

Tips for updating information when a button is chosen

The transparency effect on the overlaying image gradually diminishes as the images transition in the jQuery slideshow on Internet

Customize the layout of menu icon in HTML/CSS using FlexBox Grid

Initiate the preloader function with a GIF loading image to display while my PHP script processes and retrieves data

Refreshing the Date Display with AJAX Response

The persistent space between the navbar and the index page remains despite the suggested fixes provided

What is the best way to incorporate web components into a React Js project?

Maintaining Scene Integrity in THREE.JS: Tips for Handling Window Resizing

What is the best way to add border-radius to an image while incorporating padding?

Is there a way to remove a certain child category post from appearing in a parent category?

Navigate to the specified URL once the Ajax function has completed successfully

Issue with Jquery 1.10.2 not functioning properly on IE10 with JSON data

I need help setting up a link in HTML that redirects to the correct webpage when clicked. How can I make this happen smoothly?

Enhancing an Image Gallery using CSS

Activate the last div within the identical class