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 ?