could be that the images aren't finished loading by the time you're
trying to get their width. Maybe putting your script inside a window
load rather than document ready would help. I'm guessing, too, that
the images don't have a width and height attribute explicitly set in
the html.
$(window).bind('load', function() {
// your code ...
});
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Nov 15, 2008, at 8:55 AM, Fluffy Convict wrote:
I'm rewriting my own javascript library to jQuery. A huge undertaking,
but hopefully it will payoff in the future :) Anyways - I'm trying to
write a function that takes the title-attribute of an image and
inserts is as a caption:
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script>
$(document).ready(function(){
$("img.caption").each(function(i) {
var img_width = $(this).width();
var img_title = $(this).attr('title');
var img_align = $(this).attr('align');
$(this).wrap("<div class=\"image-caption-container\" style=
\"float:" + img_align + "\"></div>");
$(this).parent().width(img_width);
$(this).parent().append("<div class=\"image-caption\">" +
img_title + "</div>");
});
});
</script>
</head>
<body>
<img src="logo.gif" class="caption" title="scripting like a
rockstar">
</body>
</html>
But img_width is zero (and logo.gif exists). Moving my script to the
bottom of the page (before the closing body-tag) makes no difference.
Any suggestions?
