I've been developing a basic slider that moves images from right to left. It's functioning properly on Firefox, but I'm encountering an issue with Chrome when trying to obtain the width of the images.
$(window).load(function() {
// Loading images from a directory
for (m = 1; m <= 5; m++) {
$('ul').append("<li><img src='image_" + m + ".jpg'/></li>");
}
// Variables
var ul = $('ul');
li = ul.find('li');
ul_width = 0;
// Calculating total width of ul li
$(ul).children().each(function() {
ul_width = ul_width + $(this).width();
alert(ul_width);
});
...
In Chrome, the alert only shows a value of 50 because of the margin-left: 50px set for img. Therefore, I'm only receiving the margin size and not the actual image width as intended.
On the other hand, everything works smoothly in Firefox where I get both the margin size and image width correctly.
Could someone please advise me on how to address this issue? It's puzzling why the identical code functions perfectly in Firefox but encounters problems in Chrome.