Callback gets called before css update

[Felipe]

The callback function is passed the width of the screen, which is useful, but doesn't reflect directly in the width of the containers.

Due to a jquery pĺugin I'm using, I have to set the width of some images based on the size of ".grid_12", which isn't defined before the callback since the css file has not been added yet to the document. I tried setting the 'onload' property of css but it didn''t work. Is there a way to call the callback just after the css has been actually loaded? (without some hacky setTimeout)

[Nathan Smith]

@fcoelho …

Unfortunately, there isn't a reliable way to watch for onload of a stylesheet.

Could you possibly do without a jQuery plugin, by simply doing this with CSS?

img {
  max-width: 100%;
}

[Felipe]

@nathansmith

Unfortunately it didn't work. I'm using the jQuery Cycle plugin but it deliberately changes the image sizes for the slideshow.

I've tried using jquery with the load event,

$(css).load(function() {
    callback && callback(i, width);
});

but it will work only in Opera. Chrome for example doesn't really seem to respond to this. As of now I have modified adapt.js to fill in a new <style id="current-css"></style> container using this in change() (yes, I'm deliberately using jquery):

$.get(url, function(contents) {
    $("#current-css").html(contents);
    callback && callback(i, width);
});

So far it has worked fine for me and I'm happy with it. I feel like I'm cheating, but it tied together nicely.

[Nathan Smith]

@fcoelho — Cool. Glad you found a work-around! :)

If it's okay, I'm going to mark this issue as "closed."

[Felipe]

@nathansmith No problem! I wasn't even sure if this was the right place to ask this, thanks for your support! Adapt is working nicely for me now and I'm really enjoying it.