Question

We have a website with many math formulas (displayed as pngs, converted from Latex) and they are dynamically loaded into their respective places (out of an sql-database).

All the formulas lie on line with the text. you know in this line: _______________.

We would like to have a function to take every element of a certain class (or by using “img” in css) with which we could automatically move all imgs down half of the respective image-height.

Is there a simple solution I’m overlooking, or do we really have to position every image (sadly, there will be hundreds!) by hand?

Answer 1

Pure Javascript Solution:

//All of your images with class : class
var images = document.getElementsByClassName("class");

//Iterates through each of the images
for (var i = images.length - 1; i >= 0; i--)
{
    //Sets the images top margin to the half of the height of the image
    images[i].style.marginTop = images[i].style.height / 2;
}

jQuery Solution:

If jQuery is an option, you could use the the .each() function to interate through each of them at set their heights accordingly:

$('.class').each(function()
{
    //Get Item Height
    var height = $(this).height();

    //Move Item Down By Half of Height
    $(this).css('margin-top',height/2);
});

More concise:

$('.class').each(function(){
    $(this).css('margin-top',($(this).height()/2));
});