Question

I’ve been using your fullBg script found here: http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

(function($) {
  $.fn.fullBg = function(){
    var bgImg = $(this);        

    function resizeImg() {
      var imgwidth = bgImg.width();
      var imgheight = bgImg.height();

      var winwidth = $(window).width();
      var winheight = $(window).height();

      var widthratio = winwidth / imgwidth;
      var heightratio = winheight / imgheight;

      var widthdiff = heightratio * imgwidth;
      var heightdiff = widthratio * imgheight;

      if(heightdiff>winheight) {
        bgImg.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImg.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });     
      }
    } 
    resizeImg();
    $(window).resize(function() {
      resizeImg();
    }); 
  };
})(jQuery)

and it’s seems to be working just fine in FF but not in Chrome. I would be grateful if you just have a quick look at what is wrong with the usage of your script as I have run out of ideas… I’m using jquery-ujs rails plugin to handle ajax requests (https://github.com/rails/jquery-ujs/wiki/ajax)

(function() {

  $(window).load(function() {
    var Layout;
    $(function() {
      return $(".thumb_container").draggable({
        containment: 'document',
        scroll: false,
        zIndex: 5
      });
    });
    $('.background').fullBg();
    Layout = {
      config: {
        effectIn: 'fadeIn',
        effectOut: 'fadeOut',
        speed: 300
      },
      init: function() {
        $('.thumb').on('ajax:success', this.changeData);
        return $('.thumb').on('ajax:complete', this.changeBg);
      },
      changeData: function(event, data, status, xhr) {
        var config, effectIn, effectOut, imgPath, speed;
        config = Layout.config;
        effectIn = config.effectIn;
        effectOut = config.effectOut;
        speed = config.speed;
        imgPath = data.image_bg;
        $(".background")[effectOut](speed).detach();
        $("<img class='background'>").appendTo('#container').attr({
          src: imgPath,
          'data-id': artistId
        });
        return event.preventDefault();
      },
      changeBg: function(xhr, status) {
        return $('.background').fullBg();
      }
    };
    return Layout.init();
  });

}).call(this);

I tried with ajax:complete, without it.. It works in any case in FF, and img tag has ‘width’ style attr:

<img class="background" src="/media/BAhbBlsHOgZmSSIsMjAxMi8wNi8yMy8yMl8yOV8xN180NzhfXzY1XzU1XzIwMDIuanBnBjoGRVQ" data-id="1" style="width: 1246px; height: 1477px;">

, but in Chrome it seems to be half-baked, eg.

<img class="background" src="/media/BAhbBlsHOgZmSSIsMjAxMi8wNi8yMy8yMl8yOV8xN180NzhfXzY1XzU1XzIwMDIuanBnBjoGRVQ" data-id="1" style="height: 399px; ">  

so there’s ‘height’ style attr, but NO ‘width’ attr and once I resized window, fullBg() completes its function.
what should I correct to make it work in both FF and Chrome?

Thanks in advance!

UPDATE: Opening parenthesis typo fixed

Answer 1

And the solution to the problem is that script needed to wait to call fullBg() function until the image is fully loaded

(function() {

  $(window).load(function() {
    var Layout;
    $(function() {
      return $(".thumb_container").draggable({
        containment: 'document',
        scroll: false,
        zIndex: 5
      });
    });
    $('.background').fullBg();
    Layout = {
      config: {
        effectIn: 'fadeIn',
        effectOut: 'fadeOut',
        speed: 300
      },
      init: function() {
        $('.thumb').on('ajax:success', this.changeData);
      },
      changeData: function(event, data, status, xhr) {
        var config, effectIn, effectOut, imgPath, speed;
        config = Layout.config;
        effectIn = config.effectIn;
        effectOut = config.effectOut;
        speed = config.speed;
        imgPath = data.image_bg;
        $(".background")[effectOut](speed).detach();
        $("<img class='background'>").appendTo('body').attr({
          src: imgPath,
          'data-id': artistId
        }).load( function() {
           $(this).fullBg();
        });
      }
    };
    return Layout.init();
  });

}).call(this);

I thought that ajax:complete is the state of fully loaded image (along the rest of data passed)… no it’s not

UPDATE: Example extended