Home/ Questions/Q 3287074
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T20:27:08+00:00

Sometimes i’m facing problems, trying to get sizes of an HTML element in question.

  • 0

Sometimes i’m facing problems, trying to get sizes of an HTML element in question.

I’m tracing JavaScript code and see, that width and height of this element are returned as 0.

When i do the same piece of code in browser’s console, correct sizes are returned.

Example code, that demonstrates this problem is following:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Decorate image with button</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript" charset="utf-8">
        jQuery(function($){
            // Decorate image, wrapped to link to movie with "Play" button
            $("a > img").each(function(){
                var img = $(this);
                var a = img.parent();

                var w = img.width();
                var h = img.height();

                a.html(" \
                    <table style='position: absolute;'> \
                        <tr style='background-color:transparent;'> \
                            <td style='width: 100%; background-color: transparent;'> \
                                <img src='http://30ttclan.extra.hu/e107_images/RTEmagicC_play_button.png.png' style='display: block; width: 25%; margin-left:auto; margin-right: auto;'></img> \
                            </td> \
                        </tr> \
                    </table>");
                a.append(img);
                // Make height of table equals to height of image
                a.find("> table").width( w );
                a.find("> table").height( h );
            });
        });
    </script>
</head>
<body>
    <a href="http://movies.apple.com/media/us/mac/ilife/iphoto/2010/features/apple-ilife-iphoto-features_whats_new-us-20100727_r848-9cie.mov">
        <img src="http://kelsocartography.com/blog/wp-content/uploads/2009/01/iphoto09_map.png">
    </a>
</body>
</html>

This code takes an image, wrapped to anchor and decorates it with “Play” button, that must be centered over it.

Table cell is used for centering.

In Firefox it works well, but does’t in Safari 5.

When we trace the code, where “w” and “h” variables getting width and height, we will see, that they have zeros.

When we say from browser’s console

$("a > img").width()

we will get correct sizes of image.

I think, i’m missing something …

I think, i must catch “rendering complete”-like events … But, as far, as i know, they are not presented in DOM.

How can i get to know, when the HTML element is rendered and displayed to be 100 % sure, that i’m dealing with correct sizes ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is solved.

    As mentioned in question How to ensure images are loaded inside a JQuery plugin?

    webkit browsers like Chrome often return 0 size for images because they’re loaded in parallel.

    All, what i need to do, is to use “load” event for image.

    $("a > img").load(function(){
    var img = $(this);
    var a = img.parent();

    var w = img.width();
    var h = img.height();

    a.html(" \
        <table style='position: absolute;'> \
            <tr style='background-color:transparent;'> \
                <td style='width: 100%; background-color: transparent;'> \
                    <img src='http://30ttclan.extra.hu/e107_images/RTEmagicC_play_button.png.png' style='display: block; width: 25%; margin-left:auto; margin-right: auto;'></img> \
                </td> \
            </tr> \
        </table>");
    a.append(img);
    // Make height of table equals to height of image
    a.find("> table").width( w );
    a.find("> table").height( h );
});

    Now, i’m getting correct sizes.

    • 0