raulbaros raulbaros - 3 months ago 20
HTML Question

Position and style ajax loader

I am trying to position (always in page center for all devices) and style (color, size, etc.) my ajax loader gif. For position I use @media-queries and I am trying to specify a div id inside my javascript. I tried inline styling but that doesnt really work. Is my goal possible to do?

$("#list").html("<img src='/images/ajax-loader.gif' width='200'>");

Answer

Without knowing what you mean by "doesn't reall work", we're kind of guessing here. However inline styles should work just fine for centering

$("#list").html("<img src='/images/ajax-loader.gif' width='200' style='position:fixed; left:50%; top:50%;transform: translate(-50%, -50%);'>");

I would suggest moving this into a class in your css though:

.loader {
     position:fixed;
     left:50%;
     top:50%;
     transform: translate(-50%, -50%);
}

Then just apply it:

      $("#list").html("<img src='/images/ajax-loader.gif' width='200' class='loader'>");
Comments