$(this).width() returns 0 resulting in the image-caption-container width being 0 which causes formatting issues [#675002]

The javascript in image_caption.js:

$(document).ready(function(){
  $("img.caption").each(function(i) {
    var imgwidth = $(this).width();
...

Fires before some images are loaded, resulting in the image-caption-container class div having a width 0. This causes the caption to wrap and overflow, and allows other page content to cover the image being captioned (because its style properties have been removed). I was able to solve this issue by changing:
$(document).ready(function(){
to
$(window).load(function(){
Is there a better way to solve this problem? Any chance this fix will be added to the module?

Comments

Comment #1

davidwhthomas CreditAttribution: davidwhthomas commented 8 January 2010 at 22:48

Status:

Needs review

» Active

Applied to dev release pending community testing/review.

if(imgwidth != 'undefined' && imgwidth != 0){
   // only set container width if defined and greater than 0
    $(this).parent().width(imgwidth);
}

Once reviewed and working, please updated the issue status
http://drupal.org/cvs?commit=311770

Comment #2

davidwhthomas CreditAttribution: davidwhthomas commented 8 January 2010 at 22:45

Status:

Active

» Needs review

Comment #3

Geijutsuka CreditAttribution: Geijutsuka commented 28 January 2010 at 02:03

Status:

Active

» Needs review

I commented on this to confirm this behavior, but I spoke too soon-- my problem appears to be something else. I can't delete my comment, sorry for the clutter.

Comment #4

tirdadc CreditAttribution: tirdadc commented 28 January 2010 at 22:12

This worked perfectly for me, thanks. Do you need more feedback or should I go ahead and change the status?

Comment #5

davidwhthomas CreditAttribution: davidwhthomas commented 3 February 2010 at 07:57

Status:

Needs review

» Fixed

Patch applied and released in 6.x.2.5 http://drupal.org/node/703262

Comment #6

17 February 2010 at 08:00

Status:

Fixed

» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Comment #7

bcobin CreditAttribution: bcobin commented 29 April 2011 at 22:05

Version:	6.x-2.4	» 6.x-2.5
Status:	Closed (fixed)	» Active

Don't mean to reopen an old issue (although I guess I am), but I was running into an issue with attached images (using FileField and Imagecache and not the Image module) where the width was not being calculated in Safari. Note here that I'm not using WYSIWYG - I'm using Custom Formatters to rewrite the output, which has finally (let us hope) enabled me to solve the caption issue while using lightbox; the whole caption thing has been a thorn in my side for a long time now...

(I hate WYSIWYG - I think it causes more problems than it solves, actually.)

FF works, but in Safari, the long captions span the width of the entire div. In Safari, the js produces CSS of display: block;; whereas in FF the output was display: block; width: 280px;, which in my case is correct.

Changing $(document).ready(function(){ to $(window).load(function(){ fixes it; I note that although the post says this was committed in 2.5, both the release and dev versions use the "document" code.

Additionally, I've found that floating the image right "breaks" IE 6 and 7. (The image initially displays correctly, but when the caption with gets calculated, the div "hiccups," throwing content below the block.) My final solution here was to float the image left only for IE 6 and 7.

So between using Custom Formatters, changing the js to accommodate Safari and not floating right for IE 6 and 7, I finally have a cross-browser image caption solution that works! Thanks for the module - hopefully this will help to make it better or, at least, save somebody else the time of sussing all this out...

Comment #8

xaa CreditAttribution: xaa commented 26 May 2011 at 12:00

Changing $(document).ready(function(){ to $(window).load(function(){ fixes it; I note that although the post says this was committed in 2.5, both the release and dev versions use the "document" code.

seems working perfectly. thanks
I have setup the version 2.5 and tried the dev. On both, the line is still Changing $(document).ready(function(){ instead of the new one. I thought it was already included on the release ?

Comment #9

chrisfromredfin

he/him/his

English

Portland, Maine

CreditAttribution: chrisfromredfin commented 4 July 2012 at 21:46

in 7.x-beta3, I think you can change
$("img.caption:not(.caption-processed)").each(function(i) {
to
$("img.caption:not(.caption-processed)").load(function() {

to get the same result.