Question

I first do this and it works:

  $(document).ready(function() {
    var delay = 0;
    var myLeft = $("#container").offset().left;
    var myRight = myLeft + $("#container").outerWidth();
    var newWidth = $("#container").width();
    $("#head").animate({width: newWidth});
    $("#head").css("marginLeft", myLeft).css("marginRight", myRight);
    $('.box').each(function() {
       $(this).delay(delay).fadeIn();
       delay += 250;
    });
 });

Then i run this but it does’t work, ideally it would have to work on each window resize:

 function doSomething() {
   var myLeft = $("#container").offset().left;
   var myRight = myLeft + $("#container").outerWidth();
   var newWidth = $("#container").width();
   $("#head").animate({width: newWidth});
   $("#head").css("marginLeft", myLeft).css("marginRight", myRight);
  };

 var resizeTimer;
 $(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
 });

But it looks like as the new sizes are not applied each time there is a window resize, anyone?

Answer 1

window resize was happening before the new values were set therefore the trick was to include a timer delay for the window resize event:

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
  clearTimeout (timer);
   timer = setTimeout(callback, ms);
 };

});

$(window).resize(function() {
delay(function(){
    if ($("#head").width() != $("#container").width()){
        var myLeft = $("#container").offset().left;
        var newWidth = $("#container").innerWidth();
        var myRight = $(window).width() - ($("#container").offset().left + $("#container").outerWidth());
        $("#head").animate({ width: newWidth, marginLeft: myLeft, marginRight: myRight }, "fast");
    }
}, 1000);
});